CSS: list
.instui-list — Egy lista token-vezérelt elem távolsággal.
Beállítja a saját padding-inline-start értékét a listabehúzáshoz; egy -p*/-padding* térköz-segédosztály láncolása felülbírálja ezt a beépített értéket. Az egyes elemekhez lásd a(z) list.item tagot.
Forrás: list.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/list.css";Példák
html
<ul class="instui-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Felépítés
text
.instui-list
li (0..n)flowchart TD
n0[".instui-list"]:::cssdoc-root
n1("li"):::cssdoc-part
n0 -->|0..n| 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 |
|---|---|
.-inline | Helyezze el az elemeket soron belül (vízszintesen). |
.-size-large | Nagy. @affects list.item — Ennek megfelelően méretezi az elemek közötti térközt. A(z) -size-lg hosszú formájú álneve. |
.-size-lg | Nagy. @affects list.item — Ennek megfelelően méretezi az elemek közötti térközt. |
.-size-md | Közepes (alapértelmezett). @affects list.item — Ennek megfelelően méretezi az elemek közötti térközt. |
.-size-medium | Közepes (alapértelmezett). @affects list.item — Ennek megfelelően méretezi az elemek közötti térközt. A(z) -size-md hosszú formájú álneve. |
.-size-sm | Kicsi. @affects list.item — Ennek megfelelően méretezi az elemek közötti térközt. |
.-size-small | Kicsi. @affects list.item — Ennek megfelelően méretezi az elemek közötti térközt. A(z) -size-sm hosszú formájú álneve. |
.-unstyled | Távolítsa el a jelöléket és a kitöltést. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-list-item-color | <color> | LightDarklight-dark(#273540, #ffffff) |
--instui-component-list-item-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-list-item-font-size-large | <length> | 1.25rem |
--instui-component-list-item-font-size-medium | <length> | 1rem |
--instui-component-list-item-font-size-small | <length> | 0.875rem |
--instui-component-list-item-font-weight | <integer> | 400 |
--instui-component-list-item-line-height | <percentage> | 150% |
--instui-component-list-item-spacing-medium | <length> | 1.5rem |
--instui-component-list-list-padding | <length> | 2.25rem |