Artikel ini akan mendemonstrasikan utilitas yang dapat digunakan untuk mengontrol penempatan elemen yang diposisikan pada halaman web.
Utilitas Tailwind Digunakan untuk Mengontrol Penempatan Elemen yang Diposisikan?
Utilitas Tailwind CSS yang secara khusus berhubungan dengan penempatan elemen yang diposisikan pada sumbu horizontal atau vertikal adalah “ Atas | Benar | Bawah | Kiri ”. Sama seperti utilitas lainnya, ia juga menyediakan berbagai kelas yang dapat mengatur elemen yang diposisikan di berbagai tempat, beberapa kelas tersebut disebutkan di bawah ini:
- sisipan-{placementValue}
- mulai-{placementValue}
- atas-{placementValue}
- akhir-{placementValue}
- bawah-{placementValue}
- kiri-{placementValue}
- kanan-{placementValue}
Sekarang, mari kita lihat contoh praktis penggunaan beberapa kelas ini untuk pemahaman yang lebih baik.
Contoh: Penempatan Elemen yang Diposisikan Menggunakan Utilitas Tailwind CSS
Dalam contoh ini, utilitas yang dijelaskan di atas akan digunakan untuk menempatkan elemen yang diposisikan di tempat berbeda pada halaman web, seperti yang ditunjukkan di bawah ini:
< tubuh kelas = 'grid grid-cols-3' >
< div kelas = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 pusat teks justify-stretch membulat' >
< div kelas = 'absolut kiri-0 atas-0 h-16 w-16 bg-biru-400 bulat p-4' > Barang 1 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 pusat teks justify-stretch membulat' >
< div kelas = 'inset-x-0 mutlak top-0 h-16 bg-biru-400 bulat p-4' > Barang 2 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 pusat teks justify-stretch dibulatkan' >
< div kelas = 'inset absolut-0 bg-biru-400 bulat p-4' > Angka 3 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 pusat teks justify-stretch dibulatkan' >
< div kelas = 'inset-y-0 mutlak kanan-0 w-16 bg-biru-400 bulat p-4' > Angka 4 < / div >
< / div >
< div kelas = 'relatif h-32 w-32 bg-orange-200 p-4 m-4 pusat teks justify-stretch dibulatkan' >
< div kelas = 'mutlak bawah-0 kanan-0 h-16 w-16 bg-biru-400 bulat p-4' > Angka 5 < / div >
< / div >
< / tubuh >
Deskripsi kode di atas:
- Pertama, buat lima induk “ div ” elemen dan terapkan berbagai kelas Tailwind CSS untuk mengatur posisi relatif, tinggi, lebar, latar belakang, padding, margin, dan sebagainya.
- Selanjutnya, buat “ div ” elemen di dalam setiap induk “div”. Penempatannya akan dilakukan untuk elemen “div” bersarang ini.
- Kemudian, terapkan kelas CSS tailwind “ mutlak ”, “ H ”, “ Di dalam ”, “ bg ”, ” P ', Dan ' bulat ” untuk menata gaya yang disarangkan “ div ” elemen.
- Setelah itu, mulai dari div bersarang satu sampai lima, tetapkan kelas baru “ kiri-0 atas-0 ”, “ sisipan-x-0 ”, “ sisipan-0 ”, “ sisipkan-y-0 kanan-0 ', Dan ' bawah-0 kanan-0 ” masing-masing.
- Kelas-kelas ini mengatur posisi elemen div bersarang di sudut kiri atas, menutupi posisi atas, menutupi seluruh ruang induk, menutupi sisi kanan, dan masing-masing menutupi posisi kiri bawah.
Setelah eksekusi, pratinjau elemen div terlihat seperti ini:
Outputnya menunjukkan bahwa elemen yang diposisikan ditempatkan pada posisi yang diinginkan.
Kesimpulan
“ Atas | Benar | Bawah | Kiri ” Utilitas Tailwind digunakan untuk mengontrol penempatan elemen di halaman web. Ia menggunakan beberapa kelas untuk menargetkan setiap posisi dan kemudian memindahkan elemen yang dipilih di tempat tersebut sesuai dengan kebutuhan. Kelas-kelas ini terutama menempatkan elemen yang diposisikan di kiri, kanan, bawah, dan atas. Mereka dapat membantu mencakup seluruh area, mencakup arah tertentu seperti kiri atau atas, dan seterusnya. Artikel ini telah berhasil menjelaskan utilitas yang dapat digunakan untuk mengontrol penempatan elemen yang diposisikan.