Icon Picker

Die Icon Picker-Komponente ermöglicht es Benutzern, ein Symbol aus einer vorgegebenen Liste auszuwählen.

Übersicht

Der Icon Picker bietet eine benutzerfreundliche Oberfläche zum Auswählen von Symbolen. Anstatt einen Symbolnamen einzugeben (wie utility:add), können Benutzer visuell durch eine kategorisierte Liste blättern und auswählen. Die Komponente speichert dann den ausgewählten Symbolnamen als ihren Wert, den Sie in anderen Komponenten (wie der iconName Eigenschaft eines Buttons) oder in Formeln verwenden können.

Konfiguration des Icon Pickers

Wählen Sie die Icon Picker-Komponente auf der Arbeitsfläche aus, um auf ihre Eigenschaften im Eigenschaftenbereich zuzugreifen.

Grundlegende Eigenschaften

Diese Eigenschaften steuern die grundlegenden Daten und die Beschriftung des Icon Pickers.

API-Name: (Text) Ein einzigartiger Bezeichner für diese Komponenteninstanz (z. B. StatusIconPicker).
Bezeichnung: (Text) Das oberhalb oder neben dem Eingabefeld des Icon Pickers angezeigte Textlabel. Beispiel: "Wähle ein Symbol:", "Statussymbol auswählen:".
Wert: (Text - Von entscheidender Bedeutung) Diese Eigenschaft enthält den Namen des aktuell ausgewählten Symbols (z. B. utility:add, standard:account).
- Datenbindung: Sie sollten binden diese Eigenschaft an eine Text Variable Ressource. Diese Variable speichert den ausgewählten Symbolnamen. Sie können diese Variable dann verwenden, um die Symbolname Eigenschaft von anderen Komponenten (wie Buttons, Metriken usw.) festzulegen.
Feldniveau-Hilfe: (Text, optional) Hilfetext, der neben dem Label angezeigt wird.
Platzhalter: (Text) Platzhaltertext, der im Eingabefeld des Icon Pickers angezeigt wird bevor wenn der Benutzer eine Auswahl trifft. Beispiel: "Nach einem Symbol suchen..."

Aussehens-Eigenschaften

Diese Eigenschaften steuern die visuelle Darstellung des Icon Pickers selbst (nicht der darin enthaltenen Symbole).

Variante: (Text - Auswahl aus Optionen) Steuert den visuellen Stil und die Positionierung des Labels:
- standard: Beschriftung über dem Eingabefeld.
- label-inline: Beschriftung links vom Eingabefeld.
- label-stacked: Beschriftung über dem Eingabefeld (kann eine andere Stilgebung haben als standard).
- label-hidden: Beschriftung ausblenden.
Menülabel: (Text) Passen Sie die Beschriftung des angezeigten Menüs an.
Menüsymbolgröße: (Text - Aus Optionen auswählen) Steuert die Größe der Symbole im Dropdown-Menü: x-klein, klein, mittel, groß, sehr groß.
Menüvariante: (Text - Aus Optionen auswählen) Steuert den visuellen Stil des Menüs.

Verhaltens-Eigenschaften

Diese Eigenschaften steuern, wie der Benutzer mit dem Icon Picker interagiert.

Fußzeile ausblenden: (Boolean - Kontrollkästchen) Wenn aktiviert, werden die Schaltflächen "Abbrechen" und "Fertig" im Dropdown-Menü ausgeblendet. Wenn ausgeblendet, erfolgt die Auswahl sofort, wenn auf ein Symbol geklickt wird.
Eingabetext ausblenden: (Boolean - Kontrollkästchen) Wenn aktiviert, wird das Texteingabefeld (in dem der Benutzer zum Suchen tippen kann) ausgeblendet. Der Icon Picker erscheint dann als Schaltfläche, die das Auswahlmenü für Symbole öffnet. Verwenden Sie dies, wenn Sie Benutzer zum Durchsuchen anstatt zum Suchen zwingen möchten.
Deaktiviert: (Boolean - Kontrollkästchen) Deaktiviert den Icon Picker vollständig.
Schreibgeschützt: (Boolean - Kontrollkästchen) Ermöglicht dem Benutzer, die Bewertung sehen, das ausgewählte Symbol anzuzeigen, aber nicht zu ändern.
Erforderlich: (Boolean - Kontrollkästchen) Macht die Symbolauswahl obligatorisch.
Sichtbar: (Boolean) Steuert, ob die Icon Picker-Komponente auf der Seite sichtbar ist.

Filteroptionen (Erweitert)

Ausgeblendete Kategorien: (Text - durch Kommas getrennt) Bestimmte Kategorien ausblenden

Beispiel: Dynamische Einstellung eines Symbols in einer Kopfzeile

Dieses Beispiel zeigt, wie man einen Icon Picker verwendet, damit der Benutzer das in einer Avonni Header-Komponente angezeigte Symbol dynamisch ändern kann.

Fügen Sie die Icon Picker-Komponente hinzu
1. API-Name: MyIconPicker
2. Bezeichnung: "Schaltflächensymbol auswählen:"
3. Wert: Binden Sie dies an {!selectedIcon}.
Fügen Sie die Header-Komponente hinzu
1. Ordnen Sie den Icon-Namen-Wert dem Wert zu, der vom Icon Picker-Element > Wert kommt.

Wichtige Überlegungen

Datenbindung: Das Wert Eigenschaft ist der Schlüssel. Binden Sie sie an eine Variable, um den ausgewählten Symbolnamen zu speichern.
Icon-Bibliotheken: Achten Sie darauf, welche Icon-Bibliotheken verfügbar sind (SLDS, Avonni eigene Symbole). Der Icon Picker zeigt nur Symbole an, die im Avonni-Paket enthalten sind.
Barrierefreiheit: Bieten Sie eine beschreibende Beschriftung und ziehen Sie in Erwägung, Feldhilfetext zu verwenden, um Benutzer zu leiten.
Dynamische Aktualisierungen: Verwenden Sie die Wert Eigenschaft mit Formeln und anderen Interaktionen, um basierend auf dem ausgewählten Symbol dynamisches Verhalten zu erstellen.

Der Icon Picker ist eine benutzerfreundliche Möglichkeit, Symbole auszuwählen. Die Komponente unterstützt SLDS-Symbole.

Zuletzt aktualisiert vor 6 Monaten

War das hilfreich?