Tulisan ini akan menggambarkan:
- Bagaimana Cara Menggunakan 'overflow-auto' di Tailwind?
- Bagaimana Cara Menggunakan 'overflow-scroll' di Tailwind?
Bagaimana Cara Menggunakan 'overflow-auto' di Tailwind?
“ luapan-otomatis ” kelas secara otomatis menambahkan bilah gulir saat konten meluap. Itu tidak menampilkan bilah gulir jika konten tidak meluap. Untuk menggunakan 'overflow-auto' di Tailwind, buat program HTML dan tambahkan ' luapan-otomatis ” kelas utilitas ke elemen yang diinginkan dalam program HTML.
Sintaksis
< elemen kelas = 'meluap-otomatis ...' > ... elemen >
Contoh
Dalam contoh ini, kita akan menerapkan 'meluap-otomatis' utilitas ke
wadah: < tubuh >
< div kelas = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 pembenaran teks' >
Tailwind CSS menyediakan berbagai utilitas 'overflow', seperti 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible', dll. Utilitas ini menentukan cara elemen tertentu menangani konten yang melebihi container ukuran. Setiap utilitas menawarkan fungsionalitas unik, namun tujuan akhirnya tetap sama, yaitu untuk mengontrol perilaku luapan dari elemen yang dipilih.
< / div >
< / tubuh >
- 'meluap-otomatis' class digunakan untuk menambahkan scrollbar ke wadah dan tampilkan hanya saat menggulir diperlukan.
- “bg-ungu-300” class menyetel warna ungu ke warna latar wadah.
- 'p-4' kelas menetapkan 4 unit bantalan di semua sisi wadah.
- 'mx-16' kelas menerapkan 16 unit margin pada sumbu x wadah.
- “mt-5” kelas menerapkan 5 unit margin ke bagian atas wadah.
- “h-32” class mengatur ketinggian wadah menjadi 32 unit.
- 'membenarkan teks' kelas membenarkan teks konten di dalam wadah.
Keluaran
Output di atas menunjukkan bilah gulir vertikal saat teks meluap. Hal ini menunjukkan bahwa 'meluap-otomatis' utilitas telah berhasil diterapkan ke elemen.
Bagaimana Cara Menggunakan 'overflow-scroll' di Tailwind?
Utilitas ini menambahkan bilah gulir ke wadah dan selalu menampilkannya meskipun pengguliran tidak diperlukan. Ini juga memungkinkan pengguliran ke segala arah. Untuk menggunakan 'overflow-scroll' di Tailwind, buatlah program HTML dan tambahkan 'meluap-gulir' kelas utilitas untuk elemen tertentu dalam program HTML.
Sintaksis
< elemen kelas = 'meluap-gulir ...' > ... elemen > Contoh
Dalam contoh ini, kita akan menerapkan 'meluap-gulir' utilitas ke
< div kelas = 'meluap-gulir bg-ungu-300 p-4 mx-16 mt-5 h-32 pembenaran teks' >
Tailwind CSS menyediakan berbagai utilitas 'overflow', seperti 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible', dll. Utilitas ini menentukan cara elemen tertentu menangani konten yang melebihi container ukuran. Setiap utilitas menawarkan fungsionalitas unik, namun tujuan akhirnya tetap sama, yaitu untuk mengontrol perilaku luapan dari elemen yang dipilih.
< / div >
< / tubuh >
Di sini, 'meluap-gulir' class digunakan untuk menambahkan scrollbar ke
wadah dan selalu tunjukkan pada mereka.Keluaran
Pada output di atas, scrollbar vertikal dan horizontal dapat dilihat. Hal ini menunjukkan bahwa 'meluap-gulir' utilitas telah berhasil diterapkan ke elemen.
Kesimpulan
Untuk menggunakan 'overflow-auto' dan 'overflow-scroll' di Tailwind, Anda harus menambahkan 'meluap-otomatis' Dan 'meluap-gulir' kelas utilitas ke elemen yang diinginkan dalam program HTML. Kedua kelas utilitas menambahkan bilah gulir ke elemen yang ditentukan. Namun, kelas 'overflow-auto' menampilkan scrollbar hanya saat pengguliran diperlukan sementara kelas 'overflow-scroll' selalu menampilkannya meskipun pengguliran tidak diperlukan. Tulisan ini telah mengilustrasikan metode untuk menggunakan 'overflow-auto' dan 'overflow-scroll' di Tailwind.