Cum să utilizați fracțiile diagonale în Tailwind Css

Acest articol va explica cum să utilizați fracțiile diagonale în Tailwind.

Cum să utilizați fracțiile diagonale în CSS Tailwind?

Clasa de fracții diagonale din Tailwind este o variantă de font numerică predefinită care face numărătorul și numitorul mai mici și le separă printr-o bară oblică. Acest lucru face ca numărul fracției să pară distinct de restul textului.

Sintaxă

Sintaxa utilizării „ diagonale-fractii ” clasa este următoarea:

După cum puteți vedea din sintaxa de mai sus, dezvoltatorul trebuie să furnizeze „ diagonale-fractii ' în ' clasă ” atributul elementului.

Să folosim clasa „fracții-diagonale” ca exemplu practic. În demonstrația de mai jos, utilizatorul poate vedea diferența dintre fracțiile normale și fracțiile diagonale:

Explicația codului de mai sus este următoarea:

• „ div ” elementul este creat și furnizat ca culoare de fundal folosind „ bg-{culoare}-{număr} ” clasa.
• Apoi, textului i se oferă o dimensiune mare a fontului și este aliniat la centrul elementului folosind „ text-lg ' și ' centru de text ”, respectiv clase.
• În continuare, două „

  ” sunt create elemente, unde al doilea este prevăzut cu „ diagonale-fractii ” clasa.

Ieșire:

Diferența dintre fracția diagonală și fracția normală poate fi văzută clar în rezultatul de mai sus.

Utilizarea clasei de fracții diagonale cu puncte de întrerupere

Punctele de întrerupere sunt folosite ca interogări media în Tailwind. Există cinci puncte de întrerupere implicite cu lățimi minime specificate. Aceste puncte de întrerupere pot fi utilizate cu orice clasă din Tailwind pentru a crea layout-uri de design receptive și dinamice.

Pentru a utiliza „ diagonale-fractii ” cu un punct de întrerupere în Tailwind, se utilizează următoarea sintaxă:

Tabelul de mai jos oferă lățimea minimă pentru diferite puncte de întrerupere în Tailwind:

Să folosim punctele de întrerupere cu „ diagonale-fractii ” clasă pentru a înțelege practic utilizarea lor:

În codul furnizat mai sus, un element div este furnizat în „ md:fractii-diagonale ” care va schimba fontul fracțiilor numerice atunci când ” md ” este atins punctul de întrerupere.

Ieșire

După cum puteți vedea în rezultat, numerele fracționale sunt furnizate cu fontul fracției diagonale atunci când „ md ” este atins punctul de întrerupere:

Utilizarea clasei de fracții diagonale cu stări de vânt în coadă

Tailwind oferă implicit „ state ” pentru a oferi proprietăți de proiectare unui element atunci când acea stare specifică este declanșată. Acest lucru face ca aspectul designului să fie mai atrăgător și mai dinamic. Pentru a utiliza clasa „fracții-diagonale” cu o stare în Tailwind, se folosește următoarea sintaxă:

Starea implicită furnizată de Tailwind este următoarea:

• Planare: Când utilizatorul plasează cursorul peste element.
• Focus: Când utilizatorul se concentrează asupra unui element navigând la acesta.
• Activ: Când utilizatorul activează un element făcând clic pe el.
• Dezactivați: Când utilizatorului nu i se permite să activeze un element.

Demonstrația de mai jos oferă un exemplu practic de utilizare a „ diagonale-fractii ” clasa cu “ planare ” stare în Tailwind:

„ div ' elementul din codul de mai sus este furnizat de un ' hover:fracții-diagonale ” care va schimba fontul normal al numerelor fracțiilor în fontul fracției diagonale.

Ieșire

După cum puteți vedea în rezultat, fontul numeric al numărului fracției se schimbă pe măsură ce utilizatorul trece cursorul mouse-ului peste el:

Este vorba despre utilizarea clasei de fracții diagonale în Tailwind CSS.

Concluzie

Pentru a utiliza fracțiile diagonale în CSS Tailwind, utilizați „ diagonala-fractie ” clasa. Această clasă va separa numărătorul și numitorul cu o oblică și le va face mici. Utilizatorii pot folosi, de asemenea, clasa „fracții diagonale” cu punctele de întrerupere și stările implicite în Tailwind pentru a face designul mai dinamic. Acest articol a furnizat procedura de utilizare a fracțiilor diagonale în Tailwind.