CSS: toggle-group
.instui-toggle-group — A határított nyitási forma <details> alapján: egy nyíl-összefoglalás sor és összecsukható tartalom.
A natív <details> alapon építve, mint a toggle-details; helyezze a <summary> előre, hogy kattintható fejléc sorrá váljon, és a többi összecsukható tartalom legyen.
Forrás: toggle-group.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/toggle-group.css";Példák
html
<details class="instui-toggle-group" open>
<summary>Advanced settings</summary>
<div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>
</details>Advanced settings
These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.
Felépítés
text
.instui-toggle-group
summary
divflowchart 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;
Módosítók
| Módosító | Leírás |
|---|---|
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-without-border | Távolítsa el a szegélyt. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::before | Megrajzolja a sorösszefoglalás nyitási nyilát, egy maszkolított karaktert, amely lefelé mutat, amikor a csoport nyitva van. |
Állapotok
| Állapot | Leírás |
|---|---|
:state(open) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-border-radius-md | <length> | 0.5rem |
--instui-border-width-sm | <length> | 0.0625rem |
--instui-color-background-elevated-surface-base | <color> | light-dark(#ffffff, #171B21)LightDark |
--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> | light-dark(#273540, #ffffff)LightDark |
--instui-component-toggle-group-border-color | <color> | light-dark(#8D959F, #6A7883)LightDark |
--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') |
Kapcsolódó
- toggle-details — Az ugyanez nyitási forma egyedülálló, határozatlan alakja.