Cum să utilizați cifrele proporționale și tabulare în Tailwind?

Cu toate acestea, acest articol va detalia două clase specifice, care sunt cifre proporționale și cifre tabelare. Acestea sunt folosite pentru a stila valorile numerice în Tailwind și pentru a aranja și reprezenta datele numerice într-un mod care să fie atrăgător pentru designul documentului.

Acest articol va detalia cifrele proporționale și tabelare din Tailwind CSS utilizând următoarea schiță:

• Cum se utilizează cifrele proporționale în Tailwind CSS?
• Cum să utilizați figurile tabulare în Tailwind CSS?
• Diferența dintre cifrele proporționale și tabelare

Cum se utilizează cifrele proporționale în Tailwind CSS?

Clasa de cifre proporționale va atribui elementului o convenție în care fiecare număr nu are aceeași lățime.

Sintaxă

Sintaxa pentru utilizarea cifrelor proporționale în Tailwind este următoarea:

În sintaxa furnizată mai sus, „ numere-proporționale ” trebuie furnizată elementului pentru a utiliza cifre proporționale.

Să vedem un exemplu practic de cifre proporționale.

În codul furnizat mai jos, două „ p ” elementele sunt conținute într-un „ div ” element care folosește clasa cifre proporționale:

Explicația codului furnizat mai sus este următoarea:

• „ div „elementul folosește „ numere-proporționale ” clasă care va aplica numerelor proprietatea cifrei proporționale.
• „ centru de text ” clasa poziționează textul în centrul elementului.
• „ bg-{culoare}-{număr} ” clasa este responsabilă pentru culoarea de fundal a elementului.
• „ text-xl ” clasa oferă o dimensiune extra mare a fontului pentru text.
• În continuare, două „ p ” sunt create elemente care conțin numere diferite.

Ieșire

Se poate vedea în ieșire că numerele în al doilea „ p ” au o lățime ceva mai mare decât primul. Acest lucru se datorează clasei de cifre proporționale:

Cum să utilizați figurile tabulare în Tailwind CSS?

Cifrele tabulare din Tailwind atribuie convenția unui element în care fiecare număr are aceeași dimensiune de lățime. Acest lucru creează o reprezentare simetrică ca un tabel a numerelor.

Sintaxă

Sintaxa pentru utilizarea figurilor tabelare este următoarea:

În sintaxa furnizată mai sus, „ numere-tabelare ” se oferă elementului pentru a utiliza figurile tabelare.

Să vedem cum „ numere-tabelare ” afectează valorile numerice dintr-un document HTML. Pentru această demonstrație, doi „ p ” cu valori numerice sunt create și conținute într-un „ div ” element care folosește clasa figuri tabulare:

În codul de mai sus, „ numere-tabelare ” este oferită clasei ” div „element care va atribui copilului stilul figurilor tabulare” p ” elemente.

Ieșire:

Se poate vedea în rezultatul de mai sus că valorile numerice din ambele elemente sunt aliniate perfect din cauza aceleași dimensiuni de lățime a cifrelor.

Informații bonus: Diferența dintre cifrele proporționale și tabelare în CSS Tailwind

Să vedem o demonstrație care diferențiază efectul claselor de cifre tabelare și proporționale asupra valorilor numerice. În această demonstrație, elementelor li se va atribui ca implicită clasa cifre proporționale. În continuare, folosind starea hover, elementelor li se va atribui clasa figuri tabelare:

Se poate vedea în codul de mai sus că „ div ” elementul este prevazut cu “ numere-proporționale ”, care va fi convenția implicită pe care o vor urma valorile numerice.

În mod similar, datorită „ hover:tabular-nums ”, valorile numerice vor urma convenția cifrelor tabelare ori de câte ori utilizatorul plasează cursorul mouse-ului peste elementul „div”.

Ieșire

În rezultatul dat, lățimea valorilor numerice se modifică atunci când utilizatorul trece mouse-ul peste element. Aceasta oferă diferența vizuală dintre cifrele proporționale și cele tabelare din Tailwind:

Este vorba despre cifre proporționale și tabelare în Tailwind.

Concluzie

Pentru a folosi cifre proporționale în Tailwind, „ numere-proporționale ” se folosește clasa. Cifrele proporționale folosesc convenția în care fiecare valoare numerică are o lățime diferită. Pentru a folosi cifrele tabulare în Tailwind, „ numere-tabelare ” se folosește clasa. Cifrele tabelare folosesc convenția în care fiecare valoare numerică are aceeași dimensiune a lățimii. Acest articol a furnizat procedura de utilizare a cifrelor proporționale și tabelare în Tailwind.