CSS: pill
.instui-pill — Egy kompakt állapot-címke; adjon hozzá egy vezető glif-et a megosztott -icon-<name> formával.
Forrás: pill.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/pill.css";Demó
Példák
html
<span class="instui-pill">Draft</span>Draft
Módosítók
| Módosító | Leírás |
|---|---|
.-color-danger | Hibaállapot. |
.-color-info | Tájékoztatási állapot. |
.-color-success | Pozitív állapot. |
.-color-warning | Óvatos állapot. |
.-icon-* | Egy vezető glyf az ikonkészletből (pl. -icon-check), a címke előtt festve. |
.-render-icon-<name> | Elavult — The former renderIcon prop; still works as an alias, but use -icon-<name> instead. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::before | A vezető ikonglif, a pillérre méretezett és szóközölt. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-pill-background-color | <color> | light-dark(#ffffff, #10141A)LightDark |
--instui-component-pill-base-border-color | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-component-pill-base-text-color | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-component-pill-border-radius | <length> | 0.5rem |
--instui-component-pill-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | solid |
--instui-component-pill-border-width | <length> | 0.0625rem |
--instui-component-pill-error-border-color | <color> | #E62429 |
--instui-component-pill-error-text-color | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-component-pill-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-pill-height | <length> | 24px |
--instui-component-pill-info-border-color | <color> | #2B7ABC |
--instui-component-pill-info-text-color | <color> | light-dark(#2871AF, #7FB4F1)LightDark |
--instui-component-pill-line-height | <length> | 0.875rem |
--instui-component-pill-max-width | <length> | 240px |
--instui-component-pill-padding-horizontal | <length> | 0.5rem |
--instui-component-pill-status-label-font-weight | <integer> | 600 |
--instui-component-pill-success-border-color | <color> | #03893D |
--instui-component-pill-success-text-color | <color> | light-dark(#037D37, #61C378)LightDark |
--instui-component-pill-text-font-size | <length> | 0.875rem |
--instui-component-pill-text-font-weight | <integer> | 600 |
--instui-component-pill-warning-border-color | <color> | #CF4A00 |
--instui-component-pill-warning-text-color | <color> | light-dark(#BB4200, #FF905A)LightDark |
--instui-font-size-text-xs | <length> | 0.75rem |