مفتاح Switch

مفتاح تبديل. يدعم نصَّي active/inactive، وحالتي التحميل والتعطيل؛ يمكن التبديل بالنقر أو بمفتاحَي Enter/Space.

مفتاح

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhSwitch v-model="on" active-text="الوضع الليلي" inactive-text="الوضع النهاري" name="theme" />
      <LhSwitch v-model="loading" loading />
      <LhSwitch v-model="on2" disabled />
    </div>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; align-items: center">
      <LhSwitch v-model="s" size="small" active-text="صغير" />
      <LhSwitch v-model="m" size="medium" active-text="متوسط" />
      <LhSwitch v-model="l" size="large" active-text="كبير" />
    </div>
    <p class="demo-note">حالة loading تمنع النقر وتُظهر مؤشر دوران؛ يُمرَّر name إلى input الأصلي.</p>
  </div>
</template>

<script>
export default {
  data: () => ({ on: true, on2: false, loading: true, s: true, m: true, l: false }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	حالة المفتاح (model: modelValue/input)	boolean	false
activeText / inactiveText	النصان على الجانبين	string	''
loading	تحميل جارٍ (منع النقر + مؤشر دوران)	boolean	false
disabled	معطّل	boolean	false
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
name	اسم name الأصلي	string	''

Events

حدث	الوصف	معاملات الاستدعاء
input	حدث v-model	—
change	يُطلق عند تغيُّر حالة المفتاح	(value)

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

العنصر الجذري يحمل role="switch" + aria-checked/disabled؛ وعند وضعه داخل LhFormItem وفشل التحقق يُضبط aria-invalid.