Lorsque vous disposez d’un formulaire adaptatif avec une navigation par onglets gauche, vous pouvez afficher des icônes pour indiquer le statut de l’onglet. Par exemple, vous souhaitez afficher une icône pour indiquer un onglet principal et une icône pour indiquer l’onglet terminé comme illustré dans la capture d’écran ci-dessous.
Un formulaire adaptatif simple basé sur le modèle de base et le thème Canevas 3.0 a été utilisé pour créer l’exemple de formulaire.
Le icônes utilisées dans cet article peut être téléchargé ici.
Ouvrez le formulaire en mode d’édition Assurez-vous que vous vous trouvez dans le calque de style et sélectionnez n’importe quel onglet (onglet Général, par exemple).
Vous vous trouvez dans l’état par défaut lorsque vous ouvrez l’éditeur de style pour l’onglet, comme illustré dans la capture d’écran ci-dessous.
Définissez les propriétés CSS de l’état par défaut, comme illustré ci-dessous. | Catégorie | Nom de la propriété | Valeur de la propriété | |:—|:—|:—| | Dimensions et position | Largeur | 50 px | | Texte | Poids de police | Gras | | Texte | Couleur | #FFF | |Texte | Hauteur de ligne | 3 | |Texte | Alignement du texte | Left | |Arrière-plan| Couleur | #056dae |
Enregistrez vos modifications
Assurez-vous que vous êtes à l’état Principal et appliquez un style aux propriétés CSS suivantes.
Catégorie | Nom de la propriété | Valeur de la propriété |
---|---|---|
Dimensions et position | Largeur | 50px |
Texte | Épaisseur de la police | Gras |
Texte | Couleur | #FFF |
Texte | Hauteur de ligne | 3 |
Texte | Texte Aligner | Gauche |
Contexte | Couleur | #056dae |
Mettez en forme l’image d’arrière-plan comme illustré dans la capture d’écran ci-dessous.
Enregistrez vos modifications.
Assurez-vous que vous êtes à l’état visité et mettez en forme les propriétés suivantes
Catégorie | Nom de la propriété | Valeur de la propriété |
---|---|---|
Dimensions et position | Largeur | 50 px |
Texte | Épaisseur de la police | Gras |
Texte | Couleur | #FFF |
Texte | Hauteur de ligne | 3 |
Texte | Texte Aligner | Gauche |
Contexte | Couleur | #056dae |
Mettez en forme l’image d’arrière-plan comme illustré dans la capture d’écran ci-dessous.
Enregistrez vos modifications
Prévisualisez le formulaire et testez que les icônes fonctionnent comme prévu.