Šis emuārs sniegs ideju par vienādas vietas piešķiršanu starp vairākiem Tailwind elementiem.
Kā aizmugurējā vējā piešķirt vienlīdzīgu atstarpi starp vairākiem elementiem?
Lietotāji var piešķirt vienādas atstarpes starp elementiem, izmantojot ' atstarpe-{x/y}-{size} ” lietderības klase. Lietotāji var pievienot vietu uz x vai y ass, norādot vesela skaitļa vērtību. Atstarpes utilīta ir nepieciešama, jo tā padara tīmekļa lapu pievilcīgu. Ja tīmekļa lapai nav atbilstošas atstarpes starp elementiem, tā nepiesaista lietotājus.
Ņemsim koda piemēru, lai piešķirtu vienādu atstarpi starp režģa elementiem.
1. metode: vietas piešķiršana uz X ass.
Vienāda atstarpe, kas piešķirta uz x ass, veido vienādu atstarpi pa labi un pa kreisi no elementa. Lai piešķirtu vietu uz x ass, izmantojiet šādu sintaksi:
telpa - x - { Izmērs }
Lielums var būt jebkurš vesels skaitlis.
Apsveriet tālāk norādīto kodu, lai piešķirtu vienādu vietu uz x ass:
< ķermeni >< div klasē = 'mx-4 grid grid-cols-4 space-x-4' >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
ķermeni >
Šajā kodā:
- ' mx-4 ” pievieno 4 pikseļu piemali uz x ass (pa labi un pa kreisi).
- ' režģis ” klase izveido režģi.
- ' režģis-cols-4 ” izveidojiet 4 kolonnas režģī.
- ' telpa-x-4 ” pievieno 4 pikseļu atstarpi starp režģa elementiem.
- ' bg-green-400 ” iestata fona krāsu uz zaļu.
- ' h-16 ” iestata augstumu uz 16 pikseļiem.
- ' noapaļots-lg ” padara stūri apaļu, un apmales rādiuss ir liels.
- ' robeža-2 ” izveido 2 pikseļu apmali ap elementu.
- ' apmale-zaļa-800 ” padara apmali tumši zaļu.
Izvade
Priekšskatiet iepriekš minētā koda radīto izvadi:
Var redzēt, ka starp elementiem ir piešķirta 4 pikseļu atstarpe.
2. metode: vietas piešķiršana uz y ass.
Atstarpi uz y ass var piešķirt līdzīgi iepriekšminētajai metodei, veicot nelielas izmaiņas iepriekš minētajā kodā. Tas piešķir atstarpes gar y asi (augšējā un apakšējā). Sintakse tam ir:
Tālāk norādīto kodu var ieviest, lai pievienotu atstarpes gar y asi:
< ķermeni >< div klasē = 'mx-4 my-4 space-y-4' >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div klasē = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
ķermeni >
Šajā kodā:
- ' mx-4 ” pievieno 4 pikseļu piemaļu pa kreisi un pa labi no elementiem, lai padarītu izvadi optimizētāku.
- ' mans-4 ” pievieno 4 pikseļu piemali uz y ass (augšējā un apakšējā).
- ' atstarpe-y-4 ” pievieno 4 pikseļu atstarpi uz y ass (augšējā un apakšējā).
Izvade
Saglabājiet iepriekš minēto kodu un priekšskatiet tā izveidoto tīmekļa lapu, lai redzētu atstarpes kā:
Tas viss attiecas uz vienādas vietas piešķiršanu starp elementiem.
Secinājums
Lai programmā Tailwind piešķirtu vienādu vietu starp vairākiem elementiem, lietotāji var izmantot “ atstarpe-{x/y}-{size} ” lietderības klase un norādiet vesela skaitļa vērtību kā lielumu atbilstoši prasībai. Vienāda atstarpe starp elementiem padara izvadi mērogojamāku, un skatītāji turpina iesaistīties tīmekļa lapā. Šajā ziņojumā ir sniegta metode, kā piešķirt vienādu atstarpi starp vairākiem Tailwind elementiem.