CSS: badge ​

.instui-badge — Egy kis számláló vagy státusz pont, amely egy cél sarkára helyezkedik.

Ahhoz, hogy egy badget egy cél fölé helyezz, csomagold mindkettőt egy .instui-badge-wrapper-ba (pozíció horgony), és rögzítsd a badget egy -placement-* módosítóval.

Source: badge.css

Használat ​

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

Demó ​

Példák ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Beérkező levelek</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

Struktúra ​

A badge önmagában sorba illeszkedve jelenik meg, vagy opcionális instui-badge-wrapper-ben, amely horgonyozza egy cél fölé.

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;

Módosítók ​

MódosítóLeírás
.-color-dangerFigyelem/hiba számláló.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successPozitív/teljes számláló.
.-placement-bottom-endHelyezés az alsó-végi sarokban.
.-placement-bottom-startHelyezés az alsó-kezdő sarokban.
.-placement-end-centerKözépre igazítva az vég élén.
.-placement-start-centerKözépre igazítva a kezdő élén.
.-placement-top-endHelyezés a felső-végi sarokban.
.-placement-top-startHelyezés a felső-kezdő sarokban.
.-pulsePulsáló figyelemgyűrű.
.-standaloneMegjelenés sorba illesztve, nem a cél sarkára pozícionálva.
.-type-notificationCsak pont, nincs számláló.

Pseudo-elemek ​

Pseudo-elemLeírás
::beforeA pulzáló figyelemgyűrű a badge akcentusszínében rajzolva (a -pulse variáns).

Egyéni tulajdonságok ​

TulajdonságTípusAlapértelmezettLeírás
--pantoken-badge-accent<color>—A chip kitöltése; minden -color-* variáns és a pulzáló gyűrű ebből olvassa a színt.
--pantoken-badge-text<color>—A szöveg színe, az akcentushoz párosítva, hogy olvasható maradjon.

Animációk ​

AnimációLeírás
pantoken-badge-pulseA pulzáló gyűrű animációja.

Fogyasztott tokenek ​

TokenTípusÉrték
--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

Kapcsolódó ​

  • pill — Az inline címke-chip párja.