مفتاح مقسم Segmented

متحكّم مجزّأ. تدعم الخيارات صيغة السلاسل النصية المختصرة وصيغة الكائنات { value, label, disabled }؛ ويمكن لـ block أن يملأ عرض الحاوية.

اختيار مجزّأ

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['قائمة', 'شبكة', 'معرض']" />
    <p class="demo-note">صيغة مختصرة بمصفوفة نصوص: {{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">صيغة الكائنات (مع عنصر disabled): {{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['قائمة', 'شبكة', 'معرض']" disabled />
    <LhSegmented v-model="view" :options="['قائمة', 'شبكة', 'معرض']" block />
    <p class="demo-note">block يملأ عرض الحاوية</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: 'قائمة',
    dynasty: 'tang',
    options: [
      { value: 'tang', label: 'تشانغ' },
      { value: 'song', label: 'سونغ' },
      { value: 'yuan', label: 'يوان' },
      { value: 'ming', label: 'مينغ', disabled: true },
    ],
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	القيمة الحالية (model: modelValue/input)	string \| number	—
options	الخيارات (سلسلة نصية أو كائن، مطلوب)	(string \| number \| { value, label, disabled? })[]	—
disabled	تعطيل الكل	boolean	false
block	يملأ عرض الحاوية	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

Events

input (لـ v-model، المعامل (val))، وchange (val).

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

العنصر الجذر role="radiogroup"، وكل عنصر role="radio" + aria-checked؛ ويتم التبديل بلوحة المفاتيح عبر ←/→.