Ako používať proporcionálne a tabuľkové čísla v Tailwinde?

Tento článok však rozpracuje dve špecifické triedy, ktorými sú proporcionálne čísla a tabuľkové čísla. Používajú sa na úpravu číselných hodnôt v Tailwinde a na usporiadanie a reprezentáciu číselných údajov spôsobom, ktorý je príťažlivý pre návrh dokumentu.

V tomto článku budú podrobne uvedené proporcionálne a tabuľkové údaje v porovnávači Tailwind CSS pomocou nasledujúceho prehľadu:

• Ako používať proporcionálne čísla v Tailwind CSS?
• Ako používať tabuľkové obrázky v Tailwind CSS?
• Rozdiel medzi proporcionálnymi a tabuľkovými údajmi

Ako používať proporcionálne čísla v Tailwind CSS?

Trieda proporcionálnych čísel priradí prvku konvenciu, kde každé číslo nemá rovnakú šírku.

Syntax

Syntax na použitie proporcionálnych čísel v Tailwinde je nasledovná:

Vo vyššie uvedenej syntaxi je „ proporcionálne-čísla ” trieda musí byť poskytnutá prvku, aby sa použili proporcionálne čísla.

Pozrime sa na praktický príklad proporcionálnych čísel.

V nižšie uvedenom kóde sú dve „ p “prvky sú obsiahnuté v “ div ” prvok, ktorý používa triedu proporcionálnych čísel:

Vysvetlenie vyššie uvedeného kódu je nasledovné:

• ' div prvok používa prvok proporcionálne-čísla ” trieda, ktorá použije vlastnosť proporcionálneho čísla na čísla.
• ' textové centrum ” trieda umiestni text do stredu prvku.
• ' bg-{color}-{number} ” trieda je zodpovedná za farbu pozadia prvku.
• ' text-xl ” poskytuje extra veľkú veľkosť písma pre text.
• Ďalej dve “ p ” sú vytvorené prvky obsahujúce rôzne čísla.

Výkon

Na výstupe je vidieť, že čísla v druhom „ p ” prvok majú o niečo väčšiu šírku ako prvý. Je to spôsobené triedou pomerných čísel:

Ako používať tabuľkové obrázky v Tailwind CSS?

Čísla v tabuľke v Tailwinde priraďujú konvenciu prvku, kde má každé číslo rovnakú šírku. To vytvára symetrické tabuľkové znázornenie čísel.

Syntax

Syntax na použitie tabuľkových obrázkov je nasledovná:

Vo vyššie uvedenej syntaxi je „ tabuľkové-čísla ” je k prvku poskytnutá trieda na použitie tabuľkových obrázkov.

Pozrime sa, ako „ tabuľkové-čísla ” ovplyvňujú číselné hodnoty v dokumente HTML. Pre túto demonštráciu dvaja „ p “ s číselnými hodnotami sú vytvorené a obsiahnuté v “ div ” prvok, ktorý používa triedu tabuľkových obrázkov:

Vo vyššie uvedenom kóde je „ tabuľkové-čísla „trieda sa poskytuje „ div “prvok, ktorý dieťaťu priradí štýl tabuľkových obrázkov” p “prvky.

Výkon:

Vo vyššie uvedenom výstupe je možné vidieť, že číselné hodnoty v oboch prvkoch sú dokonale zarovnané kvôli rovnakej veľkosti šírky číslic.

Bonusové informácie: Rozdiel medzi proporcionálnymi a tabuľkovými údajmi v Tailwind CSS

Pozrime sa na ukážku, ktorá rozlišuje vplyv tried tabuľkových a pomerných čísel na číselné hodnoty. V tejto ukážke bude prvkom štandardne priradená trieda proporcionálnych čísel. Potom pomocou stavu vznášania sa prvkom bude priradená trieda tabuľkových obrázkov:

Vo vyššie uvedenom kóde je možné vidieť, že „ div prvok je vybavený prvkom „ proporcionálne-čísla “, čo bude predvolená konvencia, podľa ktorej budú nasledovať číselné hodnoty.

Podobne vzhľadom na „ hover:tabular-nums ” triedy, budú číselné hodnoty dodržiavať konvenciu tabuľkových čísel vždy, keď používateľ umiestni kurzor myši na prvok „div“.

Výkon

V danom výstupe sa šírka číselných hodnôt zmení, keď používateľ podrží kurzor myši nad prvkom. Toto poskytuje vizuálny rozdiel medzi proporcionálnymi a tabuľkovými číslami v Tailwind:

To je všetko o pomerných a tabuľkových číslach v Tailwinde.

Záver

Ak chcete použiť proporcionálne čísla v Tailwinde, „ proporcionálne-čísla ” používa sa trieda. Proporcionálne čísla používajú konvenciu, kde má každá číselná hodnota inú šírku. Ak chcete použiť tabuľkové údaje v Tailwinde, „ tabuľkové-čísla ” používa sa trieda. Tabuľkové obrázky používajú konvenciu, podľa ktorej má každá číselná hodnota rovnakú šírku. Tento článok poskytuje postup na používanie proporcionálnych a tabuľkových údajov v Tailwinde.