Widget Icône
AperçuLien direct vers Aperçu
Le widget Icône est un composant visuel qui affiche des icônes vectorielles évolutives sur votre interface. Il prend en charge une grande variété de bibliothèques d'icônes et offre des options de style flexibles, notamment la personnalisation des couleurs, l'ajustement de la taille et les contrôles d'alignement.
Propriétés du WidgetLien direct vers Propriétés du Widget
Configuration de BaseLien direct vers Configuration de Base
| Propriété | Type | Description | Défaut |
|---|---|---|---|
| Name | String | Nom d'affichage du widget | - |
| Variable/Model | String | Nom de variable pour lier le widget à votre modèle de données | - |
Configuration de l'IcôneLien direct vers Configuration de l'Icône
| Propriété | Type | Description | Options |
|---|---|---|---|
| Icon | String | Nom de classe d'icône des bibliothèques d'icônes prises en charge | Font Awesome, Material Icons, etc. |
| Color | Color | Couleur de l'icône à l'aide du sélecteur de couleurs | Toute couleur CSS valide |
| Size (px) | Number | Taille de l'icône en pixels | Tout nombre positif |
| Alignment | String | Alignement horizontal de l'icône | left, center, right |
Exemples d'UtilisationLien direct vers Exemples d'Utilisation
Affichage d'Icône de BaseLien direct vers Affichage d'Icône de Base
Indicateur de StatutLien direct vers Indicateur de Statut
Icône de NavigationLien direct vers Icône de Navigation
Validation et VisibilitéLien direct vers Validation et Visibilité
Validation par ÉcranLien direct vers Validation par Écran
Configurez la visibilité et la disponibilité sur différents écrans :
| Règle de Validation | Description |
|---|---|
| Available | Si le widget est disponible sur l'écran |
| Visible | Contrôle la visibilité du widget (peut utiliser des conditions) |
| Required | Non applicable pour les widgets d'icône |
| Disable | Non applicable pour les widgets d'icône |
Conditions AvancéesLien direct vers Conditions Avancées
Utilisez des expressions JavaScript pour une visibilité dynamique :
Options de StyleLien direct vers Options de Style
Classes PersonnaliséesLien direct vers Classes Personnalisées
- Ajoutez des classes CSS personnalisées via le champ Class
- Utilisez des classes dynamiques pour un style conditionnel basé sur les données
Design ResponsiveLien direct vers Design Responsive
- Les icônes se mettent à l'échelle de manière appropriée sur différentes tailles d'écran
- Utilisez des unités relatives dans le CSS personnalisé pour une meilleure réactivité
Schémas de CouleursLien direct vers Schémas de Couleurs
- Prise en charge des schémas de couleurs basés sur des thèmes
- Peut être intégré avec des variables de couleur globales
Bonnes PratiquesLien direct vers Bonnes Pratiques
PerformanceLien direct vers Performance
- Sélection d'Icônes : Choisissez des tailles d'icônes appropriées pour maintenir les performances
- Utilisation des Couleurs : Utilisez des variables CSS pour une thématisation cohérente
- Mise en Cache : Les polices d'icônes sont mises en cache par les navigateurs pour de meilleures performances
AccessibilitéLien direct vers Accessibilité
- Texte Alternatif : Bien que les icônes n'aient pas de texte alternatif, assurez-vous que le contexte environnant est clair
- Contraste de Couleur : Maintenez des rapports de contraste suffisants pour la visibilité
- Directives de Taille : Utilisez un minimum de 16px pour les icônes interactives importantes
Cohérence du DesignLien direct vers Cohérence du Design
- Famille d'Icônes : Utilisez des icônes de la même bibliothèque pour la cohérence
- Standards de Taille : Établissez des directives de taille (par exemple, 16px, 20px, 24px)
- Palette de Couleurs : Limitez les variations de couleur pour maintenir la hiérarchie visuelle
Considérations ResponsiveLien direct vers Considérations Responsive
- Évolutivité : Testez les icônes à différentes tailles et résolutions
- Cibles Tactiles : Assurez un espacement adéquat pour les interfaces mobiles
- États de Chargement : Envisagez des états de placeholder ou de chargement pour les icônes dynamiques
DépannageLien direct vers Dépannage
Problèmes CourantsLien direct vers Problèmes Courants
L'Icône ne s'Affiche Pas :
- Vérifiez que le nom de classe de l'icône est correct
- Vérifiez si la bibliothèque d'icônes est chargée
- Assurez-vous que les fichiers de police d'icônes sont accessibles
La Taille ne s'Applique Pas :
- Vérifiez les conflits CSS
- Vérifiez l'héritage de la propriété font-size
- Utilisez les outils de développement du navigateur pour inspecter les styles
La Couleur ne Change Pas :
- Assurez-vous que la propriété de couleur est correctement formatée
- Vérifiez les problèmes de spécificité CSS
- Vérifiez que la valeur de couleur est valide
Problèmes d'Alignement :
- Examinez les styles du conteneur
- Vérifiez les règles CSS conflictuelles
- Assurez-vous de l'héritage approprié de text-align
Conseils de DébogageLien direct vers Conseils de Débogage
- Utilisez les outils de développement du navigateur pour inspecter les éléments d'icône
- Vérifiez l'application des classes CSS
- Vérifiez la console pour toute erreur de chargement de police
- Testez d'abord avec des classes d'icônes simples et connues pour fonctionner