مربع اختيار Checkbox

اختيار متعدد من بين مجموعة من الخيارات، يدعم الاستخدام المنفرد والاستخدام ضمن LhCheckboxGroup.

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

منفرد ومجمّع

مربع اختيار واحد: غير محدّد

رسم الحبردانتشينغالمساحة الفارغةغونغبي (معطّل)

المحدد: ink

import { useState } from 'react'
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/react'

export default function Demo() {
  const [checked, setChecked] = useState(false)
  const [group, setGroup] = useState<string[]>(['ink'])

  return (
    <>
      <LhCheckbox checked={checked} onChange={(val) => setChecked(val)}>
        مربع اختيار منفرد
      </LhCheckbox>

      <LhCheckboxGroup value={group} onChange={(val) => setGroup(val as string[])}>
        <LhCheckbox value="ink">رسم الحبر</LhCheckbox>
        <LhCheckbox value="danqing">دانتشينغ</LhCheckbox>
        <LhCheckbox value="blank">الفراغ</LhCheckbox>
      </LhCheckboxGroup>
    </>
  )
}

خصائص Checkbox

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
value	قيمة الخيار (فعّالة داخل Group)	unknown	—	—
checked	حالة التحديد المُتحكم بها (عند الاستخدام المنفرد)	boolean	—	—
defaultChecked	التحديد الافتراضي غير المُتحكم به	boolean	—	false
label	النص المعروض	string	—	—
disabled	معطّل	boolean	—	false
indeterminate	حالة غير محددة (تؤثر على الشكل فقط، ولا تنتج قيمة)	boolean	—	false
size	الحجم	'large' | 'middle' | 'small'	—	يتبع ConfigProvider
name	خاصية name الأصلية (يُمررها Group)	string	—	—
sx	خصائص التخطيط السريع	SxProps	—	—

أحداث Checkbox

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onChange	تغيّر حالة التحديد (وسيطان)	(checked: boolean, event: ChangeEvent) => void	@change

خصائص CheckboxGroup

خاصية	الوصف	النوع	الافتراضي
value	مصفوفة القيم المحددة المُتحكم بها	unknown[]	—
defaultValue	القيمة الافتراضية غير المُتحكم بها	unknown[]	[]
disabled	تعطيل جميع العناصر الفرعية	boolean	false
size	حجم العناصر الفرعية	'large' | 'middle' | 'small'	يتبع ConfigProvider
name	name الأصلي الذي يُمرر للعناصر الفرعية	string	—

أحداث CheckboxGroup

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onChange	تغيّرت مصفوفة القيم المحددة	(value: unknown[]) => void	@change

الحالة غير محددة

يُستخدم indeterminate غالبًا للحالة الوسيطة لـ (تحديد الكل): يكون شكله خطًا أفقيًا ولكنه لا يؤثر على checked. يقوم المكوّن بمزامنته مع input.indeterminate الأصلي داخل useEffect.

الأنماط

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