CSS: tag ​

.instui-tag — Sglodyn mewnlin ar gyfer allweddair neu hidlydd.

Mae'n gosod ei padding llorweddol ei hun (-size-sm/-size-lg yn ei raddio); bydd cadwynu modiwr cyfleustodau gofod -p-*/-padding-* yn disodli'r gwerth adeiledig hwnnw.

Source: tag.css

Defnydd ​

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

Dangosfa ​

Enghreifftiau ​

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

Modyfiwyr ​

ModyfiwrDisgrifiad
.-inlineDarllenir mewnlin gyda'r testun ac mae'n cael glyff diddymu ar y diwedd.
.-readonlyTag dim ond darllen (na ellir ei ddiddymu).
.-size-largeTag mawr. Enw arall hir ffurf ar -size-lg.
.-size-lgTag mawr.
.-size-smTag bach.
.-size-smallTag bach. Enw arall hir ffurf ar -size-sm.

Is-elfennau ​

Is-elfenDisgrifiad
::afterYn arddangos y glyff diddymu ar y diwedd ar tag mewnlin y gellir ei ddiddymu.

Tocynnau a ddefnyddiwyd ​

TokenMathGwerth
--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

Perthnasol ​

  • pill — Y cyfatebydd label‑sglodyn dim ond darllen.