Cet article fournira la procédure à suivre pour appliquer la propriété de hauteur minimale au survol, à la mise au point et à d'autres états dans Tailwind.
Note: Pour en savoir plus sur les classes de taille minimale dans Tailwind, lisez ceci article sur notre site Internet.
Comment appliquer la propriété Min-height au survol, à la mise au point et à d'autres états dans Tailwind ?
Tailwind fournit des variantes d'état par défaut qui peuvent être fournies avec les propriétés de conception. Ces variantes d'état incluent « survol », « focus » et « actif ». La description de ces variantes d'état est la suivante :
- Le' flotter ' L'état est déclenché chaque fois que le curseur de la souris survole un élément.
- Le ' se concentrer 'L'état est déclenché chaque fois que l'élément est au point.
- Le ' actif ' L'état est déclenché chaque fois que l'élément est activé ou cliqué.
Utilisons la propriété de hauteur minimale avec chacun de ces états un par un.
Utilisation de la propriété de hauteur minimale avec l'état de survol
Pour utiliser le « hauteur minimale ' avec une variante d'état de survol dans Tailwind, la syntaxe suivante est utilisée :
< div classe = 'survol :min-h-{taille}...' > < / div >
Utilisons la syntaxe définie ci-dessus dans une démonstration. Dans cet exemple, nous augmenterons la hauteur minimale d'un élément chaque fois que le curseur de la souris survolera l'élément.
< div classe = 'min-h-fit arrondi-md bg-blue-700 texte-centre texte-blanc survol : min-h-écran' >Survolez pour augmenter le minimum hauteur < / div >L'explication du code ci-dessus est la suivante :
- Le ' min-w-fit ' La classe définit la limite de hauteur minimale à la hauteur requise par l'élément div pour s'adapter à son contenu.
- Le ' survol :min-w-screen ' La classe fournira une limite de hauteur minimale égale à 100 % de la taille de l'écran.
- Le ' arrondi-md ', ' bg-{couleur}-{numéro} ', ' centre de texte ', et ' texte-blanc ' Les classes sont respectivement responsables des coins arrondis, de la couleur d'arrière-plan, du texte aligné au centre et de la couleur du texte blanc pour l'élément div. les coins de l'élément div sont arrondis.
Sortir:
Il ressort clairement du résultat ci-dessous que la hauteur minimale de l'élément augmente jusqu'à 100 % de la taille de l'écran lorsque le curseur de la souris le survole.
Utilisation de la propriété de hauteur minimale avec l'état de focus
Pour utiliser le « hauteur minimale ' avec l'état focus dans Tailwind, la syntaxe suivante est utilisée :
< div classe = 'focus :min-h-{taille}...' > < / div >Utilisons la syntaxe définie ci-dessus dans une démonstration. Dans cet exemple, la hauteur minimale d'un champ de saisie augmentera lorsque l'utilisateur se concentrera dessus.
< saisir espace réservé = 'Concentrez-vous sur ce champ de saisie' classe = 'min-h-0 h-fit w-48 arrondi-md bg-gray-200 texte-centre focus : min-h-[35%]' >< / saisir >L'explication du code ci-dessus est la suivante :
- Un ' saisir Le champ ' est créé avec du texte dans l'attribut d'espace réservé.
- Il est fourni une limite de hauteur minimale de 0px en utilisant le « min-h-0 ' classe. Ainsi, le développeur a défini la hauteur par défaut de l'élément égale à la hauteur requise pour s'adapter au contenu en utilisant le ' h-fit ' classe.
- Le ' focus:min-h-[35%] ' La classe augmentera la limite de hauteur minimale du champ de saisie lorsque l'utilisateur se concentre dessus.
Sortir:
Il ressort clairement du résultat ci-dessous que la hauteur du champ de saisie augmente à mesure que l'utilisateur se concentre dessus. En effet, la limite de hauteur minimale passe de 0 px à 35 % de la hauteur de l'écran.
Utilisation de la propriété de hauteur minimale avec l'état actif dans Tailwind
Pour utiliser le « hauteur minimale ' avec la variante d'état actif dans Tailwind, la syntaxe suivante est utilisée :
< div classe = 'actif:min-h-{taille}...' > < / div >Utilisons la syntaxe définie ci-dessus dans une démonstration. Dans cet exemple, la hauteur minimale du bouton augmentera lorsque l'utilisateur cliquera activement dessus.
< bouton classe = 'min-h-0 h-fit w-48 arrondi-md bg-blue-300 centre de texte actif : min-h-[35%]' > Cliquez pour augmenter Hauteur < / bouton >Un bouton est créé avec une limite de hauteur minimale de 0 px. Cependant, en utilisant le « actif : min-h-[35 %] ' La limite de hauteur minimale augmentera de 0 px à 35 % de la taille de l'écran chaque fois que vous cliquerez sur le bouton.
Sortir:
On peut voir dans le résultat suivant que la hauteur minimale du bouton augmente lorsque l'utilisateur clique dessus.
Il s’agit d’appliquer la propriété de hauteur minimale au survol, à la mise au point et aux autres états de Tailwind.
Conclusion
Les variantes d'état telles que le survol, le focus et l'actif dans Tailwind permettent aux utilisateurs de créer des mises en page de conception dynamiques. Pour utiliser la classe de hauteur minimale avec des variantes d'état dans Tailwind, le ' survol : min-h-{valeur} ', ' focus:min-h-{valeur} ', et ' actif : min-h-{valeur} ' Des cours sont utilisés. Cet article a fourni la procédure à suivre pour appliquer le survol, la mise au point et d'autres états avec la classe de hauteur minimale dans Tailwind.