Aquest article explicarà com utilitzar les fraccions diagonals a Tailwind.
Com utilitzar les fraccions diagonals a Tailwind CSS?
La classe de fraccions diagonals a Tailwind és una variant de tipus de lletra numèrica predefinida que fa que el numerador i el denominador siguin més petits i els separa amb una barra inclinada. Això fa que el nombre de la fracció sembli diferent de la resta del text.
Sintaxi
La sintaxi d'utilitzar el ' fraccions diagonals ”la classe és la següent:
< div classe = 'fraccions-diagonals' >
< div / >
Com podeu veure a la sintaxi anterior, el desenvolupador ha de proporcionar ' fraccions diagonals ' a la ' classe ” atribut de l'element.
Utilitzem la classe 'fraccions-diagonals' com a exemple pràctic. A la demostració següent, l'usuari pot veure la diferència entre les fraccions normals i les fraccions diagonals:
< div classe = 'bg-slate-200 text-center text-lg' >< pàg >Fraccions normals: 3 / 5 6 / 3 6 / 5 < / pàg >
< pàg classe = 'fraccions-diagonals' >Fraccions diagonals: 3 / 5 6 / 3 6 / 5 < / pàg >
< / div >
L'explicació del codi anterior és la següent:
- El ' div L'element ' es crea i es proporciona com a color de fons mitjançant el ' bg-{color}-{nombre} ” classe.
- Aleshores, el text es proporciona una mida de lletra gran i s'alinea al centre de l'element mitjançant el ' text-lg ' i ' centre de text ” classes respectivament.
- A continuació, dos ' ' es creen elements, on el segon es proporciona amb el ' fraccions diagonals ” classe.
Sortida:
La diferència entre la fracció diagonal i la fracció normal es pot veure clarament a la sortida anterior.
Ús de la classe de fracció diagonal amb punts d'interrupció
Els punts d'interrupció s'utilitzen com a consultes multimèdia a Tailwind. Hi ha cinc punts d'interrupció predeterminats amb amplades mínimes especificades. Aquests punts d'interrupció es poden utilitzar amb qualsevol classe de Tailwind per crear dissenys de disseny responsius i dinàmics.
Per utilitzar el ' fraccions diagonals ” amb un punt d'interrupció a Tailwind, s'utilitza la sintaxi següent:
{ prefix de punt d'interrupció } : fracció diagonalLa taula següent proporciona l'amplada mínima per a diferents punts d'interrupció a Tailwind:
| Prefix de punt d'interrupció | Amplada mínima |
|---|---|
| sm | 640 píxels |
| md | 768 píxels |
| lg | 1024 píxels |
| xl | 1280 píxels |
| 2xl | 1536 píxels |
Utilitzem els punts d'interrupció amb el ' fraccions diagonals ” classe per entendre pràcticament el seu ús:
< div classe = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4 , 7/8 , 5/4 , 6/5
< / div >
Al codi proporcionat anteriorment, es proporciona un element div a la secció “ md:fraccions-diagonals ” classe que canviarà el tipus de lletra de les fraccions numèriques quan el “ md ” s'arriba al punt d'interrupció.
Sortida
Com podeu veure a la sortida, els nombres fraccionaris es proporcionen amb el tipus de lletra de la fracció diagonal quan el ' md ” s'ha arribat al punt d'interrupció:
Ús de la classe de fracció diagonal amb estats de vent de cua
Tailwind proporciona per defecte ' estats ” per tal de proporcionar propietats de disseny a un element quan s'activa aquest estat específic. Això fa que el disseny del disseny sigui més atractiu i dinàmic. Per utilitzar la classe 'fraccions-diagonals' amb un estat a Tailwind, s'utilitza la sintaxi següent:
{ estat } : fracció diagonalL'estat per defecte proporcionat per Tailwind és el següent:
- Passa el cursor: Quan l'usuari passa el cursor per sobre de l'element.
- Focus: Quan l'usuari se centra en un element navegant-hi.
- Actiu: Quan l'usuari activa un element fent-hi clic.
- Desactivar: Quan l'usuari no té permís per activar un element.
La demostració següent proporciona un exemple pràctic de l'ús del ' fraccions diagonals ” classe amb “ flotar ” estat a Tailwind:
< div classe = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4 , 7/8 , 5/4 , 6/5
< / div >
El ' div ' L'element del codi anterior és proporcionat per un ' hover:fraccions-diagonals ” classe que canviarà el tipus de lletra normal dels números de fracció al tipus de lletra de la fracció diagonal.
Sortida
Com podeu veure a la sortida, la font numèrica del número de fracció canvia a mesura que l'usuari passa el cursor del ratolí per sobre:
Es tracta d'utilitzar la classe de fraccions diagonals a Tailwind CSS.
Conclusió
Per utilitzar les fraccions diagonals a Tailwind CSS, utilitzeu el ' fracció diagonal ” classe. Aquesta classe separarà el numerador i el denominador amb una barra i els farà petits. Els usuaris també poden utilitzar la classe 'fraccions diagonals' amb els punts d'interrupció i estats predeterminats a Tailwind per fer que el disseny sigui més dinàmic. Aquest article ha proporcionat el procediment per utilitzar les fraccions diagonals a Tailwind.