Misalkan pengguna harus membuat daftar item untuk halaman web mereka. Untuk mempermudah proses perancangan, Tailwind menyediakan berbagai kelas gaya daftar yang dapat digunakan untuk mengubah jenis, posisi, dan perataan elemen daftar.
Artikel ini akan memberikan prosedur untuk menyetel jenis gaya daftar di Tailwind.
Bagaimana Cara Mengatur Jenis Gaya Daftar di Tailwind?
Tailwind menyediakan tiga jenis gaya daftar default. Mereka digunakan untuk menyediakan “ penanda ” gaya untuk item daftar. Tiga kelas tipe gaya daftar default dijelaskan sebagai berikut:
- daftar-disk: Kelas ini akan memberikan poin-poin bulat sebagai penanda daftar.
- daftar-desimal: Kelas ini akan memberikan angka desimal sebagai penanda daftar.
- daftar-tidak ada: Kelas ini akan menghapus penanda daftar apa pun dari item.
Sintaks untuk menggunakan tipe gaya daftar adalah sebagai berikut:
< jalan kelas = 'daftar-{gaya}' > < / jalan >
Untuk pemahaman yang lebih baik, demonstrasi yang disediakan di bawah ini akan menggunakan sintaks yang ditentukan di atas untuk memberikan gaya penanda yang berbeda ke item daftar. Dalam contoh ini, tiga elemen daftar akan dibuat dan dilengkapi dengan gaya penanda berbeda menggunakan kelas gaya daftar default di Tailwind:
< P kelas = 'teks-pusat teks-xl font-tebal' >Daftar Berbeda Default Gaya Ketik di Tailwind< / P >
< saudara >
< div kelas = 'flex justify-center space-x-20 bg-slate-100 round-lg mx-4 p-2' >
< jalan kelas = 'daftar-disk' >
DAFTAR # 1
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< jalan kelas = 'daftar-desimal' >
DAFTAR # 2
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< jalan kelas = 'daftar-tidak ada' >
DAFTAR # 3
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< / div >
Penjelasan kode di atas adalah sebagai berikut:
- A ' ” elemen dibuat dengan “ xl ” ukuran font dan “ berani ” berat font. Konten teks elemen diposisikan di tengah menggunakan “ pusat teks ' kelas.
- Setelah jeda baris, “ ” elemen dibuat dan dilengkapi dengan “ melenturkan ' kelas. Ini akan membuat wadah yang akan menyelaraskan item anak secara horizontal.
- “ justifikasi-pusat Kelas ” akan menempatkan item di tengah wadah.
- “ spasi-x-{ukuran} Kelas ” menyediakan ruang horizontal antar item.
- “ bg-{warna}-{angka} Kelas ” menyetel latar belakang wadah ke warna yang ditentukan.
- “ bulat-lg ” kelas membuat sudut wadah membulat.
- “ mx-4 ” kelas memberikan margin horizontal ke wadah fleksibel.
- “ hal-2 ” kelas menyediakan padding ke wadah fleksibel.
- Selanjutnya, tiga elemen daftar dibuat dan disediakan dengan tipe gaya daftar yang berbeda menggunakan “ daftar-{type} ' kelas.
Keluaran:
Dari output di bawah ini terlihat bahwa daftar pertama menggunakan poin-poin, daftar kedua menggunakan angka desimal, dan daftar ketiga tidak menggunakan penanda item apa pun.
Menggunakan Kelas Gaya Daftar Dengan Varian Negara di Tailwind
Kelas gaya daftar dapat digunakan dengan varian status default di Tailwind untuk membuat desain lebih dinamis. Dengan menggunakan varian status hover, fokus, dan aktif, pengguna dapat mengubah gaya penanda item daftar setiap kali status tertentu dipicu. Sintaks penggunaan kelas gaya daftar dengan varian status adalah sebagai berikut:
< jalan kelas = '{state}:daftar-{style}...' > < / jalan >Berikut adalah contoh penggunaan tipe gaya daftar dengan status “hover”, di mana pengguna dapat mengubah gaya penanda dengan mengarahkan kursor ke blok daftar:
< P kelas = 'teks-pusat teks-xl font-tebal' >Arahkan Kursor ke Blok Daftar untuk Mengubah Gaya Penanda< / P >
< saudara >
< div kelas = 'flex justify-center space-x-20 bg-slate-100 round-lg mx-4 p-2' >
< jalan kelas = 'daftar-cakram hover: daftar-desimal' >
DAFTAR # 1
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< / div >Dalam kode di atas, daftarnya dilengkapi dengan “ daftar-disk ” kelas sebagai tipe gaya daftar default. Namun, menggunakan “ hover:daftar-desimal kelas ”, tipe gaya daftar akan diubah ketika pengguna mengarahkan kursor mouse ke blok daftar.
Keluaran:
Output di bawah ini menunjukkan bahwa gaya tipe daftar berubah dari daftar berpoin menjadi daftar bernomor ketika kursor melayang di atas blok daftar.
Menggunakan Kelas Gaya Daftar Dengan Breakpoint di Tailwind
Breakpoint digunakan untuk mendesain tata letak responsif untuk berbagai ukuran layar. Lima breakpoint default yang disediakan Tailwind adalah sm, md, lg, xl, dan 2xl. Sintaks berikut digunakan untuk menyediakan breakpoint pada kelas gaya tipe daftar:
< jalan kelas = '{breakpoint}:daftar-{style}...' > < / jalan >Berikut adalah contoh penggunaan tipe gaya daftar dengan tanda “ md ” breakpoint, di mana gaya penanda akan berubah ketika ukuran layar mencapai breakpoint “md”:
< P kelas = 'teks-pusat teks-xl font-tebal' > Tingkatkan Layar Ukuran untuk Mengubah Gaya Penanda< / P >
< saudara >
< div kelas = 'flex justify-center space-x-20 bg-slate-100 round-lg mx-4 p-2' >
< jalan kelas = 'daftar-cakram md:daftar-desimal' >
DAFTAR # 1
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< / div >Dalam kode di atas, daftarnya dilengkapi dengan “ daftar-disk ” kelas sebagai gaya default. Namun, menggunakan “ md:daftar-desimal ” kelas tipe gaya daftar akan berubah untuk ukuran layar “md”.
Keluaran:
Seperti yang Anda lihat pada output di bawah, tipe gaya daftar berubah dari disk ke desimal ketika ukuran layar mencapai “ md ” titik henti sementara.
Sekian tentang pengaturan Jenis Gaya Daftar di Tailwind.
Kesimpulan
Tailwind menyediakan tiga kelas tipe gaya daftar yang telah ditentukan sebelumnya untuk mengubah gaya daftar suatu elemen. “ daftar-disk Kelas ” memberikan poin-poin untuk membuat daftar item. “ daftar-desimal Kelas ” memberikan nomor untuk membuat daftar item. “ daftar-tidak ada ” kelas membuat daftar yang tidak menggunakan penanda item apa pun. Artikel ini telah menyediakan prosedur untuk menyetel jenis gaya daftar di Tailwind.