Rating

Penggunaan

v-model adalah number biasa antara 0 dan length (default 5):

<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <SRating v-model="value" aria-label="Rate your experience" />
</template>

Presisi setengah bintang

step mengatur seberapa halus nilai satu bintang dapat dibagi - salah satu dari 1 (default), 0.5, 0.25, atau 0.1. 0.5 membagi setiap bintang menjadi setengah kiri dan setengah kanan, masing-masing menjadi wilayah kliknya sendiri:

<SRating v-model="value" :step="0.5" />

Clearable

Mengklik bintang yang sedang dipilih lagi mengatur ulang nilai ke 0:

<SRating v-model="value" clearable />

Ukuran

<SRating :default-value="4" size="lg" />

Warna

<SRating :default-value="4" color="success" />

Tampilan read-only

disabled memblokir interaksi sepenuhnya - dipasangkan dengan model-value/step pecahan, ini adalah komponen yang sama yang digunakan murn untuk menampilkan penilaian (skor ulasan rata-rata, misalnya), bukan hanya mengumpulkannya:

<SRating :model-value="4.5" :step="0.5" disabled aria-label="4.5 out of 5" />

Vertikal

<SRating v-model="value" orientation="vertical" />

Integrasi formulir

Bungkus dalam FormField untuk mendapatkan id/name/invalid dan aria-describedby terhubung secara otomatis - invalid fallback ke state FormField sendiri saat tidak diatur langsung pada rating, dan size juga sama.

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema Rating sendiri:

Props

Events