CSS: tag ​

.instui-tag — Մեկ տողում գտնվող չիպ՝ բանալի բառի կամ ֆիլտրի համար.

Սահմանում է իր սեփական հորիզոնական padding-ը (-size-sm/-size-lg դա չափում են); -p-*/-padding-* spacing utility մոդիֆիկատորների շղթայումը գերիշխում է այդ ներառված արժեքը.

Source: tag.css

Օգտագործում ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tag.css";

Դեմո ​

Օրինակներ ​

html
<span class="instui-tag -size-sm">small</span>

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-inlineՏողում տեղադրված է տեքստի հետ և ունի հաջորդող փակման (dismiss) պատկերակ.
.-readonlyՄիայն կարդալու համար (չհեռացվող) թեգ.
.-size-largeՄեծ թեգ։ -size-lg-ի երկարաձև համարժեքը.
.-size-lgՄեծ թեգ։
.-size-smՓոքր թեգ։
.-size-smallՓոքր թեգ։ -size-sm-ի երկարաձև համանունը.

Պսևդո-էլեմենտներ ​

Պսևդո-էլեմենտՆկարագիր
::afterՑուցադրում է հետևող փակման պատկերակը հեռացվելիք inline թեգի վրա.

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--instui-component-tag-default-background<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-default-background-hover<color>LightDarklight-dark(#44709F, #3E6895)
--instui-component-tag-default-border-color<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-default-border-radius<length>0.5rem
--instui-component-tag-default-border-style—solid
--instui-component-tag-default-border-width<length>0.0625rem
--instui-component-tag-default-color<color>LightDarklight-dark(#273540, #ffffff)
--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>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-inline-background-hover<color>LightDarklight-dark(#44709F, #3E6895)
--instui-component-tag-inline-border-color<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-inline-border-radius<length>0.25rem
--instui-component-tag-inline-color<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-component-tag-inline-icon-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tag-inline-icon-hover-color<color>LightDarklight-dark(#234465, #ffffff)
--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

Ավելին կապված ​

  • pill — Կարդալ-միայն պիտակ‑չիպի զուգորդակը.