Šajā rakstā tiks parādītas utilītas, ko var izmantot, lai kontrolētu novietoto elementu izvietojumu tīmekļa lapā.
Tailwind utilītas, ko izmanto, lai kontrolētu novietoto elementu izvietojumu?
Tailwind CSS utilīta, kas īpaši nodarbojas ar pozicionētu elementu izvietošanu gan horizontālajā, gan vertikālajā asī, ir ' Augšā | Pa labi | Apakšā | Pa kreisi ”. Tāpat kā citas utilītas, tas nodrošina arī dažādas klases, kas var iestatīt pozicionēto elementu dažādās vietās, dažas no šīm klasēm ir norādītas zemāk:
- inset-{placementValue}
- sākums-{placementValue}
- augšā-{placementValue}
- beigu-{placementValue}
- apakšā-{placementValue}
- pa kreisi-{placementValue}
- pa labi-{placementValue}
Tagad piedāvāsim praktisku piemēru, kā izmantot dažas no šīm nodarbībām labākai izpratnei.
Piemērs: pozicionēta elementa izvietošana, izmantojot Tailwind CSS utilītas
Šajā piemērā iepriekš aprakstītā utilīta tiks izmantota, lai novietotu pozicionēto elementu dažādās tīmekļa lapas vietās, kā parādīts tālāk:
< ķermeni klasē = 'grid grid-cols-3' >
< div klasē = 'relatīvais h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch noapaļots' >
< div klasē = 'absolūtais kreisais-0 augšējais-0 h-16 w-16 bg-blue-400 noapaļots p-4' > 1. punkts < / div >
< / div >
< div klasē = 'relatīvais h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch noapaļots' >
< div klasē = 'absolute inset-x-0 top-0 h-16 bg-blue-400 rounded p-4' > 2. punkts < / div >
< / div >
< div klasē = 'relatīvais h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch noapaļots' >
< div klasē = 'absolūtais inset-0 bg-blue-400 noapaļots p-4' > 3. punkts < / div >
< / div >
< div klasē = 'relatīvais h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch noapaļots' >
< div klasē = 'absolute inset-y-0 right-0 w-16 bg-blue-400 rounded p-4' > 4. punkts < / div >
< / div >
< div klasē = 'relatīvais h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch noapaļots' >
< div klasē = 'absolūtais apakšējais-0 pa labi-0 h-16 w-16 bg-blue-400 noapaļots p-4' > 5. punkts < / div >
< / div >
< / ķermeni >
Iepriekš minētā koda apraksts:
- Vispirms izveidojiet piecus vecākus ' div ” elementi un lietot dažādas Tailwind CSS klases, lai iestatītu relatīvo pozīciju, augstumu, platumu, fonu, polsterējumu, malu utt.
- Pēc tam izveidojiet ligzdotu ' div ” elements katrā vecākajā “div”. Izvietojums tiks veikts šim ligzdotajam “div” elementam.
- Pēc tam izmantojiet aizmugurējā vēja CSS klases “ absolūts ”, “ h ”, “ In ”, “ bg ”,” lpp ', un ' noapaļots ', lai veidotu ligzdoto ' div ” elements.
- Pēc tam, sākot no ligzdotā div viena līdz pieci, piešķiriet jaunas klases “ pa kreisi-0 top-0 ”, “ ieliktnis-x-0 ”, “ ieliktnis-0 ”, “ ieliktnis-y-0 pa labi-0 ', un ' apakšā-0 pa labi-0 ” attiecīgi.
- Šīs klases iestata ligzdoto div elementu pozīciju augšējā kreisajā stūrī, aptver augšējo pozīciju, aptver visu vecākvietu, aptver labo pusi un attiecīgi apakšējo kreiso pozīciju.
Pēc izpildes div elementu priekšskatījums izskatās šādi:
Izvade parāda, ka novietotie elementi ir novietoti vēlamajās pozīcijās.
Secinājums
' Augšā | Pa labi | Apakšā | Pa kreisi ” Tailwind utilīta tiek izmantota, lai kontrolētu elementu izvietojumu tīmekļa lapā. Tas izmanto vairākas klases, lai atlasītu katru pozīciju, un pēc tam pārvieto atlasīto elementu šajā vietā atbilstoši prasībām. Šajās klasēs izvietotie elementi galvenokārt tiek novietoti kreisajā, labajā, apakšā un augšpusē. Tie var palīdzēt aptvert visu apgabalu, aptvert konkrētus virzienus, piemēram, pa kreisi vai augšpusi, un tā tālāk. Šajā rakstā ir veiksmīgi izskaidrotas utilītas, kuras var izmantot, lai kontrolētu novietoto elementu izvietojumu.