Ako používať diagonálne zlomky v Tailwind Css

Tento článok vysvetlí, ako používať diagonálne zlomky v Tailwinde.

Ako používať diagonálne zlomky v Tailwind CSS?

Trieda diagonálnych zlomkov v Tailwinde je preddefinovaný variant číselného písma, ktorý zmenšuje čitateľa a menovateľa a oddeľuje ich lomkou. Vďaka tomu sa číslo zlomku javí ako odlišné od zvyšku textu.

Syntax

Syntax použitia „ diagonálne zlomky “ trieda je nasledovná:

Ako môžete vidieť z vyššie uvedenej syntaxe, vývojár musí poskytnúť „ diagonálne zlomky “ v „ trieda ” atribút prvku.

Použime triedu „diagonálne zlomky“ ako praktický príklad. V nižšie uvedenej ukážke môže používateľ vidieť rozdiel medzi normálnymi zlomkami a diagonálnymi zlomkami:

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

• ' div prvok je vytvorený a poskytnutý ako farba pozadia pomocou ' bg-{color}-{number} ' trieda.
• Potom sa textu poskytne veľké písmo a zarovná sa na stred prvku pomocou „ text-lg “ a „ textové centrum “triedy resp.
• Ďalej dve “

  vytvoria sa prvky “, pričom druhý je vybavený znakom “ diagonálne zlomky ' trieda.

Výkon:

Vo vyššie uvedenom výstupe je jasne vidieť rozdiel medzi diagonálnym zlomkom a normálnym zlomkom.

Použitie triedy diagonálnych zlomkov s bodmi zlomu

Body prerušenia sa používajú ako mediálne dopyty v Tailwinde. Existuje päť predvolených bodov prerušenia so špecifikovanými minimálnymi šírkami. Tieto body prerušenia možno použiť s ľubovoľnou triedou v Tailwinde na vytvorenie responzívnych a dynamických rozložení návrhu.

Ak chcete použiť „ diagonálne zlomky ” s bodom prerušenia v Tailwinde sa používa nasledujúca syntax:

Nižšie uvedená tabuľka poskytuje minimálnu šírku pre rôzne body prerušenia v Tailwind:

Použime body prerušenia s „ diagonálne zlomky “, aby ste prakticky pochopili ich použitie:

Vo vyššie uvedenom kóde je prvok div poskytnutý v „ md:diagonálne zlomky ” trieda, ktorá zmení písmo číselných zlomkov, keď “ md ” dosiahnutý bod zlomu.

Výkon

Ako môžete vidieť na výstupe, zlomkové čísla sú vybavené písmom diagonálnych zlomkov, keď je „ md ” je dosiahnutý bod zlomu:

Použitie triedy diagonálnych zlomkov so stavmi Tailwind

Tailwind poskytuje predvolené „ štátov ” s cieľom poskytnúť prvku vlastnosti návrhu pri spustení tohto špecifického stavu. Vďaka tomu je rozloženie dizajnu atraktívnejšie a dynamickejšie. Na použitie triedy „diagonal-fractions“ so stavom v Tailwinde sa používa nasledujúca syntax:

Predvolený stav poskytovaný službou Tailwind je nasledujúci:

• Vznášať sa: Keď používateľ umiestni kurzor na prvok.
• Zameranie: Keď sa používateľ zameria na prvok tak, že naň prejde.
• Aktívne: Keď používateľ aktivuje prvok kliknutím naň.
• Zakázať: Keď používateľ nemá povolené aktivovať prvok.

Nižšie uvedená ukážka poskytuje praktický príklad použitia „ diagonálne zlomky “trieda s “ vznášať sa “ v Tailwinde:

' div “prvok vo vyššie uvedenom kóde je poskytnutý ako “ hover:diagonal-fractions ” trieda, ktorá zmení normálne písmo čísel zlomkov na písmo diagonálnych zlomkov.

Výkon

Ako môžete vidieť vo výstupe, číselné písmo čísla zlomku sa mení, keď používateľ naň umiestni kurzor myši:

To je všetko o použití triedy diagonálnych zlomkov v Tailwind CSS.

Záver

Ak chcete použiť diagonálne zlomky v CSS Tailwind, použite „ diagonálny zlomok ' trieda. Táto trieda oddelí čitateľa a menovateľa lomkou a urobí ich malými. Používatelia môžu tiež použiť triedu „diagonálne zlomky“ s predvolenými bodmi prerušenia a stavmi v Tailwinde, aby bol návrh dynamickejší. Tento článok poskytuje postup na používanie zlomkov uhlopriečky v službe Tailwind.