Tento blog poskytne predstavu o priradení rovnakého priestoru medzi viaceré prvky v Tailwinde.
Ako priradiť rovnaký priestor medzi viacerými prvkami v Tailwind?
Používatelia môžu medzi prvkami priradiť rovnaké medzery pomocou „ medzera-{x/y}-{veľkosť} “úžitková trieda. Používatelia môžu pridať priestor na osi x alebo y zadaním celočíselnej hodnoty. Pomôcka na vytváranie medzier je potrebná, pretože robí webovú stránku atraktívnou. Ak webová stránka nemá správne medzery medzi prvkami, nepritiahne používateľov.
Zoberme si príklad kódu na priradenie rovnakého priestoru medzi prvkami mriežky.
Metóda 1: Priradenie priestoru na osi X.
Rovnaký priestor priradený na osi x vytvára rovnaký priestor napravo a naľavo od prvku. Ak chcete priradiť priestor na osi x, použite nasledujúcu syntax:
priestor - X - { veľkosť }
Veľkosť môže byť ľubovoľná celočíselná hodnota.
Zvážte nasledujúci kód na priradenie rovnakého priestoru na osi x:
< telo >< div trieda = 'mx-4 grid grid-cols-4 space-x-4' >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
telo >
V tomto kóde:
- “ mx-4 ” pridá okraj 4 px na osi x (vpravo a vľavo).
- ' mriežka ” vytvorí mriežku.
- ' grid-cols-4 “ vytvorte 4 stĺpce v mriežke.
- ' medzera-x-4 “ pridá medzi prvky mriežky medzeru 4 pixely.
- “ bg-green-400 ” nastaví farbu pozadia na zelenú.
- “ h-16 ” nastaví výšku na 16px.
- ' zaoblené-lg “ zaobľuje roh a polomer okraja je veľký.
- ' hranica-2 ” vytvorí okolo prvku 2px orámovanie.
- “ hranica-zelená-800 “ zmení okraj na tmavozelený.
Výkon
Ukážka výstupu vytvoreného vyššie uvedeným kódom:
Je vidieť, že medzi prvkami je priradená medzera 4px.
Metóda 2: Pridelenie priestoru na osi y.
Medzery môžu byť priradené na osi y podobne ako vyššie uvedený spôsob, malými zmenami vo vyššie uvedenom kóde. Priraďuje medzery pozdĺž osi y (hore a dole). Jeho syntax je:
Nižšie uvedený kód je možné implementovať na pridanie medzier pozdĺž osi y:
< telo >< div trieda = 'mx-4 my-4 medzera-y-4' >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div trieda = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
telo >
V tomto kóde:
- “ mx-4 ” pridáva 4px okraj naľavo a napravo od prvkov, aby bol výstup optimalizovanejší.
- “ moja-4 “ pridá na osi y okraj 4 pixely (hore a dole).
- “ medzera-y-4 ” pridá priestor 4px na osi y (hore a dole).
Výkon
Uložte vyššie uvedený kód a ukážte webovú stránku, ktorú vytvoril, aby ste videli medzery ako:
To je všetko o priradení rovnakého priestoru medzi prvkami.
Záver
Na pridelenie rovnakého priestoru medzi viaceré prvky v Tailwinde môžu používatelia použiť „ medzera-{x/y}-{veľkosť} ” úžitková trieda a špecifikujte celočíselnú hodnotu ako veľkosť podľa požiadavky. Rovnaké rozostupy medzi prvkami robia výstup škálovateľnejším a diváci sú stále v kontakte s webovou stránkou. Tento príspevok poskytuje metódu na priradenie rovnakého priestoru medzi viaceré prvky v Tailwinde.