CSS: toggle-group ​

.instui-toggle-group — Một disclosure có viền được xây dựng trên <details>: một hàng tóm tắt với mũi tên chevron và nội dung có thể thu gọn.

Được xây dựng trên cùng nền tảng native <details> giống như toggle-details; đặt <summary> ở đầu để nó trở thành hàng tiêu đề có thể nhấp và phần còn lại là nội dung có thể thu gọn.

Source: toggle-group.css

Sử dụng ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/toggle-group.css";

Các ví dụ ​

html
<details class="instui-toggle-group" open>
  <summary>Cài đặt nâng cao</summary>
  <div>Các tùy chọn này được hiển thị khi nhóm được mở rộng. Hàng tiêu đề có một chevron xoay khi mở, và nội dung nằm bên dưới một đường phân cách.</div>
</details>

Cấu trúc ​

text
.instui-toggle-group
  summary
  div
flowchart TD n0[".instui-toggle-group"]:::cssdoc-root n1("summary"):::cssdoc-part n2("div"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa ​

Bộ sửaMô tả
.-size-largeLớn. Bút danh dài của -size-lg.
.-size-lgLớn.
.-size-smNhỏ.
.-size-smallNhỏ. Bút danh dài của -size-sm.
.-without-borderLoại bỏ viền.

Phần tử giả ​

Phần tử giảMô tả
::beforeVẽ chevron (mũi tên) của hàng tóm tắt — một ký tự được che mặt quay để chỉ xuống khi nhóm được mở.

Trạng thái ​

Trạng tháiMô tả
:state(open)—

Token tiêu thụ ​

TokenKiểuGiá trị
--instui-border-radius-md<length>0.5rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-toggle-details-content-padding-large<length>1.375rem
--instui-component-toggle-details-content-padding-medium<length>1.125rem
--instui-component-toggle-details-content-padding-small<length>1.125rem
--instui-component-toggle-details-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-toggle-details-font-size-large<length>1.25rem
--instui-component-toggle-details-font-size-medium<length>1rem
--instui-component-toggle-details-font-size-small<length>0.875rem
--instui-component-toggle-details-font-weight<integer>400
--instui-component-toggle-details-icon-margin<length>0.375rem
--instui-component-toggle-details-line-height<percentage>150%
--instui-component-toggle-details-text-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-toggle-group-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-icon-chevron-right<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E')

Liên quan ​

  • toggle-details — Dạng đơn, không viền của cùng disclosure đó.