Badge Abzeichen
Einführung
Die Badge-Komponente ist ein kleines, vielseitiges visuelles Element, das zur Kennzeichnung, Kategorisierung oder Hervorhebung von Inhaltsmetadaten verwendet wird. Sie wird üblicherweise verwendet, um Status (wie "Erfolg" oder "Ausstehend"), Tags oder numerische Zähler anzuzeigen.
Über das Page Builder CMS können Inhaltsautoren Badge-Varianten, Größen und Farbpaletten schnell konfigurieren, um sie perfekt an ihre Layout-Richtlinien anzupassen.
Verwendung
Sie können das Erscheinungsbild von Badges mit visuellen Stilen, benutzerdefinierten Farben und responsiven Größen anpassen.
Stil-Varianten
Die Komponente unterstützt mehrere visuelle Anzeigestile, die dabei helfen, eine visuelle Hierarchie aufzubauen.
{
"type": "badge",
"text": "New Feature",
"variant": "solid",
"colorPalette": "blue"
}
Farbpaletten
Wählen Sie aus einer breiten Palette von Theme-Akzentfarben, um semantische Bedeutungen anzuzeigen.
{
"type": "badge",
"text": "Error Detected",
"variant": "solid",
"colorPalette": "red"
}
Größenoptionen
Skalieren Sie Ihre Badges von kompakten Metadaten-Pills bis zu größeren Callout-Tags.
{
"type": "badge",
"text": "Large Label",
"size": "lg",
"colorPalette": "blue",
"variant": "subtle"
}
Eigenschaften
Beim Hinzufügen eines badge-Blocks innerhalb des Page Builder-Schemas (content/pages/*.json) sind folgende Konfigurationsparameter verfügbar:
| Parameter | Type | Default | Description |
|---|---|---|---|
type | String | - | Der Block-Bezeichner. Muss auf "badge" gesetzt werden. |
text | String | - | Der Textlabel-Inhalt, der innerhalb des Badges gerendert wird. |
variant | Select | "subtle" | Die visuelle Stilbehandlung. Optionen: "solid", "subtle", "surface", "outline". |
colorPalette | Select | "green" | Semantisches Theme-Farbakzent. Optionen: "blue", "green", "red", "purple", "orange", "amber", "cyan", "slate", "gray". |
size | Select | "md" | Die physischen Abmessungen des Badges. Optionen: "sm", "md", "lg", "xl", "2xl". |
class | String | - | Benutzerdefinierte CSS-Klassenüberschreibungen, die direkt auf das Badge angewendet werden. |