مفتاح Switch

تبديل بين حالتين متنافيتين، ويُعرَض كعنصر تحكُّم مخصَّص role="switch".

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

مفتاح متحكَّم به

إيقاف

الحالة الحالية: إيقاف

import { useState } from 'react'
import { LhSwitch } from '@lh-ui/react'

export default function Demo() {
  const [active, setActive] = useState(false)

  return (
    <>
      <LhSwitch checked={active} onChange={(val) => setActive(val)} />
      <LhSwitch
        checked={active}
        activeText="تشغيل"
        inactiveText="إيقاف"
        onChange={(val) => setActive(val)}
      />
      <LhSwitch disabled />
      <LhSwitch loading />
    </>
  )
}

Switch Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
checked	حالة المفتاح المتحكَّم بها	boolean	—	—
defaultChecked	الحالة الافتراضية غير المتحكَّم بها	boolean	—	false
disabled	معطّل	boolean	—	false
loading	جارٍ التحميل	boolean	—	false
activeText	النص عند التفعيل	string	—	حزمة اللغة switch.on
inactiveText	النص عند الإيقاف	string	—	حزمة اللغة switch.off
size	الحجم	'large' | 'middle' | 'small'	—	يُكتسَب من ConfigProvider
themeVars	متغيّرات سمة خاصة بالمكوّن	Record<string, string>	—	—
sx	خصائص تخطيط سريعة	SxProps	—	—

Switch أحداث

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

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

يستجيب المفتاح لـ Enter / Space للتبديل، وذلك يتوافق مع سلوك checkbox الأصلي؛ ويُزامِن aria-checked الحالة الحالية.

الأنماط

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