CSS: pill
.instui-pill — Egy kompakt állapot-címke; adjon hozzá egy vezető glif-et a megosztott -icon-<name> formával.
Ellentétben a badge-vel, amely számlálót mutat, vagy a tag-vel, amely eltávolítható, a pirula egy statikus státusz címke; annak vezető karaktere egy maszkolt ::before, nem egy <img>.
Forrás: pill.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/pill.css";Példák
html
<div class="instui-pill --display-flex" style="gap: 12px;">
<span class="instui-pill -color-success -icon-check">Published</span>
<span class="instui-pill">Draft</span>
<span class="instui-pill -color-info">In review</span>
<span class="instui-pill -color-warning">Stale</span>
<span class="instui-pill -color-danger">Blocked</span>
</div>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> | LightDarklight-dark(#ffffff, #10141A) |
--instui-component-pill-base-border-color | <color> | LightDarklight-dark(#8D959F, #6A7883) |
--instui-component-pill-base-text-color | <color> | LightDarklight-dark(#273540, #F2F4F5) |
--instui-component-pill-border-radius | <length> | 0.5rem |
--instui-component-pill-border-style | — | solid |
--instui-component-pill-border-width | <length> | 0.0625rem |
--instui-component-pill-error-border-color | <color> | #E62429 |
--instui-component-pill-error-text-color | <color> | LightDarklight-dark(#CF1F24, #FA917F) |
--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> | LightDarklight-dark(#2871AF, #7FB4F1) |
--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> | LightDarklight-dark(#037D37, #61C378) |
--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> | LightDarklight-dark(#BB4200, #FF905A) |
--instui-font-size-text-xs | <length> | 0.75rem |