Este artículo proporcionará el procedimiento para aplicar la propiedad de altura mínima a Hover, Focus y otros estados en Tailwind.
Nota: Para saber más sobre las clases de altura mínima en Tailwind, lea esto artículo en nuestra página web.
¿Cómo aplicar la propiedad de altura mínima para flotar, enfocar y otros estados en viento de cola?
Tailwind proporciona variantes de estado predeterminadas que se pueden proporcionar con las propiedades de diseño. Estas variantes de estado incluyen 'flotar', 'enfocar' y 'activo'. La descripción de estas variantes de estado es la siguiente:
- El' flotar El estado 'se activa cada vez que el cursor del mouse se sitúa sobre un elemento.
- El ' enfocar El estado 'se activa cada vez que el elemento está enfocado.
- El ' activo El estado 'se activa cada vez que se activa o se hace clic en el elemento.
Usemos la propiedad de altura mínima con cada uno de estos estados uno por uno.
Uso de la propiedad de altura mínima con estado de desplazamiento
Usar el ' altura minima ”clase con una variante de estado flotante en Tailwind, se utiliza la siguiente sintaxis:
< div clase = 'flotar: min-h-{tamaño}...' > < / div >
Usemos la sintaxis definida anteriormente en una demostración. En este ejemplo, aumentaremos la altura mínima de un elemento cada vez que el cursor del mouse pase sobre el elemento.
< div clase = 'min-h-fit redondeado-md bg-blue-700 texto-centro texto-blanco hover:min-h-pantalla' >Pase el cursor para aumentar el mínimo altura < / div >La explicación del código anterior es la siguiente:
- El ' min-w-fit La clase 'establece el límite de altura mínimo a la altura requerida por el elemento div para ajustarse a su contenido.
- El ' hover:min-w-pantalla La clase 'proporcionará un límite de altura mínimo igual al 100% del tamaño de la pantalla.
- El ' md redondeado ”, “ bg-{color}-{número} ”, “ centro de texto ', y ' texto-blanco Las clases 'son responsables de las esquinas redondeadas, el color de fondo, el texto alineado al centro y el color de texto blanco para el elemento div, respectivamente. las esquinas del elemento div redondeadas.
Producción:
Del resultado siguiente se desprende claramente que la altura mínima del elemento aumenta al 100% del tamaño de la pantalla cuando el cursor del mouse pasa sobre él.
Uso de la propiedad de altura mínima con estado de enfoque
Usar el ' altura minima ”clase con el estado de enfoque en Tailwind, se utiliza la siguiente sintaxis:
< div clase = 'enfoque:min-h-{tamaño}...' > < / div >Usemos la sintaxis definida anteriormente en una demostración. En este ejemplo, la altura mínima de un campo de entrada aumentará cuando el usuario se centre en él.
< aporte marcador de posición = 'Céntrate en este campo de entrada' clase = 'min-h-0 h-fit w-48 redondeado-md bg-gray-200 enfoque en el centro del texto: min-h-[35%]' >< / aporte >La explicación del código anterior es la siguiente:
- Un ' aporte El campo 'se crea con algo de texto en el atributo de marcador de posición.
- Se proporciona un límite de altura mínimo de 0px utilizando el botón ' min-h-0 ' clase. Entonces, el desarrollador estableció la altura predeterminada del elemento igual a la altura requerida para ajustarse al contenido usando el botón ' ajuste h ' clase.
- El ' enfoque: min-h-[35%] La clase 'aumentará el límite de altura mínima del campo de entrada cuando el usuario se centre en él.
Producción:
Del resultado siguiente se desprende claramente que la altura del campo de entrada aumenta a medida que el usuario se centra en él. Esto se debe a que el límite de altura mínima aumenta de 0px al 35% de la altura de la pantalla.
Uso de la propiedad de altura mínima con estado activo en viento de cola
Usar el ' altura minima ”propiedad con la variante de estado activo en Tailwind, se utiliza la siguiente sintaxis:
< div clase = 'activo: min-h-{tamaño}...' > < / div >Usemos la sintaxis definida anteriormente en una demostración. En este ejemplo, la altura mínima del botón aumentará cuando el usuario haga clic activamente en él.
< botón clase = 'min-h-0 h-fit w-48 redondeado-md bg-blue-300 centro de texto activo: min-h-[35%]' > Haga clic para aumentar Altura < / botón >Se crea un botón con un límite de altura mínimo de 0px. Sin embargo, utilizando el “ activo:min-h-[35%] 'El límite de altura mínima aumentará de 0px al 35% del tamaño de la pantalla cada vez que se haga clic en el botón.
Producción:
Se puede ver en el siguiente resultado que la altura mínima del botón aumenta cuando el usuario hace clic en él.
Se trata de aplicar la propiedad de altura mínima al desplazamiento, enfoque y otros estados de Tailwind.
Conclusión
Las variantes de estado como hover, focus y active en Tailwind permiten a los usuarios crear diseños de diseño dinámicos. Para utilizar la clase de altura mínima con variantes de estado en Tailwind, el ' flotar: min-h-{valor} ”, “ foco:min-h-{valor} ', y ' activo:min-h-{valor} Se utilizan clases. Este artículo proporciona el procedimiento para aplicar el desplazamiento, el enfoque y otros estados con la clase de altura mínima en Tailwind.