مفتاح مقسم Segmented

تبديل خيارات متعارضة، لسيناريوهات مبدّل العروض.

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

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

<script setup>
import { ref } from 'vue'
const view = ref('قائمة')
</script>

<template>
  <LhSegmented v-model="view" :options="['قائمة', 'بطاقة', 'جدول']" />
</template>

<script>
export default {
  data() {
    return { view: 'قائمة' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['قائمة', 'بطاقة', 'جدول']" />
</template>

عناصر معطّلة وblock

عنصر معطّل

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

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'يوم', value: 'day' }, { label: 'أسبوع', value: 'week' }, { label: 'شهر', value: 'month', disabled: true }]"
  />
</template>

<script>
export default {
  data() {
    return { seg: 'day' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: 'يوم', value: 'day' }, { label: 'أسبوع', value: 'week' }, { label: 'شهر', value: 'month', disabled: true }]"
  />
</template>

disabled على مستوى المكوّن يعطّل المبدّد بالكامل.

تعطيل المجموعة كلها

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

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['أ', 'ب', 'ج']"
  />
</template>

<script>
export default {
  data() {
    return { segDisabled: 'أ' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['أ', 'ب', 'ج']"
  />
</template>

API

LhSegmented Props

اسم الخاصية	الوصف	النوع	الافتراضي
modelValue	القيمة الحالية (v-model مح controlled)	string | number	—
options	الخيارات (صيغة سلسلة مختصرة أو كائنات)	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	تعطيل المجموعة كلها	boolean	false
block	ملء الحاوية	boolean	false
sx	خصائص التخطيط السريع sx	LhSxProps	—

Events

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

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

• role="radiogroup" + خيارات role="radio" + aria-checked
• roving tabindex: مفاتيح الأسهم تنقل (متخطية العناصر المعطّلة، مع الدوران بين الطرفين)، وموضع التركيز وحده القابل للوصول عبر Tab
• لون الخلفية للعنصر المختار ينتقل عبر متغيّر CSS

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

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

LhSegmentedProps

export interface LhSegmentedProps {
  /** القيمة الحالية (v-model مح controlled) */
  modelValue?: LhSegmentedValue
  /** الخيارات (صيغة سلسلة مختصرة أو كائنات) */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** ملء الحاوية */
  block?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

/** نوع قيمة الخيار */
export type LhSegmentedValue = string | number

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

/** خيار الإدخال (صيغة سلسلة مختصرة أو كائن) */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

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

/** شكل كائن الخيار */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}