Tanmateix, aquest article s'aprofundirà en dues classes específiques que són les xifres proporcionals i les xifres tabulars. S'utilitzen per estilitzar els valors numèrics a Tailwind i organitzar i representar les dades numèriques d'una manera atractiva per al disseny del document.
Aquest article tractarà les xifres proporcionals i tabulars a Tailwind CSS utilitzant el següent esquema:
- Com utilitzar les xifres proporcionals a Tailwind CSS?
- Com utilitzar les figures tabulars a Tailwind CSS?
- Diferència entre les xifres proporcionals i tabulars
Com utilitzar les xifres proporcionals a Tailwind CSS?
La classe de xifres proporcionals assignarà a l'element una convenció on cada nombre no tingui la mateixa amplada.
Sintaxi
La sintaxi per utilitzar les xifres proporcionals a Tailwind és la següent:
< div classe = 'números-proporcionals' >
< div / >
A la sintaxi proporcionada anteriorment, el ' nombres proporcionals S'ha de proporcionar classe a l'element per utilitzar xifres proporcionals.
Vegem un exemple pràctic de xifres proporcionals.
Al codi que es proporciona a continuació, dos ' pàg ' els elements estan continguts en un ' div ” element que utilitza la classe de xifres proporcionals:
< div classe = 'númers proporcionals centre de text bg-slate-200 text-xl' >< pàg > 121212 < / pàg >
< pàg > 838383 < / pàg >
< / div >
L'explicació del codi proporcionat anteriorment és la següent:
- El ' div ' L'element utilitza el ' nombres proporcionals ” classe que aplicarà la propietat de la figura proporcional als nombres.
- El ' centre de text ” La classe col·loca el text al centre de l'element.
- El ' bg-{color}-{nombre} ” La classe és responsable del color de fons de l'element.
- El ' text-xl ” La classe proporciona una mida de lletra extra gran per al text.
- A continuació, dos ' pàg ” es creen elements que contenen diferents números.
Sortida
Es pot veure a la sortida que els números en el segon ' pàg ” tenen una amplada una mica més gran que el primer. Això es deu a la classe de xifres proporcionals:
Com utilitzar les figures tabulars a Tailwind CSS?
Les xifres tabulars de Tailwind assignen la convenció a un element on cada nombre té la mateixa mida d'amplada. Això crea una representació simètrica dels números en forma de taula.
Sintaxi
La sintaxi per utilitzar les figures tabulars és la següent:
< div classe = 'números-tabulars' >< div / >
A la sintaxi proporcionada anteriorment, el ' nombres tabulars ” s'ofereix classe a l'element per utilitzar les figures tabulars.
Vegem com el ' nombres tabulars ” afecten els valors numèrics d'un document HTML. Per a aquesta demostració, dos “ pàg ' amb valors numèrics es creen i contingudes en un ' div ” element que utilitza la classe de figures tabulars:
< div classe = 'tabular-nums text-center bg-slate-200 text-xl' >< pàg > 121212 < / pàg >
< pàg > 838383 < / pàg >
< / div >
En el codi anterior, el ' nombres tabulars La classe s'ofereix a la div 'element que assignarà l'estil de les figures tabulars al nen' pàg ” elements.
Sortida:
A la sortida anterior es pot veure que els valors numèrics d'ambdós elements estan alineats perfectament a causa de les mateixes mides d'amplada dels dígits.
Informació addicional: diferència entre les xifres proporcionals i tabulars a Tailwind CSS
Vegem una demostració que diferencia l'efecte de les classes de xifres tabulars i proporcionals sobre els valors numèrics. En aquesta demostració, als elements se'ls assignarà per defecte la classe de xifres proporcionals. A continuació, utilitzant l'estat de flotació, als elements se'ls assignarà la classe de figures tabulars:
< div classe = 'númers proporcionals centre de text bg-slate-200 text-xl hover:númers-tabulars' >< pàg > 121212 < / pàg >
< pàg > 838383 < / pàg >
< / div >
Es pot veure al codi anterior que el ' div L'element ' es proporciona amb el ' nombres proporcionals ”, que serà la convenció per defecte que seguiran els valors numèrics.
De la mateixa manera, a causa de la “ hover:tabular-nums ”, els valors numèrics seguiran la convenció de xifres tabulars sempre que l'usuari passi el cursor del ratolí per sobre de l'element “div”.
Sortida
A la sortida donada, l'amplada dels valors numèrics canvia quan l'usuari passa el ratolí per sobre de l'element. Això proporciona la diferència visual entre les xifres proporcionals i tabulars a Tailwind:
Això és tot sobre xifres proporcionals i tabulars a Tailwind.
Conclusió
Per utilitzar xifres proporcionals a Tailwind, el ' nombres proporcionals s'utilitza la classe. Les xifres proporcionals utilitzen la convenció en què cada valor numèric té una mida d'amplada diferent. Per utilitzar les xifres tabulars a Tailwind, el ' nombres tabulars s'utilitza la classe. Les figures tabulars utilitzen la convenció en què cada valor numèric té la mateixa mida d'amplada. Aquest article ha proporcionat el procediment per utilitzar les xifres proporcionals i tabulars a Tailwind.