CSS: toggle-details
.instui-toggle-details — Egy stilizált natív <details> elem, forgó chevronnal.
A natív <details> elemen alapul, így a böngésző vezérli a nyitást, zárást és a billentyűzet támogatást; a CSS csak elrejti az alapértelmezett jelölőt és biztosítja a forgó chevront.
Forrás: toggle-details.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/toggle-details.css";Példák
html
<details class="instui-toggle-details" open>
<summary>What ships in this package?</summary>
Class-based component styles, built from the Instructure tokens, plus a prose layer.
</details>What ships in this package?
Class-based component styles, built from the Instructure tokens, plus a prose layer.Felépítés
text
.instui-toggle-details
summaryflowchart TD
n0[".instui-toggle-details"]:::cssdoc-root
n1("summary"):::cssdoc-part
n0 --> n1
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 |
|---|---|
.-chevron-end | Helyezze a nyilat az összefoglalás után. |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-variant-filled | Kitöltött (felület) változat. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::before | Megrajzolja az összefoglalás nyitási nyilát, egy maszkolított karaktert, amely lefelé mutat, amikor az összefoglalás nyitva van. |
Állapotok
| Állapot | Leírás |
|---|---|
:state(open) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-color-background-interactive-action-secondary-base | <color> | light-dark(#D5E2F6, #345B84)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-details-toggle-border-radius | <length> | 0.75rem |
--instui-component-toggle-details-toggle-padding | <length> | 0.375rem |
--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-group — Az ugyanez nyitási forma határított, csoportosított alakja.