Ajouter des icônes pour indiquer les onglets principal et terminé

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.

Création d’un formulaire adaptatif

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.

Style de l’état par défaut

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

Style de l’état Principal

Assurez-vous que vous êtes à l’état Principal et appliquez un style aux propriétés CSS suivantes.

Mettez en forme l’image d’arrière-plan comme illustré dans la capture d’écran ci-dessous.

Enregistrez vos modifications.

Style de l’état visité

Assurez-vous que vous êtes à l’état visité et mettez en forme les propriétés suivantes

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.

Ressources Business.Adobe.com