Icon

Die Icon-Komponente ermöglicht das Anzeigen von Symbolen innerhalb Ihrer Avonni Dynamic Components. Sie unterstützt Standard-Salesforce Lightning Design System (SLDS)-Symbole und kann benutzerdefinierte Symbole enthalten, die von Avonni bereitgestellt werden. Symbole verbessern die visuelle Attraktivität und Benutzerfreundlichkeit Ihrer Komponenten.

Übersicht

Die Icon-Komponente ist ein einfaches visuelles Element. Sie wird verwendet, um:

• Aktionen oder Zustände visuell darzustellen.

• Visuelle Hinweise für die Navigation zu geben.

• Visuelles Interesse hinzuzufügen.

• Die Zugänglichkeit zu verbessern (mit geeignetem Alternativtext).

---

Eigenschaften

Die Icon-Komponente hat diese Eigenschaften im Eigenschaftenbereich:

• API-Name: Eine eindeutige Kennung für die Komponente.

• Icon-Name: (Text) Der Name des Symbols. Verwenden Sie:

  • SLDS-Symbole: Format: category:name (z. B. standard:account, utility:add). Verfügbare Symbole finden Sie in der Dokumentation des Salesforce Lightning Design System.

  • Avonni-Benutzerdefinierte Symbole: Siehe Avonni-Dokumentation für Namen.

  • Dynamischer Wert: Sie können eine Variable, Konstante oder Formel verwenden.

• Icon-Größe: (Text) Die Größe des Symbols. Optionen umfassen in der Regel:

  • x-klein

  • klein

  • mittel

  • groß

  • sehr groß

• Variante: (Text) Der Stil (Farbe) des Symbols. Funktioniert nur mit utility Symbolen. Optionen umfassen oft:

  • base

  • Konfigurieren Sie Aktionen, die ausgeführt werden, wenn der Flow auf einen

  • warning

  • success

  • inverse

• Titel: (Text) Alternativtext für das Symbol. Wichtig für die Barrierefreiheit! Dieser Text wird:

  • Von Screenreadern verwendet.

  • Als Tooltip beim Überfahren mit der Maus angezeigt (in den meisten Browsern). Beschreiben Sie den Zweck, nicht nur das Aussehen. Beispiel: "Neues Konto erstellen" statt "Pluszeichen".

• Sichtbar: (Boolean) Steuert die Sichtbarkeit, unterstützt dynamisches Anzeigen und Ausblenden.

---

Beispiele

Beispiel 1: Statisches Account-Symbol

• Symbolname: standard:account

• Icon-Größe: medium

• Variante: base

• Titel: Account-Symbol

Dies zeigt das standardmäßige Salesforce-Account-Symbol an.

Beispiel 2: Dynamisches Symbol (Formel)

• Icon-Name: myStatusIcon (Dies ist eine Formelressource)

• Icon-Größe: small

• Variante: inverse

• Titel: Opportunity-Status

Die Formelressource myStatusIcon könnte enthalten:

IF(OpportunityStageName = 'Closed Won', 'utility:check', IF(OpportunityStageName = 'Closed Lost', 'utility:close', 'utility:help' ) )

Dies ändert das Symbol basierend auf dem StageName einer Opportunity.

---

Wichtige Überlegungen

• Barrierefreiheit: Geben Sie IMMER einen aussagekräftigen Titel an.

• SLDS-Konformität: Die Verwendung von SLDS-Symbolen gewährleistet visuelle Konsistenz.

• Dynamische Symbole: Verwenden Sie Variablen/Formeln um Symbole basierend auf Daten zu ändern.

• Verfügbarkeit von Symbolen: Prüfen Sie die Dokumentation auf gültige Symbolnamen