CSS: badge ​

.instui-badge — Ein kleiner Zähl- oder Statuspunkt, der über einer Ecke des Ziels platziert wird.

Um ein Badge über einem Ziel zu platzieren, beides in ein .instui-badge-wrapper (den Positionsanker) einwickeln und das Badge mit einem -placement-*-Modifier fixieren.

Source: badge.css

Verwendung ​

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

Demo ​

Beispiele ​

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

Struktur ​

Das Badge rendert inline von selbst oder innerhalb eines optionalen instui-badge-wrapper, der es über einem Ziel verankert.

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;

Modifikatoren ​

ModifikatorBeschreibung
.-color-dangerEine Aufmerksamkeit-/Fehleranzahl.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successEine positive/abgeschlossene Anzahl.
.-placement-bottom-endPosition in der unteren End-Ecke.
.-placement-bottom-startPosition in der unteren Start-Ecke.
.-placement-end-centerPosition zentriert an der Endkante.
.-placement-start-centerPosition zentriert an der Startkante.
.-placement-top-endPosition in der oberen End-Ecke.
.-placement-top-startPosition in der oberen Start-Ecke.
.-pulseEin pulsierender Aufmerksamkeitsring.
.-standaloneInline rendern, nicht über einer Ecke des Ziels positioniert.
.-type-notificationNur ein Punkt, keine Zählung.

Pseudo-Elemente ​

Pseudo-ElementBeschreibung
::beforeDer pulsierende Aufmerksamkeitsring, gezeichnet in der Akzentfarbe des Badges (die -pulse-Variante).

Benutzerdefinierte Eigenschaften ​

EigenschaftTypStandardBeschreibung
--pantoken-badge-accent<color>—Die Chip-Füllfarbe; jede -color-*-Variante und der Pulsring lesen sich daraus.
--pantoken-badge-text<color>—Die Textfarbe, auf den Akzent abgestimmt, damit sie lesbar bleibt.

Animationen ​

AnimationBeschreibung
pantoken-badge-pulseDie Animation des Pulsrings.

Verbrauchte Tokens ​

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

Verwandt ​

  • pill — Das inline Gegenstück zum Label-Chip.