Este artículo ilustra el uso de desplazamiento, enfoque y otros estados con propiedades de posición en Tailwind.
¿Cómo utilizar el desplazamiento, el enfoque y otros estados con propiedad de posición en viento de cola?
Los estados de desplazamiento, enfoque y otros en Tailwind se utilizan para diseñar elementos en Tailwind que presentan una interfaz atractiva y fácil de usar y una experiencia atractiva para los usuarios. A veces, se debe aplicar la propiedad del puesto para mantener la experiencia en sus más altos estándares.
Método 1: usar la variante de desplazamiento con la propiedad de posición
La variante de desplazamiento se utiliza para aplicar estilo a los elementos seleccionados cuando el usuario mueve el cursor sobre ese elemento seleccionado. El ' posición El atributo 'se puede utilizar junto con' flotar ”para establecer la posición antes y después del desplazamiento. Este par se utiliza para crear una experiencia atractiva para el usuario.
Paso 1: agregue la propiedad Hover con posición en HTML
En el siguiente código, la propiedad de desplazamiento se aplica junto con la propiedad de posición en ' botón ' elemento:
< cuerpo >
< botón clase = 'relativo w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< pag clase = 'texto-blanco-centro-de-texto' > Coloca el cursor sobre mí < / pag >
< / botón >
< / cuerpo >
En este código:
- El ' relativo La clase 'establece el botón en relación con la página principal.
- “ w-40 ” establece el ancho en 40px.
- “ h-12 ” establece la altura en 12px.
- “ bg-azul-500 ” establece el color de fondo en azul.
- “ flotar: absoluto ”cambia la posición relativa del botón a absoluta cuando el cursor del mouse se mueve sobre él.
- “ flotar: traducir-x-4 'mueve el botón 4px hacia la derecha en el eje x y al mismo tiempo 4px hacia abajo' flotar: traducir-y-4 ”.
- El texto está alineado en el centro por “ centro de texto ”.
Paso 2: Verificación
Obtenga una vista previa de la página web creada por el código anterior, que se ve así:
El resultado muestra que el elemento se ha movido 4px hacia la derecha y hacia abajo.
Método 2: usar la variante de enfoque con la propiedad de posición
La variante de enfoque se utiliza para diseñar elementos HTML para llamar la atención del usuario y dar énfasis a algunos elementos. La posición también se puede aplicar en conjunto para posicionar el objeto en relación o absoluta con la página principal. Se hace para mantener al usuario interesado.
Paso 1: agregue la propiedad de enfoque con posición en HTML
Cree un archivo HTML y aplique la propiedad de enfoque con una posición adecuada. Por ejemplo, la posición relativa se aplica a un cuadro de entrada en el siguiente código:
< / cuerpo >
En este código:
- Establezca la posición del “ aporte 'elementos a' relativo ”.
- “ enfoque: traducir-x-4 'mueve el botón 4px hacia la derecha en el eje x y al mismo tiempo 4px hacia abajo' focus: translate-y-4 ”cuando el usuario hace clic en el cuadro de entrada.
- “ enfoque: esquema-2 'crea un contorno alrededor del cuadro de texto cuando el usuario hace clic en él.
Paso 2: verificar la salida
Obtenga una vista previa de la página web creada por código para notar el cambio:
El resultado anterior muestra que el estilo se ha aplicado al elemento seleccionado cuando se enfoca.
Uso de variante activa con propiedad de posición.
La variante activa se utiliza para diseñar los elementos HTML para definir el estado cuando el usuario hace clic y mantiene presionado un botón o algún otro elemento. La propiedad de posición puede hacer que el resultado sea más atractivo para los usuarios, creando una experiencia más dinámica.
Paso 1: agregue la propiedad Hover con posición en HTML
Cree un archivo HTML y aplique la variante activa junto con la propiedad de posición. Por ejemplo, estas propiedades se aplican a un botón en el siguiente ejemplo de código:
< botón clase = 'relativo w-48 h-12 bg-blue-500 activo: traducir-y-2 activo: bg-green-400' >
< durar clase = 'texto-blanco' >Haz clic en mí< / durar >
< / botón >
< / cuerpo >
En el código anterior:
- Establezca la posición del “ botón 'elemento a' relativo ”.
- “ bg-azul-500 ” establece el color de fondo del botón en azul.
- “ activo: traducir-y-2 'mueve el botón 2px hacia abajo y cambia el color del botón a verde con' activo: bg-green-400 ”.
Paso 2: verificar la salida
Obtenga una vista previa de la página web creada por el código anterior y haga clic y mantenga presionado el botón para ver el cambio:
El gif de arriba muestra que el estilo del elemento del botón seleccionado cambia cuando se activa.
Eso es todo para aplicar el desplazamiento, el enfoque y otros estados con la propiedad de posición en Tailwind.
Conclusión
Los estados de desplazamiento, enfoque y otros se pueden usar con la propiedad de posición usando las clases predefinidas de desplazamiento, enfoque y otros estados y luego aplicando atributos de clase de posición como ' absoluto ”, “ relativo ”Y así sucesivamente en conjunto. Este blog ha mostrado cómo utilizar el desplazamiento, el enfoque y otros estados con la utilidad de posición en Tailwind.