Badge
Die Badge-Komponente ermöglicht es Ihnen, farbenfrohe, auffällige Etiketten zu Ihrer Benutzeroberfläche hinzuzufügen.
Die Badge-Komponente ist dafür gedacht, ein einzelnes Element oder Informationsstück anzuzeigen. Wenn Sie mehrere Elemente als Badges anzeigen müssen, sollten Sie stattdessen die Chip-Container Komponente verwenden.
Übersicht
Die Avonni-Badge-Komponente fügt farbenfrohe, auffällige Etiketten hinzu, um Informationen in Ihren Salesforce Dynamic Components hervorzuheben. Sie ist für einzelne Elemente ausgelegt — verwenden Sie den Chip-Container für mehrere Badges.
Hauptmerkmale umfassen:
Prägnante Etiketten: Zeigt kurzen Text, Zahlen oder Ausdrücke an.
Stilvarianten: Farbkodierte Optionen für verschiedene Bedeutungen (z. B. Erfolg, Warnung).
Optionales Avatar: Fügen Sie Symbole, Bilder oder Initialen für Kontext hinzu.
Aufmerksamkeitsstark: Verbessert die Klarheit der UI und die optische Anziehungskraft.
Tipp: Kombinieren Sie mit Listen oder Karten, um Elemente dynamisch zu kennzeichnen.
Anwendungsfälle
Anzeige neuer Elemente: Markieren Sie neue Produkte, Funktionen oder Inhalte (z. B. „Neu“).
Benachrichtigungszahlen: Zeigen Sie ungelesene Nachrichten oder Warnungen an (z. B. „5+“).
Produktetiketten: Kategorisieren Sie Elemente wie „Sale“, „Bestseller“ oder „Neuankunft“.
Benutzerstatus: Zeigen Sie Rollen oder Zustände an (z. B. „Online“, „Admin“).
Statusmarkierungen: Geben Sie Prozessphasen an (z. B. „Genehmigt“, „Ausstehend“).
Konfiguration
Wählen Sie das Badge auf der Arbeitsfläche aus, um Eigenschaften im rechten Eigenschaften-Bedienfeld zu öffnen.
Grundlegende Eigenschaften
Diese betreffen Kerntext und Identifikation.
API-Namen
Text
Eindeutiger Bezeichner für die Instanz (angenommener Standard für Avonni-Komponenten).
StatusBadge
Beschriftung
Text/Bindung
Text im Badge; kurz halten — für Dynamik binden.
„Dringend“ oder {!notificationCount}
Beste Praxis: Verwenden Sie klare, kurze Beschriftungen; binden Sie an Variablen für Echtzeit‑Updates (z. B. Zähler aus Abfragen).
Aussehen & Variante
Diese steuern den visuellen Stil.
Variante
Wählen Sie
Stil und Farbe: Richten Sie sich nach der Absicht (z. B. Erfolg für Positives, Fehler für Probleme).
success (grün), warning (gelb), error (rot), info (blau/grau) und mehr.
Tipp: Vorschau der Varianten im Eigenschaften-Bedienfeld, um sie Ihrem Thema anzupassen.
Avatar (optional)
Fügen Sie ein visuelles Element für Kontext hinzu.
Quelle
Text/URL/Bindung
Bild-URL, Initialen oder Icon-Name; priorisieren Sie eines.
URL: "https://example.com/pic.jpg", Initialen: „JD“, Icon: standard:user.
Größe
Wählen Sie
Avatar-Abmessungen.
x-small, small, medium.
Form
Wählen Sie
Form: Kreis oder Quadrat.
Kreis.
Beste Praxis
Verwenden Sie Avatare, wenn Sie auf Benutzer/Objekte verlinken; wählen Sie ein Icon als Fallback, wenn kein Bild/keine Initialen vorhanden sind. Passen Sie Avatar-Styling oder Look & Feel an, indem Sie Eigenschaften im Stil-Bedienfeld (z. B. Rahmen, Schatten, Farben).
Beispiele
Beispiel 1: Einfaches Status-Badge
Eigenschaften konfigurieren:
Beschriftung: „Genehmigt“
Variante: success
Ergebnis: Ein grünes Badge, das einen positiven Status hervorhebt, z. B. bei einem Datensatz.
Beispiel 2: Benachrichtigungszähler mit Avatar
Variable erstellen: Fügen Sie eine Nummernvariable unreadCount hinzu.
Eigenschaften konfigurieren:
Beschriftung: {!unreadCount}
Variante: warning
Avatar-Quelle: Icon standard:scan_card (oder Bild-URL binden)
Avatar-Größe: small
Avatar-Form: circle
Ergebnis: Dynamisches gelbes Badge, das Zähler mit Icon anzeigt und über die Variable aktualisiert wird.
Beispiel 3: Badge für Benutzerrolle
Eigenschaften konfigurieren:
Beschriftung: „Admin“
Variante: info
Avatar-Quelle: Initialen „AD“
Avatar-Form: square
Ergebnis: Blaues Badge mit Initialen zur Rollenkennzeichnung in Profilen.
Warum die Badge-Komponente verwenden?
Wichtige Informationen hervorheben: Lenken Sie die Aufmerksamkeit auf Aktualisierungen oder Details.
Visuell kategorisieren: Gruppieren Sie Elemente nach Attributen oder Status.
Status anzeigen: Vermitteln Sie Fortschritt/Zustände klar (z. B. „Abgeschlossen“).
UI-Attraktivität steigern: Fügen Sie Farbe und Klarheit für bessere Interaktion hinzu.
Wesentliche Überlegungen
Einzeln vs. mehrfach: Beschränken Sie sich auf ein Element pro Badge; verwenden Sie Chip-Container für Listen.
Beschriftungs-Best Practices: Halten Sie sie kurz, klar und zweckmäßig, um Verwirrung zu vermeiden.
Varianten-Auswahl: Passen Sie Farben der Semantik an (z. B. Rot für Fehler) für eine intuitive UX.
Avatar-Verwendung: Fügen Sie nur hinzu, wenn relevant; stellen Sie sicher, dass Quellen zugänglich sind (z. B. gültige URLs).
Dynamische Bindung: Binden Sie Beschriftung/Avatar für kontextbewusste Badges (z. B. aus Datensätzen).
Barrierefreiheit: Verwenden Sie kontrastreiche Farben; geben Sie wenn möglich Alternativtext für Avatare an.
Fehlerbehebung bei häufigen Problemen
Badge nicht sichtbar: Überprüfen Sie die Variante auf versteckte Stile; stellen Sie sicher, dass die Beschriftung nicht leer ist.
Avatar lädt nicht: Überprüfen Sie die Quelle (URL/Icon-Name); testen Sie Bindungen mit statischen Werten.
Zu lange Beschriftung: Kürzen Sie den Text — Badges kürzen; verwenden Sie bei Bedarf Auslassungen über benutzerdefiniertes Styling.
Farbkonflikte: Vorschau in verschiedenen Themen; passen Sie die Variante für bessere Lesbarkeit an.
Keine Dynamik: Bestätigen Sie Bindungen zu Variablen/Formeln; debuggen Sie im Vorschaumodus.
Zusammenfassung
Die Avonni-Badge-Komponente erstellt lebendige Etiketten, um Informationen zu betonen und UIs in Salesforce zu verbessern. Mit Varianten und Avataren ist sie vielseitig für Status, Benachrichtigungen und mehr einsetzbar. Für verwandte Komponenten siehe Avonni Chip Container oder den Icon-Leitfaden.
Zuletzt aktualisiert
War das hilfreich?