Jak používat proporcionální a tabulkové údaje ve službě Tailwind?

Tento článek se však bude zabývat dvěma konkrétními třídami, kterými jsou poměrná čísla a tabulková čísla. Používají se ke stylování číselných hodnot v Tailwindu ak uspořádání a reprezentaci číselných dat způsobem, který je přitažlivý pro návrh dokumentu.

Tento článek se bude podrobně zabývat proporcionálními a tabulkovými hodnotami v Tailwind CSS pomocí následující osnovy:

• Jak používat proporcionální čísla v Tailwind CSS?
• Jak používat tabulkové obrázky v Tailwind CSS?
• Rozdíl mezi proporcionálními a tabulkovými obrázky

Jak používat proporcionální čísla v Tailwind CSS?

Třída proporcionálních čísel přiřadí prvku konvenci, kde každé číslo nemá stejnou šířku.

Syntax

Syntaxe pro použití proporcionálních čísel v Tailwindu je následující:

Ve výše uvedené syntaxi je „ proporcionální-čísla ” musí být prvku poskytnuta třída, aby mohl používat proporcionální čísla.

Podívejme se na praktický příklad proporcionálních čísel.

V níže uvedeném kódu jsou dvě „ p “ prvky jsou obsaženy v „ div ” prvek, který používá třídu proporcionálních čísel:

Vysvětlení výše uvedeného kódu je následující:

• ' div ” prvek používá “ proporcionální-čísla ” třída, která na čísla použije vlastnost proporcionální číslo.
• ' textové centrum ” třída umístí text do středu prvku.
• ' bg-{barva}-{číslo} Třída ” je zodpovědná za barvu pozadí prvku.
• ' text-xl ” poskytuje extra velkou velikost písma pro text.
• Dále dva“ p ” jsou vytvořeny prvky obsahující různá čísla.

Výstup

Na výstupu je vidět, že čísla ve druhém „ p ” prvek mají o něco větší šířku než první. To je způsobeno třídou poměrných čísel:

Jak používat tabulkové obrázky v Tailwind CSS?

Tabulkové obrázky v Tailwindu přiřazují konvenci prvku, kde má každé číslo stejnou šířku. To vytváří symetrické zobrazení čísel jako v tabulce.

Syntax

Syntaxe pro použití tabulkových obrázků je následující:

Ve výše uvedené syntaxi je „ tabulkové-čísla ” je k prvku poskytnuta třída pro použití tabulkových obrázků.

Podívejme se, jak „ tabulkové-čísla ” ovlivňují číselné hodnoty v dokumentu HTML. Pro tuto ukázku dva „ p “ s číselnými hodnotami jsou vytvořeny a obsaženy v “ div ” prvek, který používá třídu tabulkových obrázků:

Ve výše uvedeném kódu je „ tabulkové-čísla „třída je poskytována „ div 'prvek, který dítěti přiřadí styl tabulkových obrázků' p ' Prvky.

Výstup:

Na výše uvedeném výstupu je vidět, že číselné hodnoty v obou prvcích jsou dokonale zarovnány kvůli stejné šířce číslic.

Bonusové informace: Rozdíl mezi proporcionálními a tabulkovými čísly v Tailwind CSS

Podívejme se na ukázku, která rozlišuje vliv tříd tabulkových a poměrných čísel na číselné hodnoty. V této ukázce bude prvkům standardně přiřazena třída proporcionálních čísel. Dále, pomocí stavu přechodu, bude prvkům přiřazena třída tabulkových obrázků:

Ve výše uvedeném kódu je vidět, že „ div 'prvek je opatřen ' proporcionální-čísla “, což bude výchozí konvence, kterou se budou řídit číselné hodnoty.

Stejně tak kvůli „ hover:tabular-nums ” třídy, budou číselné hodnoty odpovídat konvenci tabulkových čísel, kdykoli uživatel najede kurzorem myši na prvek „div“.

Výstup

V daném výstupu se šířka číselných hodnot změní, když uživatel najede myší na prvek. To poskytuje vizuální rozdíl mezi proporcionálními a tabulkovými čísly v Tailwind:

To je vše o proporcionálních a tabulkových číslech v Tailwindu.

Závěr

Chcete-li v Tailwindu použít proporcionální hodnoty, „ proporcionální-čísla ” se používá třída. Proporcionální čísla používají konvenci, kdy každá číselná hodnota má jinou šířku. Chcete-li použít tabulkové údaje v Tailwind, „ tabulkové-čísla ” se používá třída. Tabulkové obrázky používají konvenci, kdy každá číselná hodnota má stejnou šířku. Tento článek poskytuje postup pro použití proporcionálních a tabulkových čísel ve službě Tailwind.