CSS: badge ​

.instui-badge — Un petit punt o comptador d'estat situat a la cantonada d'un element.

Per col·locar una insígnia sobre un element, envolteu tots dos en un .instui-badge-wrapper (l'ancoratge de posició) i fixeu la insígnia amb el modificador -placement-*.

Source: badge.css

Ús ​

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

Demo ​

Exemples ​

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

Estructura ​

La insígnia es representa en línia per si sola, o dins d'un instui-badge-wrapper opcional que l'ancoratge sobre un element.

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;

Modificadors ​

ModificadorDescripció
.-color-dangerUn comptador d'atenció/error.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successUn comptador positiu/complet.
.-placement-bottom-endPosició a la cantonada inferior-final.
.-placement-bottom-startPosició a la cantonada inferior-inici.
.-placement-end-centerPosició centrada a la vora final.
.-placement-start-centerPosició centrada a la vora d'inici.
.-placement-top-endPosició a la cantonada superior-final.
.-placement-top-startPosició a la cantonada superior-inici.
.-pulseUn anell d'atenció pulsant.
.-standaloneEs mostra en línia, no posicionat sobre la cantonada d'un element.
.-type-notificationNomés un punt, sense comptador.

Pseudoelements ​

PseudoelementDescripció
::beforeL'anell d'atenció pulsant dibuixat en el color d'accent de la insígnia (variant -pulse).

Propietats personalitzades ​

PropietatTipusPredeterminatDescripció
--pantoken-badge-accent<color>—La farcitura del xip; cada variant -color-* i l'anell pulsant en prenen el color.
--pantoken-badge-text<color>—El color del text, emparellat amb l'accent perquè sigui llegible.

Animacions ​

AnimacióDescripció
pantoken-badge-pulseL'animació de l'anell pulsant.

Tokens consumits ​

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

Relacionat ​

  • pill — L'equivalent en línia d'etiqueta-xip.