Pengguliran vertikal dan horizontal adalah cara menavigasi halaman web menggunakan mouse, touchpad, atau jari. Pengguliran vertikal digunakan saat konten elemen melebihi tinggi wadah. Sementara pengguliran horizontal digunakan saat konten dalam suatu elemen melebihi lebar penampung. Pengguliran vertikal memungkinkan pengguna untuk memindahkan halaman web ke atas dan ke bawah sementara pengguliran horizontal memungkinkan halaman untuk bergerak ke kiri dan ke kanan. Tailwind CSS menyediakan kelas utilitas untuk mengaktifkan pengguliran vertikal dan horizontal pada halaman web.
Artikel ini akan memberikan contoh:
- Bagaimana Cara Mengaktifkan Pengguliran Vertikal di Tailwind?
- Bagaimana Cara Mengaktifkan Pengguliran Horizontal di Tailwind?
Bagaimana Cara Mengaktifkan Pengguliran Vertikal di Tailwind?
Untuk mengaktifkan pengguliran vertikal di Tailwind, gunakan tombol “ luapan-y-gulir ” kelas utilitas dengan elemen yang diinginkan dalam program HTML. Ini memungkinkan pengguliran vertikal dan selalu menampilkan bilah gulir kecuali pengguna telah menonaktifkan bilah gulir 'selalu terlihat' di pengaturan sistem mereka.
Sintaksis
< elemen kelas = 'meluap-y-gulir ...' > ... elemen >
Contoh: Mengaktifkan Pengguliran Vertikal
Dalam contoh ini, kami akan membuat wadah fleksibel dengan beberapa item fleksibel di kolom dan menerapkan ' luapan-y-gulir ” utilitas untuk itu:
< tubuh >
< div kelas = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div kelas = 'bg-kuning-400 p-2 m-2' > 1 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 2 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 3 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 4 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 5 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 6 div >
div >
tubuh >
Di sini, di induk
- “ melenturkan ” digunakan untuk menyesuaikan ukuran elemen turunan berdasarkan ruang yang tersedia dengan membuat tata letak yang fleksibel.
- “ flex-col ” kelas mengatur arah fleksibel wadah ke kolom.
- “ luapan-y-gulir ” kelas memungkinkan pengguliran vertikal.
- “ bg-ungu-700 ” kelas mengatur warna ungu ke latar belakang wadah.
- “ hal-4 ” kelas menetapkan 4 unit bantalan di semua sisi wadah.
- “ mx-14 ” kelas menerapkan 14 unit margin pada sumbu x wadah.
- “ mt-5 ” kelas menerapkan 5 unit margin ke bagian atas wadah.
- “ h-36 ” kelas mengatur ketinggian wadah menjadi 36 unit.
Di anak
- “ bg-kuning-400 ” kelas menyetel latar belakang item kisi menjadi kuning.
- “ p-2 ” class menambahkan 3 unit bantalan ke konten di dalam item fleksibel.
- “ m-2 ” kelas menetapkan margin 2 unit ke item fleksibel.
Keluaran
Pada output di atas, terlihat bahwa pengguliran vertikal telah berhasil diaktifkan.
Bagaimana Cara Mengaktifkan Pengguliran Horizontal di Tailwind?
Untuk mengaktifkan pengguliran horizontal di Tailwind, gunakan tombol “ luapan-x-gulir ” kelas utilitas dengan elemen spesifik dalam program HTML. Ini memungkinkan pengguliran horizontal dan selalu menampilkan bilah gulir kecuali pengguna telah menonaktifkan bilah gulir 'selalu terlihat' di pengaturan sistem mereka.
Sintaksis
< elemen kelas = 'meluap-x-gulir ...' > ... elemen >
Contoh: Mengaktifkan Pengguliran Horizontal
Dalam contoh ini, kami akan membuat wadah fleksibel dengan beberapa item fleksibel berturut-turut dan menerapkan ' luapan-x-gulir ” utilitas untuk itu:
< tubuh >< div kelas = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div kelas = 'bg-kuning-400 p-2 m-2' > 1 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 2 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 3 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 4 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 5 div >
< div kelas = 'bg-kuning-400 p-2 m-2' > 6 div >
div >
tubuh >
Di sini, di induk
Keluaran
Output di atas menunjukkan bahwa pengguliran horizontal telah berhasil diaktifkan.
Kesimpulan
Untuk mengaktifkan pengguliran vertikal dan horizontal di Tailwind, tombol “ luapan-y-gulir ' Dan ' luapan-x-gulir ” kelas utilitas digunakan masing-masing. Utilitas ini diterapkan ke elemen yang diinginkan dalam program HTML untuk mengaktifkan pengguliran vertikal dan horizontal dan selalu menampilkan bilah gulir. Artikel ini telah menunjukkan metode untuk mengaktifkan pengguliran vertikal dan horizontal di Tailwind.