Sin embargo, este artículo profundizará en dos clases específicas que son figuras proporcionales y figuras tabulares. Estos se utilizan para diseñar los valores numéricos en Tailwind y organizar y representar los datos numéricos de una manera que resulte atractiva para el diseño del documento.
Este artículo profundizará en las figuras proporcionales y tabulares en Tailwind CSS utilizando el siguiente esquema:
- ¿Cómo utilizar figuras proporcionales en Tailwind CSS?
- ¿Cómo utilizar figuras tabulares en Tailwind CSS?
- Diferencia entre figuras proporcionales y tabulares
¿Cómo utilizar figuras proporcionales en Tailwind CSS?
La clase de figuras proporcionales asignará al elemento una convención donde cada número no tiene el mismo ancho.
Sintaxis
La sintaxis para utilizar las cifras proporcionales en Tailwind es la siguiente:
< div clase = 'numeros-proporcionales' >
< div / >
En la sintaxis proporcionada anteriormente, el ' números proporcionales Se debe proporcionar una clase al elemento para utilizar cifras proporcionales.
Veamos un ejemplo práctico de figuras proporcionales.
En el código que se proporciona a continuación, dos ' pag 'Los elementos están contenidos en un' div ”elemento que utiliza la clase de figuras proporcionales:
< div clase = 'números proporcionales centro de texto bg-slate-200 texto-xl' >< pag > 121212 < / pag >
< pag > 838383 < / pag >
< / div >
La explicación del código proporcionado anteriormente es la siguiente:
- El ' div 'El elemento utiliza el' números proporcionales ”clase que aplicará la propiedad de figura proporcional a los números.
- El ' centro de texto La clase posiciona el texto en el centro del elemento.
- El ' bg-{color}-{número} La clase 'es responsable del color de fondo del elemento.
- El ' texto-xl La clase 'proporciona un tamaño de fuente extra grande para el texto.
- A continuación, dos” pag Se crean elementos que contienen diferentes números.
Producción
Se puede ver en la salida que los números en el segundo “ pag 'El elemento tiene un ancho ligeramente mayor que el primero. Esto se debe a la clase de figuras proporcionales:
¿Cómo utilizar figuras tabulares en Tailwind CSS?
Las figuras tabulares en Tailwind asignan la convención a un elemento donde cada número tiene el mismo ancho. Esto crea una representación simétrica similar a una tabla de los números.
Sintaxis
La sintaxis para utilizar las figuras tabulares es la siguiente:
< div clase = 'numeros-tabulares' >< div / >
En la sintaxis proporcionada anteriormente, el ' números tabulares 'La clase se proporciona al elemento para utilizar las figuras tabulares.
Veamos cómo el “ números tabulares ”afecta los valores numéricos en un documento HTML. Para esta manifestación, dos “ pag ”con valores numéricos se crean y se contienen en un “ div ”elemento que utiliza la clase de figuras tabulares:
< div clase = 'números tabulares centro de texto bg-slate-200 texto-xl' >< pag > 121212 < / pag >
< pag > 838383 < / pag >
< / div >
En el código anterior, el ' números tabulares 'La clase se proporciona al' div 'elemento que asignará el estilo de las figuras tabulares al niño' pag ”elementos.
Producción:
Se puede ver en el resultado anterior que los valores numéricos en ambos elementos están perfectamente alineados debido al mismo ancho de los dígitos.
Información adicional: diferencia entre figuras proporcionales y tabulares en Tailwind CSS
Veamos una demostración que diferencia el efecto de las clases de figuras tabulares y proporcionales sobre los valores numéricos. En esta demostración, a los elementos se les asignará la clase de figuras proporcionales por defecto. A continuación, utilizando el estado de desplazamiento, a los elementos se les asignará la clase de figuras tabulares:
< div clase = 'números proporcionales centro de texto bg-slate-200 texto-xl hover:números tabulares' >< pag > 121212 < / pag >
< pag > 838383 < / pag >
< / div >
Se puede ver en el código anterior que el ' div 'El elemento está provisto del ' números proporcionales ”, que será la convención predeterminada que seguirán los valores numéricos.
De la misma manera, debido a la “ hover: números-tabulares ”, los valores numéricos seguirán la convención de figuras tabulares cada vez que el usuario coloque el cursor del mouse sobre el elemento “div”.
Producción
En el resultado proporcionado, el ancho de los valores numéricos cambia cuando el usuario pasa el mouse sobre el elemento. Esto proporciona la diferencia visual entre las figuras proporcionales y tabulares en Tailwind:
Se trata de cifras proporcionales y tabulares en Tailwind.
Conclusión
Para utilizar cifras proporcionales en Tailwind, el ' números proporcionales Se utiliza la clase. Las figuras proporcionales utilizan la convención donde cada valor numérico tiene un tamaño de ancho diferente. Para utilizar las cifras tabulares en Tailwind, el ' números tabulares Se utiliza la clase. Las figuras tabulares utilizan la convención de que cada valor numérico tiene el mismo ancho. Este artículo proporciona el procedimiento para utilizar las cifras proporcionales y tabulares en Tailwind.