See artikkel selgitab, kuidas kasutada Tailwindis diagonaalmurde.
Kuidas kasutada Tailwind CSS-is diagonaalmurde?
Tailwindi diagonaalmurru klass on eelmääratletud numbrilise fondi variant, mis muudab lugeja ja nimetaja väiksemaks ning eraldab need kaldkriipsuga. See muudab murdosa numbri ülejäänud tekstist eristavaks.
Süntaks
Süntaks kasutades ' diagonaal-murrud ” klass on järgmine:
< div klass = 'diagonaalmurrud' >
< div / >
Nagu ülaltoodud süntaksist näete, peab arendaja esitama ' diagonaal-murrud ' jaotises ' klass ” elemendi atribuut.
Kasutame praktilise näitena klassi 'diagonaalmurrud'. Allolevas esitluses näeb kasutaja erinevust tavaliste ja diagonaalmurdude vahel:
< div klass = 'bg-slate-200 text-center text-lg' >< lk >Normaalmurrud: 3 / 5 6 / 3 6 / 5 < / lk >
< lk klass = 'diagonaalmurrud' >Diagonaalmurrud: 3 / 5 6 / 3 6 / 5 < / lk >
< / div >
Ülaltoodud koodi selgitus on järgmine:
- ' div ' element luuakse ja antakse taustavärvina, kasutades ' bg-{color}-{number} ” klass.
- Seejärel antakse tekst suures kirjasuuruses ja joondatakse elemendi keskkohaga, kasutades ' tekst-lg ” ja „ tekstikeskus ” klassid vastavalt.
- Järgmiseks kaks ' ' elemendid luuakse, kus teine on varustatud ' diagonaal-murrud ” klass.
Väljund:
Erinevus diagonaalmurru ja normaalmurru vahel on ülaltoodud väljundis selgelt näha.
Diagonaalmurru klassi kasutamine murdepunktidega
Katkestuspunkte kasutatakse Tailwindis meediapäringutena. Vaikimisi on viis määratud minimaalse laiusega katkestuspunkti. Neid murdepunkte saab kasutada mis tahes Tailwindi klassiga, et luua tundlik ja dünaamiline kujunduspaigutus.
Et kasutada ' diagonaal-murrud ” klassi murdepunktiga Tailwindis, kasutatakse järgmist süntaksit:
{ murdepunkti eesliide } : diagonaal-murdAllolev tabel annab Tailwindis erinevate murdepunktide minimaalse laiuse:
| Katkestuspunkti eesliide | Minimaalne laius |
|---|---|
| sm | 640 pikslit |
| md | 768 pikslit |
| lg | 1024 pikslit |
| xl | 1280 pikslit |
| 2xl | 1536 pikslit |
Kasutame katkestuspunkte koos ' diagonaal-murrud ” klassis, et nende kasutamist praktiliselt mõista:
< div klass = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Ülaltoodud koodis on jaotises ' div element md:diagonaal-murrud ' klass, mis muudab numbriliste murdude fonti, kui ' md ” murdepunkt on saavutatud.
Väljund
Nagu näete väljundis, esitatakse murdarvud diagonaalse murdosa fondiga, kui ' md ” murdepunkt on saavutatud:
Diagonaalmurru klassi kasutamine taganttuule olekutega
Tailwind pakub vaikimisi ' osariigid ”, et anda elemendile disainiomadused, kui see konkreetne olek käivitatakse. See muudab disaini paigutuse atraktiivsemaks ja dünaamilisemaks. Klassi „diagonal-fractions” kasutamiseks koos olekuga Tailwindis kasutatakse järgmist süntaksit:
{ olek } : diagonaal-murdTailwindi pakutav vaikeolek on järgmine:
- Hõljuma: Kui kasutaja viib kursori elemendi kohale.
- Fookus: Kui kasutaja keskendub elemendile, navigeerides selle juurde.
- Aktiivne: Kui kasutaja aktiveerib elemendi sellel klõpsates.
- Keela: Kui kasutajal ei ole lubatud elementi aktiveerida.
Allolevas esitluses on praktiline näide ' diagonaal-murrud ' klass koos ' hõljuma ” olek Tailwindis:
< div klass = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
' div ' element ülaltoodud koodis on esitatud ' hover:diagonaal-murrud ” klassi, mis muudab murdarvude tavalise fondi diagonaalseks murdosa fondiks.
Väljund
Nagu näete väljundis, muutub murdarvu numbriline font, kui kasutaja viib hiirekursori selle kohale:
See kõik puudutab diagonaalmurruklassi kasutamist Tailwind CSS-is.
Järeldus
Diagonaalmurdude kasutamiseks Tailwind CSS-is kasutage ' diagonaal-murd ” klass. See klass eraldab lugeja ja nimetaja kaldkriipsuga ning muudab need väikeseks. Kasutajad saavad kujunduse dünaamilisemaks muutmiseks kasutada ka klassi 'diagonaalmurrud' koos Tailwindi vaikemurdepunktide ja olekutega. See artikkel pakub Tailwindis diagonaalmurdude kasutamise protseduuri.