CSS: list
.instui-list — Egy lista token-vezérelt elem távolsággal.
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>- First item
- Second item
- Third item
Felépítés
text
.instui-list
liflowchart TD
n0[".instui-list"]:::cssdoc-root
n1("li"):::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 |
|---|---|
.-delimiter-dashed | Válassza el az elemeket szaggatott vonallal. |
.-delimiter-solid | Válassza el az elemeket szilárd vonallal. |
.-inline | Helyezze el az elemeket soron belül (vízszintesen). |
.-ordered | Rendezett lista számozása. |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-unstyled | Távolítsa el a jelöléket és a kitöltést. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::marker | Megjeleníti a lista pontot vagy a rendezett lista számát. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-list-item-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-list-item-delimiter-dashed-border-color | <color> | light-dark(#E8EAEC, #2D3D49)LightDark |
--instui-component-list-item-delimiter-dashed-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | dashed |
--instui-component-list-item-delimiter-dashed-border-width | <length> | 0.0625rem |
--instui-component-list-item-delimiter-solid-border-color | <color> | light-dark(#E8EAEC, #2D3D49)LightDark |
--instui-component-list-item-delimiter-solid-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | solid |
--instui-component-list-item-delimiter-solid-border-width | <length> | 0.0625rem |
--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-large | <length> | 2.25rem |
--instui-component-list-item-spacing-medium | <length> | 1.5rem |
--instui-component-list-item-spacing-small | <length> | 0.75rem |
--instui-component-list-list-padding | <length> | 2.25rem |
--instui-component-list-ordered-number-font-weight | <integer> | 600 |
--instui-component-list-ordered-number-margin | <length> | 0.5rem |