Penatalan menegak dan mendatar ialah cara menavigasi halaman web menggunakan tetikus, pad sentuh atau jari. Penatalan menegak digunakan apabila kandungan elemen melebihi ketinggian bekas. Manakala tatal mendatar digunakan apabila kandungan dalam elemen melebihi lebar bekas. Penatalan menegak membolehkan pengguna mengalihkan halaman web ke atas dan ke bawah manakala penatalan mendatar membolehkan halaman bergerak ke kiri dan ke kanan. Tailwind CSS menyediakan kelas utiliti untuk mendayakan tatal menegak dan mendatar pada halaman web.
Artikel ini akan menjadi contoh:
- Bagaimana untuk Mendayakan Tatal Menegak dalam Tailwind?
- Bagaimana untuk Mendayakan Tatal Mendatar dalam Tailwind?
Bagaimana untuk Mendayakan Tatal Menegak dalam Tailwind?
Untuk mendayakan tatal menegak dalam Tailwind, gunakan ' limpahan-y-scroll ” kelas utiliti dengan elemen yang dikehendaki dalam program HTML. Ia membenarkan penatalan menegak dan sentiasa menunjukkan bar skrol melainkan pengguna telah melumpuhkan bar skrol 'sentiasa kelihatan' dalam tetapan sistem mereka.
Sintaks
< unsur kelas = 'overflow-y-scroll ...' > ... unsur >
Contoh: Mendayakan Tatal Menegak
Dalam contoh ini, kami akan mencipta bekas fleksibel dengan beberapa item fleksibel dalam lajur dan menggunakan ' limpahan-y-scroll ” utiliti kepadanya:
< badan >
< 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 >
badan >
Di sini, dalam induk
- “ lentur kelas ” digunakan untuk melaraskan saiz elemen kanak-kanak berdasarkan ruang yang tersedia dengan mencipta susun atur yang fleksibel.
- “ flex-col ” kelas menetapkan arah lentur bekas kepada lajur.
- “ limpahan-y-scroll ” kelas membolehkan tatal menegak.
- “ bg-ungu-700 ” kelas menetapkan warna ungu kepada latar belakang bekas.
- “ p-4 ” kelas menetapkan 4 unit padding pada semua sisi bekas.
- “ mx-14 ” kelas menggunakan 14 unit margin pada paksi-x bekas.
- “ mt-5 ” kelas menggunakan 5 unit jidar pada bahagian atas bekas.
- “ h-36 ” kelas menetapkan ketinggian bekas kepada 36 unit.
Dalam anak
- “ bg-kuning-400 ” kelas menetapkan latar belakang item grid kepada kuning.
- “ p-2 ” kelas menambah 3 unit padding pada kandungan di dalam item flex.
- “ m-2 kelas ” menetapkan margin 2 unit kepada item fleksibel.
Pengeluaran
Dalam output di atas, dapat dilihat bahawa tatal menegak telah berjaya didayakan.
Bagaimana untuk Mendayakan Tatal Mendatar dalam Tailwind?
Untuk mendayakan tatal mendatar dalam Tailwind, gunakan ' limpahan-x-scroll ” kelas utiliti dengan elemen khusus dalam program HTML. Ia membolehkan penatalan mendatar dan sentiasa menunjukkan bar skrol melainkan pengguna telah melumpuhkan bar skrol 'sentiasa kelihatan' dalam tetapan sistem mereka.
Sintaks
< unsur kelas = 'overflow-x-scroll ...' > ... unsur >
Contoh: Mendayakan Tatal Mendatar
Dalam contoh ini, kami akan mencipta bekas fleksibel dengan beberapa item fleksibel berturut-turut dan menggunakan ' limpahan-x-scroll ” utiliti kepadanya:
< badan >< div kelas = 'lentur 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 >
badan >
Di sini dalam induk
Pengeluaran
Output di atas menunjukkan bahawa tatal mendatar telah berjaya didayakan.
Kesimpulan
Untuk mendayakan tatal menegak dan mendatar dalam Tailwind, ' limpahan-y-scroll ” dan “ limpahan-x-scroll ” kelas utiliti digunakan masing-masing. Utiliti ini digunakan pada elemen yang dikehendaki dalam program HTML untuk membolehkan penatalan menegak dan mendatar dan sentiasa menunjukkan bar skrol. Artikel ini telah menunjukkan kaedah untuk mendayakan tatal menegak dan mendatar dalam Tailwind.