Zum Inhaltsverzeichnis springen Badge <pc-badge> 0.1.0 experimental Badges werden verwendet, um Aufmerksamkeit zu erregen und Status oder Zählwerte anzuzeigen.
< pc-badge >Badge</ pc-badge >
Verwende das appearance‐Attribut, um das Erscheinungsbild des Badges festzulegen.
< pc-badge appearance = "primary" >Primär</ pc-badge > < pc-badge appearance = "success" >Erfolg</ pc-badge > < pc-badge appearance = "neutral" >Neutral</ pc-badge > < pc-badge appearance = "warning" >Warnung</ pc-badge > < pc-badge appearance = "danger" >Gefahr</ pc-badge >
Verwende das variant‐Attribut, um die Variante des Badges festzulegen.
< div style = "margin-block-end: var(--pc-spacing-m)" > < pc-badge appearance = "primary" variant = "accent" >Akzent</ pc-badge > < pc-badge appearance = "primary" variant = "filled outlined" >G + U</ pc-badge > < pc-badge appearance = "primary" variant = "filled" >Gefüllt</ pc-badge > < pc-badge appearance = "primary" variant = "outlined" >Umrandet</ pc-badge > < pc-badge appearance = "primary" variant = "plain" >Schlicht</ pc-badge > </ div > < div style = "margin-block-end: var(--pc-spacing-m)" > < pc-badge appearance = "success" variant = "accent" >Akzent</ pc-badge > < pc-badge appearance = "success" variant = "filled outlined" >G + U</ pc-badge > < pc-badge appearance = "success" variant = "filled" >Gefüllt</ pc-badge > < pc-badge appearance = "success" variant = "outlined" >Umrandet</ pc-badge > < pc-badge appearance = "success" variant = "plain" >Schlicht</ pc-badge > </ div > < div style = "margin-block-end: var(--pc-spacing-m)" > < pc-badge appearance = "neutral" variant = "accent" >Akzent</ pc-badge > < pc-badge appearance = "neutral" variant = "filled outlined" >G + U</ pc-badge > < pc-badge appearance = "neutral" variant = "filled" >Gefüllt</ pc-badge > < pc-badge appearance = "neutral" variant = "outlined" >Umrandet</ pc-badge > < pc-badge appearance = "neutral" variant = "plain" >Schlicht</ pc-badge > </ div > < div style = "margin-block-end: var(--pc-spacing-m)" > < pc-badge appearance = "warning" variant = "accent" >Akzent</ pc-badge > < pc-badge appearance = "warning" variant = "filled outlined" >G + U</ pc-badge > < pc-badge appearance = "warning" variant = "filled" >Gefüllt</ pc-badge > < pc-badge appearance = "warning" variant = "outlined" >Umrandet</ pc-badge > < pc-badge appearance = "warning" variant = "plain" >Schlicht</ pc-badge > </ div > < div > < pc-badge appearance = "danger" variant = "accent" >Akzent</ pc-badge > < pc-badge appearance = "danger" variant = "filled outlined" >G + U</ pc-badge > < pc-badge appearance = "danger" variant = "filled" >Gefüllt</ pc-badge > < pc-badge appearance = "danger" variant = "outlined" >Umrandet</ pc-badge > < pc-badge appearance = "danger" variant = "plain" >Schlicht</ pc-badge > </ div >
Verwende das rounded‐Attribut, um dem Badge eine abgerundete Rechteckform zu geben.
< pc-badge appearance = "primary" rounded >Primär</ pc-badge > < pc-badge appearance = "success" rounded >Erfolg</ pc-badge > < pc-badge appearance = "neutral" rounded >Neutral</ pc-badge > < pc-badge appearance = "warning" rounded >Warnung</ pc-badge > < pc-badge appearance = "danger" rounded >Gefahr</ pc-badge >
Verwende das pulse‐Attribut, um Aufmerksamkeit durch eine dezente Animation auf das Badge zu lenken.
< div class = "badge-pulse" > < pc-badge appearance = "primary" pulse >1</ pc-badge > < pc-badge appearance = "success" pulse >1</ pc-badge > < pc-badge appearance = "neutral" pulse >1</ pc-badge > < pc-badge appearance = "warning" pulse >1</ pc-badge > < pc-badge appearance = "danger" pulse >1</ pc-badge > </ div > < style > .badge-pulse pc-badge:not ( :last-of-type ) { margin-inline-end : var ( --pc-spacing-l ); } </ style > Name Beschreibung Reflektiert Standard appearanceThe badge’s appearance. Typ: "primary"
| "success"
| "neutral"
| "warning"
| "danger"
"primary"variantThe badge’s variant. Typ: "accent" | "filled" | "outlined"
"accent"roundedGives the badge a rounded rectangle shape. Typ: boolean
falsepulseMakes the badge pulsate to draw attention. Typ: boolean
falseupdateComplete
Ein schreibgeschütztes Promise, das erfüllt ist,
sobald die Komponente
fertig aktualisiert wurde.
‐
Erfahre mehr über Attribute und Eigenschaften .
Wenn du den Autoloader oder den Standard‐Loader nutzt,
kannst du diesen Abschnitt überspringen. Falls du
„Cherry Picking“ betreibst, kannst du die folgenden
Snippets verwenden, um diese Komponente zu importieren.
CDN (Skript‐Tag) CDN (Import) npm (Import)
Um diese Komponente manuell vom CDN zu importieren,
kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
< script type = "module" src = "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/badge/badge.js" ></ script >
Um diese Komponente manuell vom CDN zu importieren, kannst du
dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/badge/badge.js" ;
Um diese Komponente manuell von npm zu importieren, kannst du
dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "placer-toolkit/dist/components/badge/badge.js" ; Zum Hauptinhalt zurückspringen