Tuttavia, questo articolo elaborerà due classi specifiche che sono le cifre proporzionali e le cifre tabulari. Questi vengono utilizzati per definire lo stile dei valori numerici in Tailwind e organizzare e rappresentare i dati numerici in un modo che sia accattivante per il design del documento.
Questo articolo elaborerà le cifre proporzionali e tabulari in Tailwind CSS utilizzando il seguente schema:
- Come utilizzare le cifre proporzionali in Tailwind CSS?
- Come utilizzare le cifre tabulari in Tailwind CSS?
- Differenza tra cifre proporzionali e tabulari
Come utilizzare le cifre proporzionali in Tailwind CSS?
La classe delle cifre proporzionali assegnerà all'elemento una convenzione in cui ogni numero non ha la stessa larghezza.
Sintassi
La sintassi per utilizzare le cifre proporzionali in Tailwind è la seguente:
< div classe = 'numeri proporzionali' >
< div / >
Nella sintassi sopra fornita, il ' numeri proporzionali La classe ' deve essere fornita all'elemento per utilizzare le cifre proporzionali.
Vediamo un esempio pratico di figure proporzionali.
Nel codice fornito di seguito, due ' P Gli elementi ' sono contenuti in un ' div ” elemento che utilizza la classe delle cifre proporzionali:
< div classe = 'numeri-proporzionali testo-centro bg-slate-200 testo-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
La spiegazione del codice sopra fornito è la seguente:
- IL ' div L'elemento ' utilizza l'elemento ' numeri proporzionali ” che applicherà la proprietà della figura proporzionale ai numeri.
- IL ' centro-testo La classe 'posiziona il testo al centro dell'elemento.
- IL ' bg-{colore}-{numero} La classe ' è responsabile del colore di sfondo dell'elemento.
- IL ' testo-xl ' fornisce una dimensione del carattere molto grande per il testo.
- Successivamente, due “ P Vengono creati elementi contenenti numeri diversi.
Produzione
Si può vedere nell'output che i numeri nel secondo ' P ' hanno una larghezza leggermente maggiore del primo. Ciò è dovuto alla classe delle cifre proporzionali:
Come utilizzare le cifre tabulari in Tailwind CSS?
Le figure tabulari in Tailwind assegnano la convenzione a un elemento in cui ogni numero ha la stessa larghezza. Ciò crea una rappresentazione simmetrica dei numeri simile a una tabella.
Sintassi
La sintassi per l'utilizzo delle figure tabellari è la seguente:
< div classe = 'numeri tabulari' >< div / >
Nella sintassi sopra fornita, il ' numeri tabulari La classe ' viene fornita all'elemento per utilizzare le cifre tabellari.
Vediamo come ' numeri tabulari ' influenzano i valori numerici in un documento HTML. Per questa manifestazione, due” P ' con valori numerici vengono creati e contenuti in un ' div ” elemento che utilizza la classe figure tabulari:
< div classe = 'numeri-tabellari testo-centro bg-ardesia-200 testo-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Nel codice sopra, il ' numeri tabulari La classe ' viene fornita al ' div “elemento che assegnerà al bambino lo stile delle figure tabellari” P ' elementi.
Produzione:
Si può vedere nell'output sopra che i valori numerici in entrambi gli elementi sono perfettamente allineati a causa della stessa larghezza delle cifre.
Informazioni bonus: differenza tra cifre proporzionali e tabulari in Tailwind CSS
Vediamo una dimostrazione che differenzia l'effetto delle classi di cifre tabulari e proporzionali sui valori numerici. In questa dimostrazione, agli elementi verrà assegnata per impostazione predefinita la classe delle cifre proporzionali. Successivamente, utilizzando lo stato hover, agli elementi verrà assegnata la classe delle figure tabulari:
< div classe = 'numeri-proporzionali testo-centro bg-slate-200 testo-xl hover:numeri-tabellari' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Si può vedere nel codice sopra che il ' div L'elemento ' viene fornito con il ' numeri proporzionali ”, che sarà la convenzione predefinita seguita dai valori numerici.
Allo stesso modo, a causa del “ hover:numeri-tabellari ', i valori numerici seguiranno la convenzione delle cifre tabulari ogni volta che l'utente posiziona il cursore del mouse sull'elemento 'div'.
Produzione
Nell'output fornito, la larghezza dei valori numerici cambia quando l'utente passa il mouse sull'elemento. Ciò fornisce la differenza visiva tra le cifre proporzionali e quelle tabulari in Tailwind:
In Tailwind si tratta di cifre proporzionali e tabulari.
Conclusione
Per utilizzare le cifre proporzionali in Tailwind, il ' numeri proporzionali viene utilizzata la classe '. Le cifre proporzionali utilizzano la convenzione secondo cui ciascun valore numerico ha una dimensione di larghezza diversa. Per utilizzare le cifre tabellari in Tailwind, il ' numeri tabulari viene utilizzata la classe '. Le figure tabulari utilizzano la convenzione secondo cui ogni valore numerico ha la stessa larghezza. Questo articolo ha fornito la procedura per utilizzare le cifre proporzionali e tabulari in Tailwind.