Este artículo proporcionará el procedimiento para configurar la imagen de estilo de lista de un bloque de lista en Tailwind.
¿Cómo configurar la clase de imagen de estilo de lista en Tailwind?
La clase de imagen de estilo de lista se utiliza para proporcionar una imagen como marcador de lista en Tailwind. De forma predeterminada, Tailwind solo proporciona el ' lista-imagen-ninguna ”clase que solo se puede usar para eliminar cualquier marcador de imagen previamente establecido para una lista.
Sintaxis
La sintaxis para usar la clase de imagen de estilo de lista en Tailwind es la siguiente:
< ul clase = 'lista-imagen-[url({Imagen Url})]' > < / ul >
Esta sintaxis proporciona la imagen especificada como marcador para el elemento de la lista.
< ul clase = 'lista-imagen-ninguna' > < / ul >
Esta sintaxis elimina cualquier imagen establecida previamente como marcador para un elemento de lista.
Usemos la sintaxis definida anteriormente para usar una imagen como marcador en una lista desordenada. En esta demostración, el usuario tiene una imagen llamada ' puntero de mano.png ”presente dentro de la misma carpeta del proyecto Tailwind. En caso de que la imagen esté presente en alguna otra carpeta, el usuario debe proporcionar la ruta completa a la clase de imagen de estilo de lista. Usaremos esa imagen como marcador de lista usando la clase 'lista-imagen'.
< div clase = 'centro de justificación flexible' >
< ul clase = 'lista-dentro-lista-imagen-[url(handpointer.png)] espacio-y-2 redondeado-md bg-verde-400 p-2' >
LISTA DE MUESTRA
< eso >Este es el primer artículo< / eso >
< eso >Este es el segundo elemento< / eso >
< eso >Este es el tercer elemento< / eso >
< / ul >
< / div >
La explicación del código anterior es la siguiente:
- A ' 'Se crea el elemento y se le proporciona el ' doblar Clase que alinea los elementos horizontalmente en un contenedor.
- El ' justificar-centro La clase 'alinea los elementos secundarios con el centro del contenedor.
- A continuación, el “
- Está provisto del “ lista dentro ”clase que colocará el marcador de elemento de lista especificado dentro del bloque de lista.
- El ' lista-imagen-[url({Imagen Url})] La clase 'se utiliza para proporcionar una imagen como marcador de elemento de lista para el elemento.
- El ' espacio-y-{número} La clase 'proporciona el espacio vertical entre los elementos de la lista.
- El ' md redondeado 'La clase redondea las esquinas del bloque de lista.
- El ' bg-{color}-{número} La clase 'se utiliza para proporcionar el color de fondo al bloque de lista.
- El ' p-2 La clase 'proporciona el borde del elemento de la lista.
- Se crean tres elementos de lista utilizando el botón '
”etiquetas. Producción:
Se puede ver en el resultado que una imagen de puntero de mano está configurada como marcador para los elementos de la lista:
Uso de variantes de estado con clase de imagen de estilo de lista en Tailwind
Tailwind proporciona varias variantes de estado, como flotar, enfocar y activo, que ayudan a crear diseños interactivos. Para utilizar una clase de imagen de estilo lista con estos estados, se utiliza la siguiente sintaxis:
< ul clase = '{estado}: lista-imagen-{ninguno O URL de imagen}' > < / ul >Usemos la sintaxis definida anteriormente para usar la propiedad de imagen de estilo de lista con ' flotar ”estado en Tailwind. En esta demostración, la lista contará con una imagen como marcador de lista. Sin embargo, utilizando el “ flotar ”estado, la imagen será eliminada.
< div clase = 'centro de justificación flexible' >
< ul clase = ' lista-dentro lista-imagen-[url(handpointer.png)] hover:lista-imagen-ninguno espacio-y-2 redondeado-md bg-verde-400 p-2' >
LISTA DE MUESTRA
< eso >Este es el primer artículo< / eso >
< eso >Este es el segundo artículo< / eso >
< eso >Este es el tercer elemento< / eso >
< / ul >
< / div >En el código anterior, el ' hover: lista-imagen-ninguna La clase 'elimina la imagen previamente establecida como marcador de lista.
Producción:
En el siguiente resultado, la imagen de estilo de lista se restablece a ' ninguno ”cuando el usuario pasa el cursor del mouse sobre él. Debido a esto, se eliminó la imagen que se estaba utilizando como marcador de lista.
Uso de puntos de interrupción con clase de imagen de estilo de lista en Tailwind
Los puntos de interrupción son consultas de medios preestablecidas para los elementos de Tailwind. Se utilizan para hacer que el diseño responda a varios tamaños de pantalla. Estos puntos de interrupción incluyen sm, md, lg, xl y 2xl. Para utilizar una clase de imagen de estilo lista con un punto de interrupción, se utiliza la siguiente sintaxis:
< ul clase = '{punto de interrupción}: lista-imagen-{ninguno O URL de imagen}' > < / ul >Usemos la sintaxis definida anteriormente para cambiar el marcador de lista de un ' imagen ' a ' ninguno ”usando un punto de interrupción. En este ejemplo, el marcador de imagen se eliminará una vez que el tamaño de la pantalla aumente el ancho de ' Maryland 'punto de interrupción:
< div clase = 'centro de justificación flexible' >
< ul clase = 'lista-dentro de lista-imagen-[url(handpointer.png)] md:lista-imagen-ninguno espacio-y-2 redondeado-md bg-verde-400 p-2' >
LISTA DE MUESTRA
< eso >Este es el primer artículo< / eso >
< eso >Este es el segundo artículo< / eso >
< eso >Este es el tercer elemento< / eso >
< / ul >
< / div >En el código anterior, el ' md: lista-imagen-ninguna 'La clase elimina el marcador de la lista de imágenes cuando el tamaño de la pantalla alcanza el' Maryland ”punto de interrupción.
Producción:
En el siguiente resultado, el marcador de imagen se elimina cuando el tamaño de la pantalla alcanza el punto de interrupción md:
Se trata de configurar la imagen de estilo de lista en Tailwind.
Conclusión
Tailwind tiene dos clases de imágenes de estilo de lista predefinidas para eliminar o configurar el marcador de lista de un elemento en una imagen. El ' lista-imagen-[url({Imagen Url})] La clase 'proporciona la imagen especificada como marcador de lista. El ' lista-imagen-ninguna La clase 'elimina cualquier imagen proporcionada previamente como marcador de lista. Este artículo proporciona el procedimiento para configurar el tipo de estilo de lista en Tailwind.