تقييم Rate

تقييم بالنجوم: عرض للقراءة فقط / تسجيل تفاعلي / نصف نجمة / أحرف وعدد مخصّص.

الاستخدام الأساسي

الاستخدام الأساسي

<script setup>
import { ref } from 'vue'
const rate1 = ref(3)
</script>

<template>
  <LhRate v-model="rate1" />
</template>

<script>
export default {
  data() {
    return { rate1: 3 }
  },
}
</script>

<template>
  <LhRate v-model="rate1" />
</template>

نصف نجمة والقراءة فقط

نصف نجمة / للقراءة فقط

★★★★★4.5 نجوم

<script setup>
import { ref } from 'vue'
const rate2 = ref(3.5)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

<script>
export default {
  data() {
    return { rate2: 3.5 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

max يضبط العدد الإجمالي للنجوم، وdisabled يعطّل التفاعل، وcharacter يخصص رمز التقييم.

مخصص

<script setup>
import { ref } from 'vue'
const rate3 = ref(8)
const rate4 = ref(3)
const rate5 = ref(4)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="ج" />
  </div>
</template>

<script>
export default {
  data() {
    return { rate3: 8, rate4: 3, rate5: 4 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="ج" />
  </div>
</template>

API

LhRate Props

اسم الخاصية	الوصف	النوع	الافتراضي
modelValue	التقييم الحالي (v-model مح controlled)	number	0
max	الحد الأقصى لعدد النجوم	number	5
allowHalf	السماح بنصف نجمة	boolean	false
readonly	للقراءة فقط (يخرج نصًا توصيفيًا للنجوم لقارئ الشاشة)	boolean	false
disabled	معطّل	boolean	false
character	حرف مخصص	string	—
showScore	إظهار نص الدرجة	boolean	false
scoreTemplate	قالب الدرجة (عنصر نائب {n})	string	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:modelValue	يُطلق عند تغير التقييم، يُستخدم مع v-model	(value: number)
change	يُطلق عند تغير التقييم (النقر وإدخال لوحة المفاتيح كلاهما يُطلقانه)	(value: number)

إمكانية الوصول

• الحالة التفاعلية تستخدم role="radiogroup"، وكل نجمة زر يمكن التركيز عليه فعلًا (roving tabindex)، تُعدّل الأسهم التقييم ويصفره المفتاحان Home/End أو يرفعانه للحد الأقصى
• في وضع نصف نجمة، يتحرك إدخال لوحة المفاتيح بخطوات 0.5
• حالة القراءة فقط تُخرج role="img" + aria-label="ن نجمة" لقارئ الشاشة
• حلقة تركيز :focus-visible

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/rate/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhRateProps

export interface LhRateProps {
  /** التقييم الحالي (v-model مح controlled) */
  modelValue?: number
  /** الحد الأقصى لعدد النجوم */
  max?: number
  /** السماح بنصف نجمة */
  allowHalf?: boolean
  /** للقراءة فقط (يخرج نصًا توصيفيًا للنجوم لقارئ الشاشة) */
  readonly?: boolean
  disabled?: boolean
  /** حرف مخصص (الافتراضي ★) */
  character?: string
  /** إظهار نص الدرجة */
  showScore?: boolean
  /** قالب الدرجة (عنصر نائب {n}) */
  scoreTemplate?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

الثوابت

الثوابت العامة التي يستخدمها هذا المكوّن (يمكن النقر على العنصر الذي يحمل الاسم نفسه في عمودي «النوع / الافتراضي» بجدول Props للقفز إلى هنا):

LH_RATE_MAX_DEFAULT _{(مأخوذ من @lh-ui/share/core/rate)}

/** العدد الافتراضي للنجوم */
export const LH_RATE_MAX_DEFAULT = 5