Sélecteur d’icône

Le composant Sélecteur d’icône permet aux utilisateurs de choisir une icône parmi une liste prédéfinie.

Aperçu

Le sélecteur d'icônes fournit une interface conviviale pour sélectionner des icônes. Au lieu de taper un nom d'icône (comme utility:add), les utilisateurs peuvent parcourir visuellement et choisir à partir d'une liste catégorisée. Le composant stocke ensuite le nom d'icône sélectionné comme sa valeur, que vous pouvez utiliser dans d'autres composants (comme la iconName propriété d'un bouton) ou des formules.

---

Configuration du sélecteur d'icônes

Sélectionnez le composant Icon Picker sur la zone de conception pour accéder à ses propriétés dans le panneau Propriétés.

Propriétés de base

Ces propriétés contrôlent les données fondamentales et l'étiquetage du sélecteur d'icônes.

• Nom API : (Texte) Un identifiant identifiant pour cette instance de composant (par ex., StatusIconPicker).

• Étiquette : (Texte) Le libellé affiché au-dessus ou à côté du champ de saisie du sélecteur d'icônes. Exemple : "Sélectionnez une icône :", "Choisir l'icône de statut :".

• Valeur : (Texte - Crucialement important) Cette propriété contient le nom de l'icône actuellement sélectionnée (par ex., utility:add, standard:account).

  • Liaison de données : Vous devriez lier lier cette propriété à une Texte Ressource variable. Cette variable stockera le nom de l'icône sélectionnée. Vous pouvez ensuite utiliser cette variable pour définir la Nom de l'icône propriété de autres composants (comme les boutons, métriques, etc.).

• Aide au niveau du champ : (Texte, Optionnel) Texte d'aide affiché à côté du libellé.

• Espace réservé : (Texte) Texte d'espace réservé affiché dans le champ de saisie du sélecteur d'icônes avant lorsque l'utilisateur effectue une sélection. Exemple : "Rechercher une icône..."

Propriétés d'apparence

Ces propriétés contrôlent la présentation visuelle du sélecteur d'icônes lui-même (pas les icônes à l'intérieur).

• Variante : (Texte - Sélectionnez parmi les options) Contrôle le style visuel et le positionnement du libellé:

  • standard : Étiquette au-dessus du champ de saisie.

  • label-inline : Étiquette à gauche du champ de saisie.

  • label-stacked : Étiquette au-dessus du champ de saisie (peut avoir un style différent de standard).

  • label-hidden : Masquer le libellé.

• Libellé du menu : (Texte) Personnalisez le libellé du menu affiché.

• Taille des icônes du menu : (Texte - Sélection parmi les options) Contrôle la taille des icônes à l'intérieur du menu déroulant: x-small, petit, moyen, grand, très grand.

• Variante du menu : (Texte - Sélection parmi les options) Contrôle le style visuel du menu.

Propriétés de comportement

Ces propriétés contrôlent la façon dont l'utilisateur interagit avec le sélecteur d'icônes.

• Masquer le pied de page : (Booléen - Case à cocher) Si activé, masque les boutons "Annuler" et "Terminé" dans le menu déroulant. Si masqués, la sélection se fait immédiatement lorsqu'une icône est cliquée.

• Masquer le texte d'entrée : (Booléen - Case à cocher) Si activé, le champ de saisie de texte (où l'utilisateur peut taper pour rechercher) est masqué. Le sélecteur d'icônes apparaîtra comme un bouton qui ouvre le menu de sélection d'icônes. Utilisez ceci si vous voulez obliger les utilisateurs à parcourir plutôt qu'à rechercher.

• Désactivé : (Booléen - Case à cocher) Désactive complètement le sélecteur d'icônes.

• Lecture seule : (Booléen - Case à cocher) Permet à l'utilisateur de voir l'icône sélectionnée, mais pas de la modifier.

• Requis : (Booléen - Case à cocher) Rend la sélection d'icône obligatoire.

• Visible : (Booléen) Contrôle si le composant sélecteur d'icônes est visible sur la page.

Options de filtrage (Avancées)

• Catégories masquées : (Texte - Séparées par des virgules) Masquer des catégories spécifiques

---

Exemple : Définir dynamiquement l'icône d'un en-tête

Cet exemple montre comment utiliser un sélecteur d'icônes pour permettre à l'utilisateur de changer dynamiquement l'icône affichée sur un composant Avonni Header.

1. Ajoutez le composant sélecteur d'icônes

   1. Nom API : MyIconPicker

   2. Étiquette : "Sélectionner l'icône du bouton :"

   3. Valeur : Liez ceci à {!selectedIcon}.

2. Ajoutez le composant En-tête

   1. Mappez la valeur du nom de l'icône à la valeur provenant de l'élément Icon Picker > valeur.

Résultat final

Processus de liaison de données

---

variable sera mise à jour, et vous pourrez utiliser ces valeurs pour filtrer un Data Table.

• liaison de données : Le propriété la propriété est clé. Liez-la à une variable pour stocker le nom de l'icône sélectionnée.

• Bibliothèques d'icônes : Sachez quelles bibliothèques d'icônes sont disponibles (SLDS, icônes personnalisées Avonni). Le sélecteur d'icônes n'affichera que les icônes incluses dans le package Avonni.

• Accessibilité : Fournissez un Étiquette descriptif et envisagez d'utiliser Aide au niveau du champ pour guider les utilisateurs.

• Mises à jour dynamiques : Utilisez la propriété propriété avec Formules et d'autres interactions pour créer un comportement dynamique basé sur l'icône sélectionnée.

Le sélecteur d'icônes est un moyen convivial de choisir des icônes. Le composant prend en charge les icônes SLDS.