CSS: tag
.instui-tag — Beágyazott chip egy kulcsszóhoz vagy szűrőhöz.
Forrás: tag.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tag.css";Demó
Példák
html
<span class="instui-tag -size-sm">small</span>small
Módosítók
| Módosító | Leírás |
|---|---|
.-inline | Beágyazottan jelenik meg a szöveggel és egy utolsó elutasítás karaktert kap. |
.-readonly | Csak olvasható (nem elutasítható) tag. |
.-size-large | Egy nagy tag. A -size-lg hosszú formájú aliasa. |
.-size-lg | Egy nagy tag. |
.-size-sm | Egy kis tag. |
.-size-small | Egy kis tag. A -size-sm hosszú formájú aliasa. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::after | Az utolsó elutasítás karaktert jeleníti meg egy elutasítható beágyazott tagon. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-tag-default-background | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-component-tag-default-background-hover | <color> | light-dark(#E2EAF7, #3E6895)LightDark |
--instui-component-tag-default-border-color | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-component-tag-default-border-radius | <length> | 0.5rem |
--instui-component-tag-default-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | solid |
--instui-component-tag-default-border-width | <length> | 0.0625rem |
--instui-component-tag-default-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-tag-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-tag-font-size-large | <length> | 1rem |
--instui-component-tag-font-size-medium | <length> | 0.875rem |
--instui-component-tag-font-size-small | <length> | 0.75rem |
--instui-component-tag-height-large | <length> | 2rem |
--instui-component-tag-height-medium | <length> | 1.75rem |
--instui-component-tag-height-small | <length> | 1.5rem |
--instui-component-tag-inline-background | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-component-tag-inline-background-hover | <color> | light-dark(#E2EAF7, #3E6895)LightDark |
--instui-component-tag-inline-border-color | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-component-tag-inline-border-radius | <length> | 0.25rem |
--instui-component-tag-inline-color | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-component-tag-inline-icon-color | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-tag-inline-icon-hover-color | <color> | light-dark(#234465, #ffffff)LightDark |
--instui-component-tag-max-width | <length> | 10rem |
--instui-component-tag-padding-horizontal | <length> | 0.5rem |
--instui-component-tag-padding-horizontal-small | <length> | 0.5rem |
--instui-icon-x | <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%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E') |
--instui-spacing-space-xs | <length> | 0.25rem |
Kapcsolódó
- pill — A csak olvasható címke-chip megfelelője.