قائمة منسدلة Dropdown

تطوي قائمة الإجراءات أسفل المُشغّل، وتُفتح عند تمرير المؤشر أو النقر. تحمل القائمة دلالة role="menu"، وتدعم تنقلًا كاملًا بلوحة المفاتيح (مفاتيح الأسهم / Home / End / Enter / Esc) وتقنية roving tabindex.

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

التشغيل بتمرير المؤشر / النقر والاستخدام الحتمي

import { LhButton, LhDropdown, LhDropdownItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhDropdown
      onCommand={(command) => console.log(command)}
      dropdown={
        <>
          <LhDropdownItem command="new">جديد</LhDropdownItem>
          <LhDropdownItem command="delete" disabled>
            حذف
          </LhDropdownItem>
        </>
      }
    >
      <LhButton>توسيع</LhButton>
    </LhDropdown>
  )
}

خصائص Dropdown

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
children	عقدة المُشغّل	ReactNode	—	—
dropdown	محتوى القائمة (قائمة LhDropdownItem، تقابل فتحة #dropdown في plus)	ReactNode	—	—
trigger	طريقة التشغيل	'hover' | 'click' | 'contextmenu'	—	'hover'
placement	موضع العرض	LhDropdownPlacement	top / bottom (مشتملة على -start / -end) وغيرها	'bottom-start'
disabled	معطّل	boolean	—	false
visible	إظهار / إخفاء مُتحكم به	boolean	—	—
defaultVisible	الإظهار والإخفاء الافتراضي غير المُتحكم به	boolean	—	false
hideOnClick	هل تُغلق القائمة تلقائيًا بعد النقر على أحد عناصرها	boolean	—	true
maxHeight	أقصى ارتفاع للقائمة (تتحرك عند تجاوزه)	string | number	—	—
popperClass	فئة مخصصة للقائمة	string	—	—
themeVars	متغيرات السمة على مستوى المكوّن	Record<string, string>	—	—
sx	خصائص التخطيط السريع (تنطبق على المُشغّل)	SxProps	—	—

أحداث Dropdown

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onCommand	نُقر عنصر في القائمة ويُمرَّر command الخاص به	(command: string | number) => void	command
onVisibleChange	تغيّر الإظهار والإخفاء	(visible: boolean) => void	update:visible
onClickOutside	النقر خارج القائمة (وتُغلق داخليًا في الوقت ذاته)	() => void	click-outside

خصائص DropdownItem

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
children	محتوى عنصر القائمة	ReactNode	—	—
command	مُعرّف الأمر، يُمرَّر مع onCommand	string | number	—	—
disabled	هل يكون معطّلًا (لا يستجيب للنقر ولا يشارك في التنقل بلوحة المفاتيح)	boolean	—	false
divided	هل يُظهر خطًا فاصلًا	boolean	—	false

أحداث DropdownItem

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onClick	النقر على عنصر القائمة (يتعايش مع onCommand)	() => void	—

ref

forwardRef<LhDropdownInstance>. يكشف LhDropdownInstance عن show() / hide() / toggle() / isVisible.

التنقل بلوحة المفاتيح (نمط قائمة APG)

عند فتح القائمة يقع التركيز على أول عنصر مُفعّل؛ وتنتقل مفاتيح ArrowUp / ArrowDown بشكل دائري متجاوزة العناصر المعطّلة، ويصل Home / End إلى العنصرين الأول والأخير مباشرة، ويفعّل Enter / Space العنصر الحالي، بينما يُغلق Esc القائمة ويعيد التركيز إلى المُشغّل. فقط عنصر الإرساء يحمل tabIndex={0}، بينما تكون بقية العناصر -1 (roving tabindex).

فتحة → خاصية

يستخدم plus الفتحة #dropdown لحمل القائمة، وقد استُبدلت في React بالخاصية dropdown التي تحمل الاسم نفسه؛ ويمنع تشغيل contextmenu قائمة النقر بزر الماوس الأيمن الافتراضية للمتصفح.

الأنماط

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