CSS: badge ​

.instui-badge — Un piccolo punto di conteggio o di stato posizionato sull'angolo di un target.

Per posizionare un badge sopra un target, avvolgi entrambi in un .instui-badge-wrapper (l'ancora di posizione) e fissa il badge con un modificatore -placement-*.

Source: badge.css

Uso ​

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

Demo ​

Esempi ​

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

Struttura ​

Il badge viene renderizzato inline da solo, o all'interno di un opzionale instui-badge-wrapper che lo ancora sopra un target.

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;

Modificatori ​

ModificatoreDescrizione
.-color-dangerUn conteggio di attenzione/errore.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successUn conteggio positivo/completato.
.-placement-bottom-endPosizione nell'angolo inferiore fine.
.-placement-bottom-startPosizione nell'angolo inferiore inizio.
.-placement-end-centerPosizione centrata sul bordo di fine.
.-placement-start-centerPosizione centrata sul bordo di inizio.
.-placement-top-endPosizione nell'angolo superiore fine.
.-placement-top-startPosizione nell'angolo superiore inizio.
.-pulseUn anello di attenzione pulsante.
.-standaloneRenderizzare inline, non posizionato sull'angolo di un target.
.-type-notificationSolo un punto, senza conteggio.

Pseudo-elementi ​

Pseudo-elementoDescrizione
::beforeL'anello di attenzione pulsante disegnato nel colore di accento del badge (la variante -pulse).

Proprietà personalizzate ​

ProprietàTipoPredefinitoDescrizione
--pantoken-badge-accent<color>—Il riempimento del chip; ogni variante -color-* e l'anello di pulse lo leggono.
--pantoken-badge-text<color>—Il colore del testo, abbinato all'accento per mantenerne la leggibilità.

Animazioni ​

AnimazioneDescrizione
pantoken-badge-pulseL'animazione dell'anello di pulse.

Token consumati ​

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

Correlati ​

  • pill — L'omologo inline dell'etichetta-chip.