CSS: toggle-group

.instui-toggle-group — Yon divulgasyon ak bor ki bati sou <details>: yon ranje rezime ak chevron ak kontni ki ka pliye.

Bati sou menm fondasyon natif natal <details> ak toggle-details; mete <summary> an premye pou li vin ranje tèt la ki klikab epi rès la se kontni ki ka pliye.

Source: toggle-group.css

Itilizasyon

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

Egzanp

<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>

Estrikti

.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;

Modifikatè

Modifikatè	Deskripsyon
.-size-large	Gwo. Alias long fòm pou -size-lg.
.-size-lg	Gwo.
.-size-sm	Ti.
.-size-small	Ti. Alias long fòm pou -size-sm.
.-without-border	Retire bord la.

Pseudo-eleman

Pseudo-eleman	Deskripsyon
::before	Rann chevron divulgasyon ranje rezime a, yon glif kache ki vire pou l montre desann lè gwoup la ouvè.

Eta

Eta	Deskripsyon
:state(open)	—

Tokens konsome

Token	Tip	Valè
--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')

Ki gen rapò

• toggle-details — Fòm sèl la, san bor, nan menm divulgasyon an.