CSS: badge ​

.instui-badge — comhaireamh beag nó ponc stádais a chuirtear thar choirnéal sprioc.

Chun lógó a chur thar sprioc, cuimligh an dá chuid i .instui-badge-wrapper (an t-áitcheanglóir) agus ceangail an lógó le modhnóir -placement-*.

Source: badge.css

Úsáid ​

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

Taispeántas ​

Samplaí ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

Struchtúr ​

Tá an lógó le feiceáil isteach sa sruth féin, nó laistigh de instui-badge-wrapper roghnach a cheanglaíonn é thar sprioc.

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modhnóirí ​

ModhnóirCur síos
.-color-dangerComhaireamh aire/earráide.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successComhaireamh dearfach/críochnaithe.
.-placement-bottom-endSuíomh ag an gcoirnéal íochtarach-deiridh.
.-placement-bottom-startSuíomh ag an gcoirnéal íochtarach-tosaigh.
.-placement-end-centerLárnaithe ar imeall an deiridh.
.-placement-start-centerLárnaithe ar imeall an tosaigh.
.-placement-top-endSuíomh ag an gcoirnéal uachtarach-deiridh.
.-placement-top-startSuíomh ag an gcoirnéal uachtarach-tosaigh.
.-pulseFáinne aire ag bualadh.
.-standaloneTaispeáin isteach sa sruth, ní suiteáilte thar choirnéal sprioc.
.-type-notificationPonc amháin, gan comhaireamh.

Fo-eilimintí ​

Fo-eilimintCur síos
::beforeAn fáinne aire ag bualadh tarraingthe i ndath aicéad an lógó (an éagsúlacht -pulse).

Airíonna saincheaptha ​

AiríCineálRéamhshocraitheCur síos
--pantoken-badge-accent<color>—Líonadh an chipa; léitear gach éagsúlacht -color-* agus an fáinne bualadh uaidh.
--pantoken-badge-text<color>—Dath an téacs, péireáilte leis an aicéad ionas go bhfanann sé inléite.

Beochana ​

BeochanCur síos
pantoken-badge-pulseAn beochan fáinne bualadh.

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

TokenCineálLuach
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

Gaolmhar ​

  • pill — An comh-chomhpháirt lipéad-chíop isteach sa sruth.