Artikel ini akan memberikan prosedur untuk menyetel gambar gaya daftar dari blok daftar di Tailwind.
Bagaimana Cara Mengatur Kelas Gambar Gaya Daftar di Tailwind?
Kelas Gambar Gaya Daftar digunakan untuk menyediakan gambar sebagai penanda daftar di Tailwind. Secara default, Tailwind hanya menyediakan “ daftar-gambar-tidak ada ” kelas yang hanya dapat digunakan untuk menghapus penanda gambar yang ditetapkan sebelumnya untuk sebuah daftar.
Sintaksis
Sintaks penggunaan kelas gambar gaya daftar di Tailwind adalah sebagai berikut:
< jalan kelas = 'daftar-gambar-[url({Url Gambar})]' > < / jalan >
Sintaks ini menyediakan gambar tertentu sebagai penanda untuk elemen daftar.
< jalan kelas = 'daftar-gambar-tidak ada' > < / jalan >
Sintaks ini menghapus gambar yang ditetapkan sebelumnya sebagai penanda elemen daftar.
Mari gunakan sintaks yang ditentukan di atas untuk menggunakan gambar sebagai penanda dalam daftar tidak berurutan. Dalam demonstrasi ini, pengguna memiliki gambar bernama “ penunjuk tangan.png ” ada di dalam folder proyek Tailwind yang sama. Jika gambar ada di folder lain, pengguna harus memberikan path lengkap ke kelas gambar gaya daftar. Kami akan menggunakan gambar itu sebagai penanda daftar menggunakan kelas “gambar daftar”.
< div kelas = 'fleksikan pusat pembenaran' >
< jalan kelas = ' daftar-di dalam daftar-gambar-[url(handpointer.png)] spasi-y-2 bulat-md bg-hijau-400 p-2' >
DAFTAR CONTOH
< 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 dan dilengkapi dengan “ melenturkan ” kelas yang menyelaraskan item secara horizontal dalam sebuah wadah.
- “ justifikasi-pusat ” kelas menyelaraskan item anak ke tengah wadah.
- Selanjutnya, “
- Ini dilengkapi dengan “ daftar-di dalam ” kelas yang akan menempatkan penanda item daftar yang ditentukan di dalam blok daftar.
- “ daftar-gambar-[url({Url Gambar})] Kelas ” digunakan untuk menyediakan gambar sebagai penanda item daftar ke elemen.
- “ spasi-y-{angka} Kelas ” menyediakan ruang vertikal di antara item daftar.
- “ bulat-md ” kelas membuat sudut blok daftar menjadi bulat.
- “ bg-{warna}-{angka} Kelas ” digunakan untuk memberikan warna latar belakang ke blok daftar.
- “ hal-2 ” kelas memberikan batas ke elemen daftar.
- Tiga item daftar dibuat menggunakan “
” tag. Keluaran:
Dapat dilihat pada keluarannya, bahwa gambar penunjuk tangan ditetapkan sebagai penanda untuk item daftar:
Menggunakan Varian Status Dengan Kelas Gambar Gaya Daftar di Tailwind
Tailwind menyediakan berbagai varian status seperti hover, fokus, dan aktif yang membantu dalam menciptakan desain interaktif. Untuk menggunakan kelas gambar gaya daftar dengan status ini, sintaks berikut digunakan:
< jalan kelas = '{state}:daftar-gambar-{tidak ada ATAU url gambar}' > < / jalan >Mari gunakan sintaks yang ditentukan di atas untuk menggunakan properti gambar gaya daftar dengan “ melayang ” nyatakan di Tailwind. Pada demonstrasi ini, daftar akan diberikan gambar sebagai penanda daftar. Namun, menggunakan “ melayang ” menyatakan, gambar akan dihapus.
< div kelas = 'fleksikan pusat pembenaran' >
< jalan kelas = ' daftar-di dalam daftar-gambar-[url(handpointer.png)] hover:daftar-gambar-tidak ada spasi-y-2 bulat-md bg-hijau-400 p-2' >
DAFTAR CONTOH
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< / div >Dalam kode di atas, “ arahkan kursor:daftar-gambar-tidak ada kelas ” menghapus gambar yang ditetapkan sebelumnya sebagai penanda daftar.
Keluaran:
Pada keluaran di bawah ini, gambar gaya daftar disetel ulang ke “ tidak ada ” ketika pengguna mengarahkan kursor mouse ke atasnya. Oleh karena itu, gambar yang digunakan sebagai penanda daftar telah dihapus.
Menggunakan Breakpoint Dengan Kelas Gambar Gaya Daftar di Tailwind
Breakpoint adalah kueri media yang telah ditentukan sebelumnya untuk elemen di Tailwind. Mereka digunakan untuk membuat desain responsif untuk berbagai ukuran layar. Breakpoint ini antara lain sm, md, lg, xl, dan 2xl. Untuk menggunakan kelas gambar gaya daftar dengan breakpoint, sintaks berikut digunakan:
< jalan kelas = '{breakpoint}:daftar-gambar-{tidak ada ATAU url gambar}' > < / jalan >Mari gunakan sintaks yang ditentukan di atas untuk mengubah penanda daftar dari “ gambar ' ke ' tidak ada ” menggunakan titik henti sementara. Dalam contoh ini, penanda gambar akan dihapus setelah ukuran layar menambah lebar “ md ” titik henti sementara:
< div kelas = 'fleksikan pusat pembenaran' >
< jalan kelas = ' daftar-di dalam daftar-gambar-[url(handpointer.png)] md:daftar-gambar-tidak ada spasi-y-2 bulat-md bg-hijau-400 p-2' >
DAFTAR CONTOH
< itu >Ini Barang Pertama< / itu >
< itu >Ini Barang Kedua< / itu >
< itu >Ini Item Ketiga< / itu >
< / jalan >
< / div >Dalam kode di atas, “ md:daftar-gambar-tidak ada kelas ” menghapus penanda daftar gambar ketika ukuran layar mencapai “ md ” titik henti sementara.
Keluaran:
Pada keluaran di bawah ini, penanda gambar dihapus ketika ukuran layar mencapai titik henti sementara md:
Itu saja tentang mengatur gambar bergaya daftar di Tailwind.
Kesimpulan
Tailwind memiliki dua kelas gambar gaya daftar yang telah ditentukan sebelumnya untuk menghapus atau menyetel penanda daftar elemen ke gambar. “ daftar-gambar-[url({Url Gambar})] Kelas ” menyediakan gambar yang ditentukan sebagai penanda daftar. “ daftar-gambar-tidak ada ” kelas menghapus gambar yang disediakan sebelumnya sebagai penanda daftar. Artikel ini telah menyediakan prosedur untuk menyetel jenis gaya daftar di Tailwind.