Paano Gamitin ang Diagonal Fraction sa Tailwind Css

Nagbibigay ang Tailwind ng iba't ibang mga paunang natukoy na klase para sa pagbibigay ng mga katangian ng disenyo sa mga elemento sa isang HTML na dokumento. Ginagawa nitong mahusay at mas mabilis ang pamamaraan ng disenyo. Gamit ang Tailwind, maaaring i-istilo ng developer ang kanilang mga webpage sa pamamagitan ng mga katangian ng disenyo gaya ng font, laki, timbang, lapad, at mga kulay. Bukod pa rito, nagbibigay ito ng iba't ibang mga numeric na font para gawing mas presentable ang numeric data sa webpage.

Ipapaliwanag ng artikulong ito kung paano gamitin ang mga diagonal na fraction sa Tailwind.

Paano Gamitin ang Diagonal Fraction sa Tailwind CSS?

Ang klase ng diagonal fraction sa Tailwind ay isang paunang natukoy na variant ng numeric font na nagpapaliit sa numerator at denominator at naghihiwalay sa mga ito sa pamamagitan ng slash. Ginagawa nitong tila kakaiba ang fraction number mula sa natitirang bahagi ng teksto.

Syntax

Ang syntax ng paggamit ng “ diagonal-fractions ” klase ay ang mga sumusunod:

< div klase = 'diagonal-fractions' >

< div / >

Tulad ng nakikita mo mula sa syntax sa itaas, kailangang magbigay ang developer ng ' diagonal-fractions ' nasa ' klase ” katangian ng elemento.

Gamitin natin ang klase ng 'diagonal-fractions' bilang isang praktikal na halimbawa. Sa demonstration sa ibaba, makikita ng user ang pagkakaiba sa pagitan ng mga normal na fraction at mga diagonal na fraction:

< div klase = 'bg-slate-200 text-center text-lg' >
< p >Mga Normal na Fraction: 3 / 5 6 / 3 6 / 5 < / p >
< p klase = 'diagonal-fractions' >Mga Diagonal na Fraction: 3 / 5 6 / 3 6 / 5 < / p >
< / div >

Ang paliwanag ng code sa itaas ay ang mga sumusunod:

Ang ' div Ang elemento ay nilikha at ibinigay bilang kulay ng background gamit ang ' bg-{color}-{number} ” klase.
Pagkatapos, ang teksto ay binibigyan ng malaking laki ng font at nakahanay sa gitna ng elemento gamit ang ' text-lg 'at' text-center ” klase ayon sa pagkakasunod.
Susunod, dalawa'
Ang mga elemento ay nilikha, kung saan ang pangalawa ay binibigyan ng ' diagonal-fractions ” klase.

Output:

Ang pagkakaiba sa pagitan ng diagonal fraction at normal na fraction ay malinaw na makikita sa output sa itaas.

Paggamit ng Diagonal Fraction Class na May Mga Breakpoint

Ang mga breakpoint ay ginagamit bilang mga query ng media sa Tailwind. Mayroong limang default na breakpoint na may tinukoy na minimum na lapad. Ang mga breakpoint na ito ay maaaring gamitin sa anumang klase sa Tailwind upang lumikha ng tumutugon at dynamic na mga layout ng disenyo.

Upang gamitin ang ' diagonal-fractions ” class na may breakpoint sa Tailwind, ang sumusunod na syntax ay ginagamit:

{ breakpoint prefix } : dayagonal-fraction

Ang talahanayan sa ibaba ay nagbibigay ng pinakamababang lapad para sa iba't ibang mga breakpoint sa Tailwind:

Breakpoint Prefix	Pinakamababang Lapad
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Gumamit tayo ng mga breakpoint na may ' diagonal-fractions ” class upang praktikal na maunawaan ang kanilang paggamit:

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

Sa ibinigay na code sa itaas, isang elemento ng div ay ibinigay sa ' md:diagonal-fractions ” class na babaguhin ang font ng mga numeric fraction kapag ang “ md ” naabot ang breakpoint.

Output

Tulad ng makikita mo sa output, ang mga fractional na numero ay binibigyan ng diagonal fraction font kapag ang ' md ” naabot ang breakpoint:

Gamit ang Diagonal Fraction Class na may Tailwind States

Nagbibigay ang Tailwind ng default na ' estado ” para makapagbigay ng mga katangian ng disenyo sa isang elemento kapag na-trigger ang partikular na estadong iyon. Ginagawa nitong mas kaakit-akit at dynamic ang layout ng disenyo. Upang magamit ang klase ng 'diagonal-fractions' na may estado sa Tailwind, ginagamit ang sumusunod na syntax:

{ estado } : dayagonal-fraction

Ang default na estado na ibinigay ng Tailwind ay ang mga sumusunod:

Mag-hover: Kapag nag-hover ang user ng cursor sa elemento.
Focus: Kapag nakatutok ang user sa isang elemento sa pamamagitan ng pag-navigate dito.
Aktibo: Kapag na-activate ng user ang isang elemento sa pamamagitan ng pag-click dito.
Huwag paganahin: Kapag hindi pinapayagan ang user na i-activate ang isang elemento.

Ang demonstrasyon sa ibaba ay nagbibigay ng praktikal na halimbawa ng paggamit ng “ diagonal-fractions 'klase na may ' hover ” estado sa Tailwind:

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

Ang ' div Ang 'elemento sa code sa itaas ay ibinibigay ng isang ' hover:diagonal-fractions ” klase na magpapabago sa normal na font ng mga fraction number sa diagonal fraction font.

Output

Tulad ng makikita mo sa output, ang numeric na font ng fraction number ay nagbabago habang pina-hover ng user ang mouse cursor sa ibabaw nito:

Iyon ay tungkol sa paggamit ng diagonal fraction class sa Tailwind CSS.

Konklusyon

Upang gamitin ang mga diagonal na fraction sa Tailwind CSS, gamitin ang “ dayagonal-fraction ” klase. Paghihiwalayin ng klase na ito ang numerator at denominator gamit ang isang slash at gagawing maliit ang mga ito. Magagamit din ng mga user ang klase na 'diagonal-fractions' na may mga default na breakpoint at estado sa Tailwind para gawing mas dynamic ang disenyo. Ang artikulong ito ay nagbigay ng pamamaraan para sa paggamit ng mga diagonal na fraction sa Tailwind.

Paano Gamitin ang Diagonal Fraction sa Tailwind Css