Style

Les composants dynamiques Avonni offrent de larges options de style, vous permettant de personnaliser l'apparence de vos composants pour correspondre à votre marque et créer une expérience utilisateur soignée. Le Panneau de style est votre centre principal pour gérer ces styles.

Aperçu

Chaque composant Avonni possède un ensemble de styles par défaut définissant son apparence de base. Vous pouvez personnaliser ces styles de deux façons :

Style spécifique au composant (sélecteur de style par défaut) : Modifiez les styles d'un seul et spécifique exemplaire de composant. Ces changements n’ affecteront
que ce composant. Styles personnalisés réutilisables : Créez des sélecteurs de style personnalisés nommés qui définissent un ensemble d'attributs de style. Vous pouvez ensuite appliquer

Emplacement du Panneau de style

L'onglet Style

L'onglet Style se trouve à droite du Générateur de composants lorsque vous sélectionnez un composant Avonni. Il contient : Attributs de style :
Une liste d'attributs que vous pouvez personnaliser pour modifier l'apparence du composant (par exemple : couleurs, polices, espacements). Sélecteur de style :

Style spécifique au composant (Style par défaut) Lors de l'ajout d'un composant au canevas, il utilise le style "Par défaut". Si vous modifiez des attributs de style (par exemple : couleur, taille de police, padding)tandis que le style "Par défaut" est sélectionné n’ , ces modifications affecteront cet exemplaire spécifique

du composant.

Exemple
Vous ajoutez un composant Bouton.
Vous sélectionnez le composant Bouton.
Vous voyez que "Par défaut" est sélectionné dans le Panneau de style.
Vous changez la couleur de fond du Bouton en rouge dans le Panneau des propriétés. Seul ce Bouton spécifique

aura un fond rouge. Les autres composants Bouton conserveront leur apparence par défaut.

Ceci est utile pour des personnalisations ponctuelles.

Création et utilisation de styles personnalisés réutilisables

Pour créer des styles réutilisables que vous pouvez appliquer à plusieurs composants : Sélectionnez un composant : Sélectionnez n'importe quel
composant sur le canevas. Peu importe quel composant vous sélectionnez initialement. Ouvrez le Panneau de style :
Allez dans le Panneau de style.
1. Pour créer un nouveau style Allez au Sélecteur de style :
2. Ceci se trouve dans l'onglet Style du Générateur de composants. Nommez votre style :
3. Donnez-lui un nom clair qui décrit son objectif (par exemple : RedMetric, PrimaryButton). Créez le style : Cliquez sur le + Créer "[styleName]"
bouton pour générer la classe CSS personnalisée.
- Personnalisez les attributs de style Avec votre nouveau style personnalisé sélectionné (mis en évidence) dans le Panneau de style, utilisez le Panneau des propriétés pour modifier les attributs de style ducomposant actuellement sélectionné
- . Par exemple, vous pouvez changer la couleur de fond, la taille de la police, la bordure, le padding, etc. Important : Les modifications que vous effectuez ici sont enregistrées dans lestyle personnalisé
, pas seulement sur le composant individuel que vous avez initialement sélectionné.
- Appliquer le style à d'autres composants Sélectionnez un autre composant sur le canevas (du même type
- que le composant que vous avez utilisé pour créer le style – vous pouvez appliquer un style de Bouton à un autre Bouton, mais pas à un tableau de données).
- Dans le Panneau de style, vous verrez votre style personnalisé répertorié.
- Cliquez sur l'attribut Style dans le Panneau des propriétés
Sélectionnez votre style personnalisé pour l'appliquer au composant sélectionné.
- Voir les styles appliqués

Vous pouvez également visualiser directement depuis le Panneau de style les composants qui utilisent des styles. Maintenant, tous Maintenant, les composants auxquels vous avez appliqué ce style personnalisé partageront la même apparence. Si vous modifiez ensuite le style personnalisé,

les composants utilisant ce style se mettront automatiquement à jour.

Exemple : style réutilisable "RedMetric"
Ajoutez un composant Metric à votre canevas.
Ouvrez le Panneau de style.
Cliquez sur le bouton "+" (ou "Nouveau style") pour créer un nouveau style. Nommez le style.
RedMetric Nommez le style Avec le style sélectionné
dans le Panneau de style, sélectionnez le composant Metric.
Changez la couleur de fond du composant Metric en rouge (en utilisant le Panneau des propriétés).
Ajoutez un autre composant Metric à votre canevas.
Cliquez sur ce composant, puis sélectionnez l'attribut Style. Nommez le style Sélectionnez votre

style personnalisé. Nommez le style Maintenant, les deux composants Metric auront un fond rouge. Si vous changez ensuite la couleur de fond définie dans le style (dans le Panneau de style), les deux

Considérations importantes

composants Metric se mettront à jour automatiquement. Portée du style : Actuellement, les styles personnalisés sont limités au composant dynamique individuel où ils sont créés. Ils ne sont pas partagés entre différents composants dynamiques.Cependant
, nous prévoyons d'introduire le partage de styles entre composants dans une prochaine version. Compatibilité par type de composant : Sélectionnez un autre composant sur le canevas (du Vous ne pouvez appliquer un style personnalisé qu'aux composants du même type que le composant que vous avez utilisé pour
créer le style. Vous ne pouvez pas appliquer un style de Bouton à un tableau de données. Surcharge des styles : Vous pouvez
surcharger un style personnalisé sur un composant spécifique en effectuant d'autres modifications tout en sélectionnant le style "Par défaut". Cela crée une surcharge spécifique au composant.
Suppression des styles : Vous pouvez supprimer des styles personnalisés dans le Panneau de style. Soyez prudent, car cela affectera tous les composants utilisant ce style.

Tutoriels

Comment ajouter de l’espace ou un saut entre des sections ou des champs ?

En résumé

Nommage des styles :

Mis à jour il y a 8 mois

Ce contenu vous a-t-il été utile ?

Bon après-midi