Supongamos que un usuario tiene que crear una lista de elementos para su página web. Para facilitar el proceso de diseño, Tailwind proporciona varias clases de estilo de lista que se pueden usar para cambiar el tipo, la posición y la alineación de los elementos de la lista.
Este artículo proporcionará el procedimiento para configurar el tipo de estilo de lista en Tailwind.
¿Cómo configurar el tipo de estilo de lista en Tailwind?
Tailwind proporciona tres tipos de estilos de lista predeterminados. Se utilizan para proporcionar el “ marcador Estilo 'para los elementos de la lista. Las tres clases de tipos de estilo de lista predeterminadas se describen a continuación:
- disco de lista: Esta clase proporcionará las viñetas redondas como marcador de lista.
- lista decimal: Esta clase proporcionará los números decimales como marcador de lista.
- lista-ninguna: Esta clase eliminará cualquier marcador de lista de los elementos.
La sintaxis para utilizar los tipos de estilo de lista es la siguiente:
< ul clase = 'estilo de lista}' > < / ul >
Para una mejor comprensión, la demostración que se proporciona a continuación utilizará la sintaxis definida anteriormente para proporcionar diferentes estilos de marcador para enumerar elementos. En este ejemplo, se crearán tres elementos de lista y se les proporcionarán los diferentes estilos de marcador utilizando las clases de estilo de lista predeterminadas en Tailwind:
< pag clase = 'centro de texto texto-xl fuente-negrita' >Lista diferente predeterminada Estilo Tipos en Tailwind< / pag >
< hermano >
< div clase = 'flexión justificar-centro espacio-x-20 bg-slate-100 redondeado-lg mx-4 p-2' >
< ul clase = 'lista-disco' >
LISTA # 1
< eso >Este es el primer artículo< / eso >
< eso >Este es el segundo elemento< / eso >
< eso >Este es el tercer elemento< / eso >
< / ul >
< ul clase = 'lista-decimal' >
LISTA # 2
< eso >Este es el primer artículo< / eso >
< eso >Este es el segundo elemento< / eso >
< eso >Este es el tercer elemento< / eso >
< / ul >
< ul clase = 'lista-ninguna' >
LISTA # 3
< 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 ' 'El elemento se crea con un' SG 'tamaño de fuente y un' atrevido ”Peso de fuente. El contenido de texto del elemento se coloca en el centro usando el botón ' centro de texto ' clase.
- Después de un salto de línea, un ' 'Se crea el elemento y se le proporciona un ' doblar ' clase. Esto creará un contenedor que alineará los elementos secundarios horizontalmente.
- El ' justificar-centro La clase colocará los artículos en el centro del contenedor.
- El ' espacio-x-{tamaño} La clase 'proporciona el espacio horizontal entre los elementos.
- El ' bg-{color}-{número} La clase 'establece el fondo del contenedor en el color especificado.
- El ' redondeado-lg La clase ”redondea las esquinas del contenedor.
- El ' mx-4 La clase 'proporciona el margen horizontal al contenedor flexible.
- El ' p-2 La clase 'proporciona relleno al contenedor flexible.
- A continuación, se crean tres elementos de lista y se les proporcionan diferentes tipos de estilos de lista usando el botón ' lista-{tipo} ' clase.
Producción:
En el resultado siguiente, se puede ver que la primera lista usa viñetas, la segunda usa números decimales y la tercera no usa ningún marcador de elemento.
Uso de la clase de estilo de lista con las variantes de estado en Tailwind
La clase de estilo de lista se puede utilizar con las variantes de estado predeterminadas en Tailwind para hacer que el diseño sea más dinámico. Usando las variantes de estado activo, foco y desplazamiento, el usuario puede cambiar el estilo del marcador de los elementos de la lista cada vez que se activa el estado especificado. La sintaxis para utilizar la clase de estilo de lista con variantes de estado es la siguiente:
< ul clase = '{estado}: lista-{estilo}...' > < / ul >A continuación se muestra un ejemplo del uso del tipo de estilo de lista con un estado 'desplazado', donde el usuario puede cambiar el estilo del marcador al pasar el cursor sobre el bloque de lista:
< pag clase = 'centro de texto texto-xl fuente-negrita' >Pase el cursor sobre el bloque de lista para cambiar el estilo del marcador< / pag >
< hermano >
< div clase = 'flexión justificar-centro espacio-x-20 bg-slate-100 redondeado-lg mx-4 p-2' >
< ul clase = 'lista-disco flotante: lista-decimal' >
LISTA # 1
< eso >Este es el primer artículo< / eso >
< eso >Este es el segundo elemento< / eso >
< eso >Este es el tercer elemento< / eso >
< / ul >
< / div >En el código anterior, la lista se proporciona con el ' lista-disco ”clase como tipo de estilo de lista predeterminado. Sin embargo, utilizando el “ hover: lista-decimal ”, el tipo de estilo de lista cambiará cuando el usuario coloque el cursor del mouse sobre el bloque de lista.
Producción:
El siguiente resultado muestra que el estilo del tipo de lista cambia de una lista con viñetas a una lista numerada cuando el cursor pasa sobre el bloque de lista.
Uso de la clase de estilo de lista con los puntos de interrupción en Tailwind
Los puntos de interrupción se utilizan para el diseño responsivo del diseño para diferentes tamaños de pantalla. Los cinco puntos de interrupción predeterminados proporcionados por Tailwind son sm, md, lg, xl y 2xl. La siguiente sintaxis se utiliza para proporcionar un punto de interrupción a la clase de estilo de tipo de lista:
< ul clase = '{punto de interrupción}: lista-{estilo}...' > < / ul >A continuación se muestra un ejemplo del uso del tipo de estilo de lista con un ' Maryland ”, donde el estilo del marcador cambiará cuando el tamaño de la pantalla alcance el punto de interrupción “md”:
< pag clase = 'centro de texto texto-xl fuente-negrita' >Aumentar pantalla Tamaño para cambiar el estilo del marcador< / pag >
< hermano >
< div clase = 'flexión justificar-centro espacio-x-20 bg-slate-100 redondeado-lg mx-4 p-2' >
< ul clase = 'lista-disco md: lista-decimal' >
LISTA # 1
< 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, la lista se proporciona con el ' lista-disco ”clase como estilo predeterminado. Sin embargo, utilizando el “ md: lista-decimal ”clase, el tipo de estilo de lista cambiará para el tamaño de pantalla “md”.
Producción:
Como puede ver en el resultado siguiente, el tipo de estilo de lista cambia de disco a decimal cuando el tamaño de la pantalla alcanza el ' Maryland ”punto de interrupción.
Se trata de configurar el tipo de estilo de lista en Tailwind.
Conclusión
Tailwind proporciona tres clases de tipos de estilos de lista predefinidas para cambiar el estilo de listado de un elemento. El ' lista-disco La clase 'proporciona los puntos para enumerar los elementos. El ' lista-decimal La clase 'proporciona los números para enumerar los artículos. El ' lista-ninguno La clase 'crea una lista que no utiliza ningún marcador de elemento. Este artículo proporciona el procedimiento para configurar el tipo de estilo de lista en Tailwind.