Cet article illustre l'utilisation du survol, du focus et d'autres états avec des propriétés de position dans Tailwind.
Comment utiliser le survol, la mise au point et d'autres états avec la propriété Position dans Tailwind ?
Le survol, le focus et d'autres états dans Tailwind sont utilisés pour styliser les éléments dans Tailwind présentant une interface attrayante et conviviale et une expérience engageante pour les utilisateurs. Parfois, la propriété du poste doit être appliquée pour maintenir l’expérience à ses normes les plus élevées.
Méthode 1 : utilisation de la variante de survol avec la propriété Position
La variante de survol est utilisée pour styliser les éléments sélectionnés lorsque l'utilisateur déplace le curseur sur cet élément sélectionné. Le ' position L'attribut ' peut être utilisé conjointement avec ' flotter » pour définir la position avant et après le survol. Cette paire est utilisée pour créer une expérience engageante pour l’utilisateur.
Étape 1 : ajouter la propriété Hover avec position en HTML
Dans le code ci-dessous, la propriété de survol est appliquée le long de la propriété de position sur « bouton ' élément:
< corps >
< bouton classe = 'survol relatif w-40 h-12 bg-blue-500 : survol absolu : translate-x-4 survol : translate-y-4 » >
< p classe = 'texte-centre de texte blanc' > Survolez-moi < / p >
< / bouton >
< / corps >
Dans ce code :
- Le ' relatif ' La classe définit le bouton par rapport à la page parent.
- ' w-40 ' définit la largeur à 40px.
- ' h-12 ' définit la hauteur à 12px.
- ' bg-bleu-500 ' définit la couleur d'arrière-plan sur bleu.
- ' survol : absolu » change la position relative du bouton en absolue lorsque le curseur de la souris se déplace dessus.
- ' survol : traduire-x-4 ' déplace le bouton de 4 pixels vers la droite sur l'axe x et en même temps de 4 pixels vers le bas de ' survol : traduire-y-4 ».
- Le texte est aligné au centre par « centre de texte ».
Étape 2 : Vérification
Prévisualisez la page Web créée par le code ci-dessus, qui ressemble à ceci :
La sortie montre que l’élément a été déplacé vers la droite et vers le bas de 4 pixels.
Méthode 2 : utilisation de la variante Focus avec la propriété Position
La variante focus est utilisée pour styliser les éléments HTML afin d'attirer l'attention de l'utilisateur et de mettre l'accent sur certains éléments. La position peut également être appliquée conjointement pour positionner l'objet de manière relative ou absolue par rapport à la page parent. Ceci est fait pour garder l’utilisateur engagé.
Étape 1 : ajouter la propriété Focus avec position en HTML
Créez un fichier HTML et appliquez la propriété focus avec une position appropriée. Par exemple, la position relative est appliquée à une zone de saisie dans le code ci-dessous :
< / corps >
Dans ce code :
- Réglez la position du « saisir ' éléments à ' relatif ».
- ' focus : traduire-x-4 ' déplace le bouton de 4 pixels vers la droite sur l'axe x et en même temps de 4 pixels vers le bas de ' focus : traduire-y-4 » lorsque l'utilisateur clique sur la zone de saisie.
- ' focus : contour-2 ' crée un contour autour de la zone de texte lorsque l'utilisateur clique dessus.
Étape 2 : vérifier la sortie
Prévisualisez la page Web créée par le code pour remarquer le changement :
La sortie ci-dessus montre que le style a été appliqué à l'élément sélectionné lorsqu'il est ciblé.
Utilisation d'une variante active avec la propriété Position.
La variante active est utilisée pour styliser les éléments HTML afin de définir l'état lorsque l'utilisateur clique et maintient un bouton ou un autre élément. La propriété position peut rendre la sortie plus attrayante pour les utilisateurs, créant ainsi une expérience plus dynamique.
Étape 1 : ajouter la propriété Hover avec position en HTML
Créez un fichier HTML et appliquez la variante active en conjonction avec la propriété position. Par exemple, ces propriétés sont appliquées à un bouton dans l'exemple de code ci-dessous :
< bouton classe = 'relatif w-48 h-12 bg-blue-500 actif: traduire-y-2 actif: bg-green-400' >
< portée classe = 'texte blanc' >Cliquez sur moi< / portée >
< / bouton >
< / corps >
Dans le code ci-dessus :
- Réglez la position du « bouton ' élément à ' relatif ».
- ' bg-bleu-500 ' définit la couleur d'arrière-plan du bouton sur bleu.
- ' actif : traduire-y-2 ' déplace le bouton de 2 px vers le bas et change la couleur du bouton en vert par ' actif : bg-green-400 ».
Étape 2 : vérifier la sortie
Prévisualisez la page Web créée par le code ci-dessus, puis cliquez et maintenez le bouton enfoncé pour voir le changement :
Le gif ci-dessus montre que le style de l'élément de bouton sélectionné est modifié lorsqu'il devient actif.
C'est tout pour appliquer le survol, le focus et d'autres états avec la propriété position dans Tailwind.
Conclusion
Les états de survol, de focus et d'autres états peuvent être utilisés avec la propriété position en utilisant les classes prédéfinies de survol, de focus et d'autres états, puis en appliquant des attributs de classe de position tels que « absolu ', ' relatif ' et ainsi de suite en conjonction. Ce blog a montré comment utiliser le survol, la mise au point et d'autres états avec l'utilitaire de position dans Tailwind.