Artikel ini akan menyediakan prosedur untuk menetapkan imej gaya senarai bagi blok senarai dalam Tailwind.
Bagaimana untuk Menetapkan Kelas Imej Gaya Senarai dalam Tailwind?
Kelas Imej Gaya Senarai digunakan untuk menyediakan imej sebagai penanda senarai dalam Tailwind. Secara lalai, Tailwind hanya menyediakan ' senarai-imej-tiada ” kelas yang hanya boleh digunakan untuk mengalih keluar sebarang penanda imej yang ditetapkan sebelum ini untuk senarai.
Sintaks
Sintaks untuk menggunakan kelas imej gaya senarai dalam Tailwind adalah seperti berikut:
< ul kelas = 'imej senarai-[url({Url Imej})]' > < / ul >
Sintaks ini menyediakan imej yang ditentukan sebagai penanda untuk elemen senarai.
< ul kelas = 'imej senarai-tiada' > < / ul >
Sintaks ini mengalih keluar sebarang imej yang ditetapkan sebelum ini sebagai penanda untuk elemen senarai.
Mari gunakan sintaks yang ditakrifkan di atas untuk menggunakan imej sebagai penanda dalam senarai tidak tertib. Dalam demonstrasi ini, pengguna mempunyai imej bernama ' penunjuk tangan.png ” hadir di dalam folder projek Tailwind yang sama. Sekiranya imej itu terdapat dalam beberapa folder lain, pengguna perlu menyediakan laluan penuh ke kelas imej gaya senarai. Kami akan menggunakan imej itu sebagai penanda senarai menggunakan kelas 'imej senarai'.
< div kelas = 'pusat justify flex' >
< ul kelas = ' senarai-dalam senarai-imej-[url(handpointer.png)] space-y-2 bulat-md bg-hijau-400 p-2' >
SENARAI CONTOH
< itu >Ini Item Pertama< / itu >
< itu >Ini adalah Item Kedua< / itu >
< itu >Ini adalah Item Ketiga< / itu >
< / ul >
< / div >
Penjelasan kod di atas adalah seperti berikut:
- A ' elemen ' dicipta dan disediakan dengan ' lentur ” kelas yang menjajarkan item secara mendatar dalam bekas.
- ' justify-center ” kelas menjajarkan item kanak-kanak ke tengah bekas.
- Seterusnya, '
- Ia disediakan dengan ' senarai-dalam ” kelas yang akan meletakkan penanda item senarai yang ditentukan di dalam blok senarai.
- ' senarai-imej-[url({Imej Url})] kelas ” digunakan untuk menyediakan imej sebagai penanda item senarai kepada elemen.
- ' ruang-y-{nombor} kelas ” menyediakan ruang menegak antara item senarai.
- ' bulat-md ” kelas menjadikan penjuru blok senarai dibulatkan.
- ' bg-{warna}-{nombor} kelas ” digunakan untuk menyediakan warna latar belakang kepada blok senarai.
- ' p-2 ” kelas menyediakan sempadan kepada elemen senarai.
- Tiga item senarai dibuat menggunakan '
” tag. Pengeluaran:
Ia boleh dilihat dalam output, bahawa imej penunjuk tangan ditetapkan sebagai penanda untuk item senarai:
Menggunakan Varian Negeri Dengan Kelas Imej Gaya Senarai dalam Tailwind
Tailwind menyediakan pelbagai varian keadaan seperti hover, fokus dan aktif yang membantu dalam mencipta reka bentuk interaktif. Untuk menggunakan kelas imej gaya senarai dengan keadaan ini, sintaks berikut digunakan:
< ul kelas = '{state}:list-image-{none OR image url}' > < / ul >Mari gunakan sintaks yang ditakrifkan di atas untuk menggunakan sifat imej gaya senarai dengan ' berlegar ” negeri di Tailwind. Dalam demonstrasi ini, senarai akan disediakan dengan imej sebagai penanda senarai. Walau bagaimanapun, menggunakan ' berlegar ” nyatakan, imej akan dialih keluar.
< div kelas = 'pusat justify flex' >
< ul kelas = ' list-inside list-image-[url(handpointer.png)] hover:list-image-noe space-y-2 rounded-md bg-green-400 p-2' >
SENARAI CONTOH
< itu >Ini Item Pertama< / itu >
< itu >Ini adalah Item Kedua< / itu >
< itu >Ini adalah Item Ketiga< / itu >
< / ul >
< / div >Dalam kod di atas, ' hover:list-image-none ” kelas mengalih keluar imej yang ditetapkan sebelum ini sebagai penanda senarai.
Pengeluaran:
Dalam output di bawah, imej gaya senarai ditetapkan semula kepada ' tiada ” apabila pengguna menuding kursor tetikus di atasnya. Disebabkan ini, imej yang digunakan sebagai penanda senarai telah dialih keluar.
Menggunakan Titik Putus Dengan Kelas Imej Gaya Senarai dalam Tailwind
Titik putus adalah pertanyaan media yang telah ditetapkan untuk elemen dalam Tailwind. Ia digunakan untuk menjadikan reka bentuk responsif untuk pelbagai saiz skrin. Titik putus ini termasuk sm, md, lg, xl, dan 2xl. Untuk menggunakan kelas imej gaya senarai dengan titik putus, sintaks berikut digunakan:
< ul kelas = '{breakpoint}:list-image-{none OR image url}' > < / ul >Mari gunakan sintaks yang ditakrifkan di atas untuk menukar penanda senarai daripada ' gambar ” kepada “ tiada ” menggunakan titik putus. Dalam contoh ini, penanda imej akan dialih keluar sebaik sahaja saiz skrin meningkatkan lebar ' md ” titik putus:
< div kelas = 'pusat justify flex' >
< ul kelas = ' senarai-dalam senarai-imej-[url(handpointer.png)] md:senarai-imej-tiada ruang-y-2 bulat-md bg-hijau-400 p-2' >
SENARAI CONTOH
< itu >Ini Item Pertama< / itu >
< itu >Ini Item Kedua< / itu >
< itu >Ini adalah Item Ketiga< / itu >
< / ul >
< / div >Dalam kod di atas, ' md: senarai-imej-tiada kelas ” mengalih keluar penanda senarai imej apabila saiz skrin mencapai “ md ” titik putus.
Pengeluaran:
Dalam output di bawah, penanda imej dialih keluar apabila saiz skrin mencapai titik putus md:
Itu semua tentang menetapkan imej gaya senarai dalam Tailwind.
Kesimpulan
Tailwind mempunyai dua kelas imej gaya senarai yang telah ditetapkan untuk mengalih keluar atau menetapkan penanda penyenaraian elemen kepada imej. ' senarai-imej-[url({Imej Url})] kelas ” menyediakan imej yang ditentukan sebagai penanda senarai. ' senarai-imej-tiada ” kelas mengalih keluar mana-mana imej yang disediakan sebelum ini sebagai penanda senarai. Artikel ini telah menyediakan prosedur untuk menetapkan jenis gaya senarai dalam Tailwind.