CSS: tag ​

.instui-tag — Slisín inlíne d’eochairfhocal nó scagaire.

Socraíonn sé a padding cothrománach féin (-size-sm/-size-lg é a scálaíonn); cuireann slabhra modhnóir spásála -p-*/-padding-* thar an luach ionsuite sin.

Source: tag.css

Úsáid ​

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

Taispeántas ​

Samplaí ​

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

Modhnóirí ​

ModhnóirCur síos
.-inlineLéitear é inlíne leis an téacs agus faigheann sé giúlfán díshuiteála ag an deireadh.
.-readonlyLipéad léithe amháin (nach féidir a dhíchur).
.-size-largeLipéad mór. Ailias fhada de -size-lg.
.-size-lgLipéad mór.
.-size-smLipéad beag.
.-size-smallLipéad beag. Ailias fhada de -size-sm.

Fo-eilimintí ​

Fo-eilimintCur síos
::afterLéiríonn sé an giúlfán díshuiteála ag an deireadh ar lipéad inlíne is féidir a dhíchur.

Tóicíní a úsáideadh ​

TokenCineálLuach
--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

Gaolmhar ​

  • pill — An chomhpháirt lipéad-slisín léithe amháin.