Kako koristiti dijagonalne razlomke u Tailwind CSS

Tailwind pruža različite unaprijed definirane klase za pružanje svojstava dizajna elementima u HTML dokumentu. Čini postupak projektiranja učinkovitijim i bržim. Koristeći Tailwind, razvojni programer može stilizirati svoje web stranice pomoću svojstava dizajna kao što su font, veličina, težina, širina i boje. Osim toga, nudi razne numeričke fontove koji numeričke podatke na web stranici čine vidljivijima.

Ovaj će članak objasniti kako koristiti dijagonalne razlomke u Tailwindu.

Kako koristiti dijagonalne razlomke u Tailwind CSS-u?

Klasa dijagonalnog razlomka u Tailwindu unaprijed je definirana varijanta numeričkog fonta koja čini brojnik i nazivnik manjim i odvaja ih kosom crtom. To čini da se broj razlomka razlikuje od ostatka teksta.

Sintaksa

Sintaksa korištenja ' dijagonala-razlomci ” klasa je sljedeća:

< div razreda = 'dijagonalni-razlomci' >

< div / >

Kao što možete vidjeti iz gornje sintakse, programer mora pružiti ' dijagonala-razlomci ' u ' razreda ” atribut elementa.

Upotrijebimo klasu 'dijagonalni razlomci' kao praktičan primjer. U donjoj demonstraciji korisnik može vidjeti razliku između normalnih razlomaka i dijagonalnih razlomaka:

< div razreda = 'bg-slate-200 text-center text-lg' >
< str >Normalni razlomci: 3 / 5 6 / 3 6 / 5 < / str >
< str razreda = 'dijagonalni-razlomci' >Dijagonalni razlomci: 3 / 5 6 / 3 6 / 5 < / str >
< / div >

Objašnjenje gornjeg koda je sljedeće:

' div ' element se stvara i pruža kao boja pozadine pomoću ' bg-{boja}-{broj} ” razred.
Zatim se tekstu daje velika veličina fonta i poravnava se sa središtem elementa pomoću ' tekst-lg ' i ' tekst-centar ” klase odnosno.
Dalje, dva “
' stvaraju se elementi, gdje je drugi opremljen s ' dijagonala-razlomci ” razred.

Izlaz:

Razlika između dijagonalne frakcije i normalne frakcije može se jasno vidjeti u gornjem rezultatu.

Korištenje klase dijagonalnih razlomaka s prijelomnim točkama

Prijelomne točke koriste se kao medijski upiti u Tailwindu. Postoji pet zadanih prijelomnih točaka s navedenim minimalnim širinama. Ove prijelomne točke mogu se koristiti s bilo kojom klasom u Tailwindu za stvaranje responzivnih i dinamičnih izgleda dizajna.

Za korištenje ' dijagonala-razlomci ” s točkom prekida u Tailwindu, koristi se sljedeća sintaksa:

{ prijelomna točka } : dijagonala-razlomak

Donja tablica pruža minimalnu širinu za različite prijelomne točke u Tailwindu:

Prefiks prijelomne točke	Minimalna širina
sm	640 px
doktor medicine	768 px
lg	1024 px
xl	1280 px
2xl	1536px

Upotrijebimo prijelomne točke s ' dijagonala-razlomci ” kako biste praktično razumjeli njihovu upotrebu:

< div razreda = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >
3/4, 7/8, 5/4, 6/5
< / div >

U gore navedenom kodu, element div nalazi se u ' md:dijagonalni-razlomci ' koja će promijeniti font numeričkih razlomaka kada ' doktor medicine ” dosegnuta prijelomna točka.

Izlaz

Kao što možete vidjeti u izlazu, razlomački brojevi isporučuju se dijagonalnim fontom razlomaka kada se ' doktor medicine ” dosegnuta prijelomna točka:

Korištenje klase dijagonalnog razlomka sa stanjima stražnjeg vjetra

Stražnji vjetar pruža zadane postavke ' Države ” kako bi se omogućila svojstva dizajna elementu kada se to specifično stanje pokrene. To čini izgled dizajna privlačnijim i dinamičnijim. Kako bi se koristila klasa 'dijagonalnih razlomaka' sa stanjem u Tailwindu, koristi se sljedeća sintaksa:

{ država } : dijagonala-razlomak

Zadano stanje koje pruža Tailwind je sljedeće:

Lebdjeti: Kada korisnik prijeđe pokazivačem iznad elementa.
Usredotočenost: Kada se korisnik fokusira na element navigacijom do njega.
Aktivan: Kada korisnik aktivira element klikom na njega.
Onemogući: Kada korisnik ne smije aktivirati element.

Donja demonstracija pruža praktičan primjer korištenja ' dijagonala-razlomci ' klasa s ' lebdjeti ” stanje u Tailwindu:

< div razreda = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >
3/4, 7/8, 5/4, 6/5
< / div >

' div ' element u gornjem kodu pruža ' lebdjeti:dijagonalno-razlomci ” koja će normalni font brojeva razlomaka promijeniti u dijagonalni font razlomaka.

Izlaz

Kao što možete vidjeti u izlazu, numerički font broja razlomka mijenja se kako korisnik prelazi pokazivačem miša preko njega:

To je sve o korištenju klase dijagonalnog razlomka u Tailwind CSS-u.

Zaključak

Da biste koristili dijagonalne razlomke u Tailwind CSS-u, koristite ' dijagonala-razlomak ” razred. Ova će klasa razdvojiti brojnik i nazivnik kosom crtom i učiniti ih malima. Korisnici također mogu koristiti klasu 'dijagonalni razlomci' sa zadanim prijelomnim točkama i stanjima u Tailwindu kako bi dizajn bio dinamičniji. Ovaj članak pruža postupak za korištenje dijagonalnih razlomaka u Tailwindu.

Kako koristiti dijagonalne razlomke u Tailwind CSS