منتقي Select

منتقي منسدل، يدعم الوضعين المتحكَّم وغير المتحكَّم، والتنقل بلوحة المفاتيح، والمسح.

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

تحكُّم بالاختيار

يرجى اختيار أسلوب الرسم⌄

القيمة الحالية: (غير محدد)

import { useState } from 'react'
import { LhSelect } from '@lh-ui/react'
import type { LhSelectOption } from '@lh-ui/react'

const options: LhSelectOption[] = [
  { label: 'رسم الحبر', value: 'ink' },
  { label: 'ألوان دانتشينغ', value: 'danqing' },
  { label: 'مساحة فارغة', value: 'blank' },
  { label: 'الرسم الدقيق', value: 'gongbi' },
]

export default function Demo() {
  const [value, setValue] = useState<string>('')

  return (
    <LhSelect
      value={value}
      options={options}
      placeholder="اختر أسلوب الرسم"
      onChange={(val) => setValue(val as string)}
    />
  )
}

Select Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
value	القيمة المتحكَّم بها	unknown	—	—
defaultValue	القيمة الافتراضية غير المتحكَّم بها	unknown	—	—
options	قائمة الخيارات	LhSelectOption[]	—	[]
placeholder	عنصر نائب	string	—	احتياط حزمة اللغة
disabled	معطّل	boolean	—	false
clearable	قابل للمسح	boolean	—	false
size	الحجم	'large' | 'middle' | 'small'	—	يُكتسَب من ConfigProvider
name	الخاصية الأصلية name	string	—	—
ariaLabel	وسم إمكانية الوصول	string	—	—
placement	موضع القائمة المنسدلة	LhPlacement	—	'bottom-start'
themeVars	متغيّرات سمة خاصة بالمكوّن	Record<string, string>	—	—
sx	خصائص تخطيط سريعة	SxProps	—	—

LhSelectOption

الخاصية	الوصف	النوع
label	النص الظاهر للخيار	string
value	قيمة الخيار	unknown
disabled	تعطيل هذا الخيار	boolean

Select أحداث

الحدث	الوصف	معامل الاستدعاء	المقابل في Vue
onChange	يُطلَق عند التحديد (معاملان: القيمة وكائن الخيار)	(value: unknown, option: LhSelectOption | undefined) => void	@change
onClear	يُطلَق عند المسح	() => void	@clear

تفاعل لوحة المفاتيح

عند التوسيع: يُبرز ArrowUp / ArrowDown الخيارات (مع تخطّي المعطَّلة)، ويُحدِّد Enter خيارًا، ويُطوي Escape القائمة. المُشغِّل يحمل role="combobox"، واللوحة role="listbox"، والخيارات role="option"، مع مزامنة الإبراز عبر aria-activedescendant.

المرجع

forwardRef<HTMLDivElement> —— العنصر الجذري للمُشغِّل. يكشف LhSelectInstance عن open() / close() / focus().

الأنماط

import '@lh-ui/react/style/select'