Illustration

Le composant Illustration vous permet d’afficher des illustrations préconçues dans vos composants dynamiques Avonni.

Aperçu

Le composant Illustration est un élément visuel. Il est principalement utilisé pour améliorer l'interface utilisateur et communiquer des informations de manière visuellement attrayante. Avonni fournit une bibliothèque d'illustrations intégrées parmi lesquelles vous pouvez choisir.

Cas d'utilisation

• États vides : Affichez une illustration lorsqu'une table de données ou une liste n'a aucune donnée à afficher (par exemple, une illustration d'une boîte de réception vide avec le texte "Aucun message pour le moment").

• Messages de réussite/confirmation : Affichez une illustration pour confirmer une action réussie (par exemple, une illustration d'une coche après l'enregistrement d'un enregistrement).

• Messages d'erreur/avertissement : Utilisez une illustration pour représenter visuellement une erreur ou une condition d'avertissement.

• Interruptions visuelles : Ajoutez de l'intérêt visuel et séparez de gros blocs de texte ou de données.

• Image de marque : Utilisez des illustrations qui s'alignent sur le style visuel de votre marque.

• Page introuvable

Configuration de votre Illustration

Propriétés

par le véritable

Un identifiant unique pour le composant au sein de votre Composant Dynamique.

Titre

Le texte principal du titre affiché dans le cadre de l'illustration. Ceci peut être un texte statique ou lié à une valeur dynamique (Variable, Formule, Attribut du composant).

Contenu

Texte supplémentaire affiché sous le titre, généralement utilisé pour une description ou un message. Ceci peut également être statique ou dynamique.

Variante

Sélectionne l'illustration spécifique à afficher. Avonni propose un ensemble d'illustrations préconçues, chacune avec un nom unique (par exemple, "desert", "empty", "no_access", etc.). Reportez-vous à la documentation Avonni pour une liste complète des variantes disponibles et leurs images correspondantes. Les options disponibles sont pas texte libre ; vous devez choisir parmi la liste fournie.

Taille

Contrôle la taille de l'illustration. Les options courantes incluent :

• Petit

• Moyen

• Grand

• (D'autres options de taille peuvent être disponibles, selon la version d'Avonni).

Visible

Il contrôle la visibilité et prend en charge l'affichage et la fermeture dynamiques.

: La valeur maximale.

Exemple 1 : Illustration pour état vide

1. Ajoutez un composant Illustration à votre canevas.

2. Min/Max : Variante sur "Aucun contenu" (ou une variante similaire appropriée pour un état vide).

3. Min/Max : Titre sur "Aucun enregistrement trouvé".

4. Min/Max : Contenu sur "Il n'y a aucun enregistrement à afficher pour le moment."

5. Définissez la taille sur moyen.

6. Configurez le Visible propriété du composant Illustration pour qu'elle soit contrôlée dynamiquement (par exemple, afficher l'illustration uniquement si une table de données n'a aucune ligne).

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

• Sélection de la variante : Choisissez un Variante qui convient au message que vous souhaitez transmettre. Reportez-vous à la documentation Avonni pour des exemples visuels de chaque variante.

• Titre et contenu : Utilisez la propriété Titre et Contenu propriétés pour fournir des messages clairs et concis à l'utilisateur.

• Texte dynamique : Vous pouvez utiliser des Variables, des Formules et des Attributs de composant pour rendre le Titre et Contenu dynamique.

• Accessibilité : Tenez compte des utilisateurs malvoyants. Bien que les illustrations puissent être utiles, assurez-vous que l'information essentielle est également transmise par du texte (par exemple, en utilisant les Titre et Contenu propriétés de manière efficace).

• Taille : Choisissez une taille appropriée pour l'illustration en fonction de son contexte et des composants environnants.

En résumé

Le composant Illustration vous permet d'ajouter une image pour améliorer les visuels de votre Composant Dynamique. Les cas d'utilisation pour les composants d'illustration comprennent l'affichage d'un état vide, d'un message de réussite ou d'une information d'élément introuvable.