Jak používat diagonální zlomky v Tailwind Css

Tento článek vysvětlí, jak používat diagonální zlomky ve službě Tailwind.

Jak používat diagonální zlomky v Tailwind CSS?

Třída diagonální zlomek v Tailwind je předdefinovaná varianta číselného písma, která zmenšuje čitatel a jmenovatel a odděluje je lomítkem. Díky tomu se číslo zlomku zdá být odlišné od zbytku textu.

Syntax

Syntaxe použití „ diagonální zlomky “ třída je následující:

Jak můžete vidět z výše uvedené syntaxe, vývojář musí poskytnout „ diagonální zlomky “ v „ třída ” atribut prvku.

Použijme třídu „diagonální zlomky“ jako praktický příklad. V níže uvedené ukázce může uživatel vidět rozdíl mezi normálními zlomky a diagonálními zlomky:

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

• ' div prvek je vytvořen a poskytnut jako barva pozadí pomocí ' bg-{barva}-{číslo} “třída.
• Poté je text opatřen velkým písmem a je zarovnán na střed prvku pomocí „ text-lg ' a ' textové centrum “třídy.
• Dále dva“

  jsou vytvořeny prvky “, kde druhý je opatřen znakem “ diagonální zlomky “třída.

Výstup:

Na výše uvedeném výstupu je jasně vidět rozdíl mezi diagonálním zlomkem a normálním zlomkem.

Použití třídy diagonálních zlomků s lomovými body

Zarážky se používají jako mediální dotazy v Tailwindu. Existuje pět výchozích zarážek se zadanou minimální šířkou. Tyto zarážky lze použít s libovolnou třídou v Tailwindu k vytvoření responzivních a dynamických rozvržení návrhu.

Chcete-li použít „ diagonální zlomky ” s bodem přerušení v Tailwindu se používá následující syntaxe:

Níže uvedená tabulka uvádí minimální šířku pro různé zarážky ve službě Tailwind:

Použijme zarážky s „ diagonální zlomky třídy, abyste prakticky pochopili jejich použití:

Ve výše uvedeném kódu je prvek div poskytnut v „ md:diagonální-zlomky ” třída, která změní písmo číselných zlomků, když “ md ” je dosaženo bodu přerušení.

Výstup

Jak můžete vidět na výstupu, zlomková čísla jsou opatřena písmem diagonálních zlomků, když je „ md ” je dosaženo bodu přerušení:

Použití třídy Diagonální zlomek se stavy Tailwind

Tailwind poskytuje výchozí „ státy ” za účelem poskytnutí vlastností návrhu prvku, když je tento konkrétní stav spuštěn. Díky tomu je rozvržení designu atraktivnější a dynamičtější. Aby bylo možné použít třídu „diagonal-fractions“ se stavem v Tailwindu, používá se následující syntaxe:

Výchozí stav poskytovaný službou Tailwind je následující:

• Vznášet se: Když uživatel najede kurzorem na prvek.
• Soustředit se: Když se uživatel zaměří na prvek tím, že na něj přejde.
• Aktivní: Když uživatel aktivuje prvek kliknutím na něj.
• Zakázat: Když uživatel nemá povoleno aktivovat prvek.

Níže uvedená ukázka poskytuje praktický příklad použití „ diagonální zlomky “třída s “ vznášet se “ stát v Tailwind:

' div 'prvek ve výše uvedeném kódu je poskytován ' hover:diagonal-fractions ” třída, která změní normální písmo čísel zlomků na písmo diagonálních zlomků.

Výstup

Jak můžete vidět na výstupu, číselné písmo čísla zlomku se mění, když uživatel na něj najede kurzorem myši:

To je vše o použití třídy diagonální zlomek v Tailwind CSS.

Závěr

Chcete-li použít diagonální zlomky v CSS Tailwind, použijte „ diagonální zlomek “třída. Tato třída oddělí čitatel a jmenovatel lomítkem a zmenší je. Uživatelé mohou také použít třídu „diagonal-fractions“ s výchozími body přerušení a stavy v Tailwind, aby byl návrh dynamičtější. Tento článek poskytuje postup pro použití diagonálních zlomků v Tailwindu.