Este artículo explicará cómo utilizar fracciones diagonales en Tailwind.
¿Cómo utilizar fracciones diagonales en Tailwind CSS?
La clase de fracción diagonal en Tailwind es una variante de fuente numérica predefinida que hace que el numerador y el denominador sean más pequeños y los separa mediante una barra. Esto hace que el número de fracción parezca distintivo del resto del texto.
Sintaxis
La sintaxis del uso de ' fracciones diagonales La clase es la siguiente:
< div clase = 'fracciones-diagonales' >
< div / >
Como puede ver en la sintaxis anterior, el desarrollador debe proporcionar ' fracciones diagonales ' en el ' clase ”Atributo del elemento.
Usemos la clase “fracciones diagonales” como ejemplo práctico. En la siguiente demostración, el usuario puede ver la diferencia entre las fracciones normales y las fracciones diagonales:
< div clase = 'bg-slate-200 centro de texto texto-lg' >< pag >Fracciones normales: 3 / 5 6 / 3 6 / 5 < / pag >
< pag clase = 'fracciones-diagonales' >Fracciones diagonales: 3 / 5 6 / 3 6 / 5 < / pag >
< / div >
La explicación del código anterior es la siguiente:
- El ' div El elemento ' se crea y se proporciona como color de fondo utilizando el botón ' bg-{color}-{número} ' clase.
- Luego, al texto se le proporciona un tamaño de fuente grande y se alinea con el centro del elemento usando el botón ' texto-lg ' y ' centro de texto ”clases respectivamente.
- A continuación, dos” 'Se crean elementos, donde el segundo se proporciona con el ' fracciones diagonales ' clase.
Producción:
La diferencia entre la fracción diagonal y la fracción normal se puede ver claramente en el resultado anterior.
Uso de la clase de fracción diagonal con puntos de interrupción
Los puntos de interrupción se utilizan como consultas de medios en Tailwind. Hay cinco puntos de interrupción predeterminados con anchos mínimos especificados. Estos puntos de interrupción se pueden utilizar con cualquier clase de Tailwind para crear diseños de diseño dinámicos y responsivos.
Usar el ' fracciones diagonales ”clase con un punto de interrupción en Tailwind, se utiliza la siguiente sintaxis:
{ prefijo de punto de interrupción } : fracción diagonalLa siguiente tabla proporciona el ancho mínimo para diferentes puntos de interrupción en Tailwind:
| Prefijo de punto de interrupción | Ancho mínimo |
|---|---|
| sm | 640px |
| Maryland | 768px |
| LG | 1024px |
| SG | 1280px |
| 2xl | 1536px |
Usemos puntos de interrupción con el ' fracciones diagonales ”clase para comprender prácticamente su uso:
< div clase = 'bg-slate-200 text-center text-lg md: fracciones-diagonales' >3/4 , 7/8 , 5/4 , 6/5
< / div >
En el código proporcionado anteriormente, se proporciona un elemento div en el ' md: fracciones diagonales 'clase que cambiará la fuente de las fracciones numéricas cuando el' Maryland “Se alcanza el punto de interrupción.
Producción
Como puede ver en el resultado, los números fraccionarios se proporcionan con la fuente de fracción diagonal cuando ' Maryland ”Se alcanza el punto de interrupción:
Uso de la clase de fracción diagonal con estados de viento de cola
Tailwind proporciona el valor predeterminado ' estados ”para proporcionar propiedades de diseño a un elemento cuando se activa ese estado específico. Esto hace que el diseño sea más atractivo y dinámico. Para utilizar la clase “fracciones-diagonales” con un estado en Tailwind, se utiliza la siguiente sintaxis:
{ estado } : fracción diagonalEl estado predeterminado proporcionado por Tailwind es el siguiente:
- Flotar: Cuando el usuario pasa el cursor sobre el elemento.
- Enfocar: Cuando el usuario se centra en un elemento navegando hacia él.
- Activo: Cuando el usuario activa un elemento haciendo clic sobre él.
- Desactivar: Cuando el usuario no tiene permitido activar un elemento.
La siguiente demostración proporciona un ejemplo práctico del uso del “ fracciones diagonales ” clase con el “ flotar ”estado en Tailwind:
< div clase = 'bg-slate-200 text-center text-lg hover:fracciones-diagonales' >3/4 , 7/8 , 5/4 , 6/5
< / div >
El ' div El elemento 'en el código anterior es proporcionado por un' hover:fracciones-diagonales ”clase que cambiará la fuente normal de los números de fracción a la fuente de fracción diagonal.
Producción
Como puede ver en el resultado, la fuente numérica del número de fracción cambia cuando el usuario pasa el cursor del mouse sobre él:
Se trata de usar la clase de fracción diagonal en Tailwind CSS.
Conclusión
Para usar las fracciones diagonales en Tailwind CSS, use el botón ' fracción diagonal ' clase. Esta clase separará el numerador y el denominador con una barra y los hará pequeños. Los usuarios también pueden utilizar la clase 'fracciones diagonales' con los puntos de interrupción y estados predeterminados en Tailwind para hacer el diseño más dinámico. Este artículo proporciona el procedimiento para usar las fracciones diagonales en Tailwind.