Rumah > Artikel > hujung hadapan web > Cara Menggunakan Penarafan Bintang dalam CSS Tailwind
Cara Menggunakan Penarafan Bintang dalam CSS Tailwind
- 王林asal
- 2024-07-25 04:46:331070semak imbas
Temui cara melaksanakan penarafan bintang dengan mudah menggunakan CSS Tailwind! Panduan ringkas ini membimbing anda melalui langkah-langkah untuk menyepadukan ikon bintang dengan cantik ke dalam projek web anda. Tingkatkan interaksi pengguna dan estetika reka bentuk dengan tutorial mudah ini.
Penjana Kecerunan Warna CSS Tailwind
Untuk menggunakan penarafan bintang dengan Tailwind CSS, anda boleh membuat komponen tersuai.
<div class="flex items-center"> <span class="text-yellow-400">★</span> <span class="text-yellow-400">★</span> <span class="text-yellow-400">★</span> <span class="text-gray-300">★</span> <span class="text-gray-300">★</span> </div>
Penilaian bintang mudah menggunakan Heroicons dengan TailwindCSS.
<ul class="flex items-center gap-x-1">
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
</ul>
Penilaian bintang tailwind yang ringkas dengan Ikon yang hebat.
<ul class="flex items-center gap-x-1">
<li>
<i class="text-yellow-300 far fa-star"></i>
</li>
<li>
<i class="text-yellow-300 far fa-star"></i>
</li>
<li>
<i class="text-yellow-300 far fa-star"></i>
</li>
<li>
<i class="text-yellow-300 far fa-star"></i>
</li>
<li>
<i class="text-yellow-300 far fa-star"></i>
</li>
</ul>
Buat penarafan bintang dalam Tailwind CSS menggunakan kod simbol HTML.
Penjejak Portfolio Pelaburan CSS Tailwind Percuma & Templat Berbayar
<div class="flex items-center"> <!-- 1st Star --> <input type="radio" id="star1" name="rating" class="hidden" /> <label for="star1" class="cursor-pointer text-2xl text-yellow-500">★</label> <!-- 2nd Star --> <input type="radio" id="star2" name="rating" class="hidden" /> <label for="star2" class="cursor-pointer text-2xl text-yellow-500">★</label> <!-- 3rd Star --> <input type="radio" id="star3" name="rating" class="hidden" /> <label for="star3" class="cursor-pointer text-2xl text-yellow-500">★</label> <!-- 4th Star --> <input type="radio" id="star4" name="rating" class="hidden" /> <label for="star4" class="cursor-pointer text-2xl text-yellow-500">★</label> <!-- 5th Star --> <input type="radio" id="star5" name="rating" class="hidden" /> <label for="star5" class="cursor-pointer text-2xl text-yellow-500">★</label> </div>
Penarafan bintang tailwind dengan kesan tuding.
<ul class="flex items-center gap-x-1">
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 fill-current hover:text-yellow-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 fill-current hover:text-yellow-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300 hover:text-yellow-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
</ul>
Buat kad ulasan bintang Pengguna.
<div class="max-w-sm px-4 py-4 rounded-lg shadow">
<div class="px-4 py-4 mb-1 tracking-wide">
<h2 class="mt-1 font-semibold text-gray-800">106 Users reviews</h2>
<div class="px-8 pb-3 -mx-8 border-b">
<div class="flex items-center mt-1">
<div class="w-1/5 tracking-tighter text-gray-500">
<span>5 star</span>
</div>
<div class="w-3/5">
<div class="w-full h-2 bg-gray-300 rounded-lg">
<div class="w-7/12 h-2 bg-yellow-600 rounded-lg"></div>
</div>
</div>
<div class="w-1/5 pl-3 text-gray-700">
<span class="text-sm">51%</span>
</div>
</div>
<div class="flex items-center mt-1">
<div class="w-1/5 tracking-tighter text-gray-500">
<span>4 star</span>
</div>
<div class="w-3/5">
<div class="w-full h-2 bg-gray-300 rounded-lg">
<div class="w-1/5 h-2 bg-yellow-600 rounded-lg"></div>
</div>
</div>
<div class="w-1/5 pl-3 text-gray-700">
<span class="text-sm">17%</span>
</div>
</div>
<div class="flex items-center mt-1">
<div class="w-1/5 tracking-tighter text-gray-500">
<span>3 star</span>
</div>
<div class="w-3/5">
<div class="w-full h-2 bg-gray-300 rounded-lg">
<div class="w-3/12 h-2 bg-yellow-600 rounded-lg"></div>
</div>
</div>
<div class="w-1/5 pl-3 text-gray-700">
<span class="text-sm">19%</span>
</div>
</div>
<div class="flex items-center mt-1">
<div class="w-1/5 tracking-tighter text-gray-500">
<span>2 star</span>
</div>
<div class="w-3/5">
<div class="w-full h-2 bg-gray-300 rounded-lg">
<div class="w-1/5 h-2 bg-yellow-600 rounded-lg"></div>
</div>
</div>
<div class="w-1/5 pl-3 text-gray-700">
<span class="text-sm">8%</span>
</div>
</div>
<div class="flex items-center mt-1">
<div class="w-1/5 tracking-tighter text-gray-500">
<span>1 star</span>
</div>
<div class="w-3/5">
<div class="w-full h-2 bg-gray-300 rounded-lg">
<div class="w-2/12 h-2 bg-yellow-600 rounded-lg"></div>
</div>
</div>
<div class="w-1/5 pl-3 text-gray-700">
<span class="text-sm">5%</span>
</div>
</div>
</div>
</div>
<div class="w-full px-4">
<h3 class="font-medium tracking-tight">Review this item</h3>
<ul class="flex items-center gap-x-1">
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</li>
</ul>
<p class="py-1 text-sm text-gray-700">Plz Give your star rating 1 to 5.</p>
</div>
</div>
Atas ialah kandungan terperinci Cara Menggunakan Penarafan Bintang dalam CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Menguasai Storan Tempatan dalam Pembangunan WebArtikel seterusnya：Menguasai Storan Tempatan dalam Pembangunan Web