Kako uporabljati diagonalne ulomke v Tailwind CSS

Ta članek bo pojasnil, kako uporabljati diagonalne ulomke v Tailwindu.

Kako uporabljati diagonalne ulomke v Tailwind CSS?

Razred diagonalnih ulomkov v Tailwindu je vnaprej določena različica numerične pisave, ki zmanjša števec in imenovalec ter ju loči s poševnico. Zaradi tega se zdi, da se številka ulomka razlikuje od preostalega besedila.

Sintaksa

Sintaksa uporabe ' diagonala-ulomki ” je naslednji:

Kot lahko vidite iz zgornje sintakse, mora razvijalec zagotoviti ' diagonala-ulomki ' v ' razred ” atribut elementa.

Kot praktičen primer uporabimo razred 'diagonalni ulomki'. V spodnji predstavitvi lahko uporabnik vidi razliko med običajnimi ulomki in diagonalnimi ulomki:

Razlaga zgornje kode je naslednja:

• ' div ' je ustvarjen in na voljo kot barva ozadja z uporabo ' bg-{barva}-{številka} ” razred.
• Nato je besedilo opremljeno z veliko pisavo in je poravnano na sredino elementa z uporabo ' besedilo-lg « in » besedilno središče ” razredov oz.
• Nato dva '

  ' so ustvarjeni elementi, kjer je drugi opremljen z ' diagonala-ulomki ” razred.

Izhod:

Razlika med diagonalnim ulomkom in normalnim ulomkom je jasno vidna v zgornjem rezultatu.

Uporaba razreda diagonalnih ulomkov z prelomnimi točkami

Prekinitvene točke se uporabljajo kot medijske poizvedbe v Tailwindu. Obstaja pet privzetih prelomnih točk z določenimi najmanjšimi širinami. Te prekinitvene točke je mogoče uporabiti s katerim koli razredom v Tailwindu za ustvarjanje odzivnih in dinamičnih postavitev oblikovanja.

Če želite uporabiti ' diagonala-ulomki ” s prekinitveno točko v Tailwindu je uporabljena naslednja sintaksa:

Spodnja tabela podaja najmanjšo širino za različne prekinitvene točke v Tailwindu:

Uporabimo prekinitvene točke z ' diagonala-ulomki ” za praktično razumevanje njihove uporabe:

V zgornji kodi je element div na voljo v » md:diagonalni ulomki «, ki bo spremenil pisavo številskih ulomkov, ko je » md ” je dosežena mejna točka.

Izhod

Kot lahko vidite v izpisu, so ulomki opremljeni z diagonalno pisavo ulomkov, ko je » md ” je dosežena mejna točka:

Uporaba razreda diagonalnih ulomkov s stanji hrbtnega vetra

Tailwind zagotavlja privzeto ' države ”, da bi elementu zagotovili oblikovne lastnosti, ko se sproži to specifično stanje. Zaradi tega je zasnova bolj privlačna in dinamična. Za uporabo razreda »diagonalnih ulomkov« s stanjem v Tailwindu je uporabljena naslednja sintaksa:

Privzeto stanje, ki ga zagotavlja Tailwind, je naslednje:

• Hover: Ko uporabnik premakne kazalec nad element.
• Fokus: Ko se uporabnik osredotoči na element tako, da se pomakne do njega.
• aktivno: Ko uporabnik aktivira element s klikom nanj.
• Onemogoči: Ko uporabnik ne sme aktivirati elementa.

Spodnja predstavitev nudi praktičen primer uporabe » diagonala-ulomki ' razred z ' lebdeti ” stanje v Tailwindu:

' div « element v zgornji kodi zagotavlja » lebdenje: diagonalno-ulomki ”, ki bo spremenil običajno pisavo ulomkov v diagonalno pisavo ulomkov.

Izhod

Kot lahko vidite v izhodu, se številska pisava števila ulomkov spremeni, ko uporabnik premakne miškin kazalec nad njim:

To je vse o uporabi razreda diagonalnih ulomkov v Tailwind CSS.

Zaključek

Če želite uporabiti diagonalne ulomke v Tailwind CSS, uporabite » diagonalno-ulomek ” razred. Ta razred bo števec in imenovalec ločil s poševnico in ju pomanjšal. Uporabniki lahko uporabijo tudi razred »diagonalnih ulomkov« s privzetimi prelomnimi točkami in stanji v Tailwindu, da naredijo dizajn bolj dinamičen. Ta članek je podal postopek za uporabo diagonalnih ulomkov v Tailwindu.