Activer/désactiver (Toggle)

Le composant Toggle fournit un moyen convivial de représenter un choix binaire (on/off, vrai/faux) dans vos composants dynamiques.

Aperçu

Le composant Toggle affiche un interrupteur que les utilisateurs peuvent glisser pour basculer entre deux états. Les principales fonctionnalités incluent :

• Indication visuelle claire: Fournit une indication visuelle immédiate de l'état actuel (activé ou désactivé).

• Étiquette personnalisable: Ajoutez une étiquette texte pour expliquer clairement l'objectif du toggle.

• liaison de données: L'état du toggle (coché ou non coché) est stocké dans une ressource de Variable Booléenne, ce qui facilite son utilisation dans la logique conditionnelle, les filtres et d'autres interactions.

• Messages personnalisables: Affichez des messages différents selon que le toggle est coché ou non coché.

• Options de style: Contrôlez la taille et la variante de l'étiquette.

---

Configuration du composant Toggle

Sélectionnez le composant Toggle sur la zone de travail pour accéder à ses propriétés dans le panneau Propriétés (panneau droit).

Propriétés de base

Ces propriétés contrôlent les données fondamentales et l'étiquetage du Toggle.

• par le véritable: (Texte) Un identifiant unique pour cette instance de composant (par ex. EnableFeatureToggle, ShowDetailsToggle).

• Étiquette: (Texte) L'étiquette texte affichée à côté de l'interrupteur toggle. Exemple : "Activer la fonctionnalité", "Afficher les détails", "Actif". Soyez clair et concis.

• Aide au niveau du champ: (Texte, Facultatif) Texte d'aide affiché à côté de l'étiquette, fournissant un contexte ou des instructions supplémentaires.

• propriété (Coché) : (Booléen - Crucialement important) Cette propriété contient l'état actuel du toggle :

  • true : Le toggle est coché (activé).

  • false : Le toggle n'est pas coché (désactivé).

  • Liaison de données : Vous devez lier cette propriété à une ressource de Variable Booléenne. Cette variable va :

    • Stocker la sélection de l'utilisateur.

    • Vous permettre d'utiliser l'état du toggle dans d'autres parties de votre composant.

    • Vous permettre de définir un état par défaut en initialisant la variable booléenne.

Propriétés d'apparence

Ces propriétés contrôlent la présentation visuelle du Toggle.

• Variante: (Texte - Sélectionnez parmi les options) Contrôle le style visuel et le positionnement de l'étiquette :

  • standard : L'étiquette est affichée au-dessus du toggle.

  • label-inline : L'étiquette est affichée à gauche du toggle.

  • label-stacked : L'étiquette est affichée au-dessus du toggle (similaire à standard).

  • label-hidden : L'étiquette est masquée. N'utilisez ceci que si l'objectif du toggle est clair dans le contexte.

• Taille: (Texte - Sélectionnez parmi les options) Sélectionnez une taille pour votre toggle.

• Masquer la marque: (Booléen - Case à cocher) Si activé, ce paramètre masque la marque visuelle (cocher) à l'intérieur du toggle. L'animation de glissement sera l'indicateur.

Propriétés de comportement

Ces paramètres affectent l'interaction utilisateur.

• Requis: (Booléen - Case à cocher) Si activé, l'utilisateur doit interagir avec le toggle. Ce paramètre n'est pas couramment utilisé.

• Lecture seule: (Booléen - Case à cocher) Si activé, l'utilisateur peut voir l'état du toggle, mais ne peut pas le modifier. Utile pour afficher un paramètre en lecture seule.

• Désactivé: (Booléen - Case à cocher) Si activé, le composant Toggle est complètement désactivé et ne peut pas être utilisé.

• Visible: (Booléen) Contrôle si le composant Toggle est visible sur la page. Liezz ceci à une Variable Booléenne ou à une Formule pour une visibilité dynamique.

Messages personnalisés (facultatif)

Ces propriétés vous permettent de personnaliser les messages.

• Message Toggle Actif: (Texte) Le message affiché lorsque le toggle est coché (activé).

• Message Toggle Inactif: (Texte) Le message affiché lorsque le toggle n'est pas coché (désactivé).

---

Exemple : Contrôler la visibilité d'un composant

Cet exemple illustre comment utiliser le composant Toggle pour afficher conditionnellement d'autres composants, améliorant l'expérience utilisateur en présentant l'information uniquement lorsque c'est nécessaire.

1. Ajouter un Toggle: Faites glisser un composant Toggle sur votre zone de travail.

   • Nom API : DetailsToggle

   • Étiquette : "Afficher les détails"

2. Ajouter un composant Détail d'enregistrement (ou tout autre composant) : Faites glisser un composant Texte (ou tout composant que vous souhaitez afficher conditionnellement) sur la zone de travail.

   • Valeur : (Définissez ceci sur le contenu que vous souhaitez afficher/masquer)

3. Définir la visibilité du composant Détail d'enregistrement

   • Sélectionnez le composant Détail d'enregistrement.

   • Dans le panneau Propriétés, trouvez la propriété Définir la visibilité du composant.

   • Liez la propriété cochée du Toggle à true.

Désormais, le composant Texte ne sera visible que lorsque le Toggle est activé (et que la "Coché" variable est vraie).

Considérations clés

• Étiquetage clair: Utilisez une étiquette claire et concise pour expliquer l'objectif du toggle.

• Considérez Lecture seule/Désactivé: Utilisez Lecture seule pour afficher un paramètre. Utilisez Désactivé pour indiquer que le toggle est temporairement indisponible.

• Cas d'utilisation: Envisagez d'utiliser un composant Toggle pour contrôler la visibilité d'un composant ou pour configurer une variable.