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

قائمة منسدلة تنفتح للأسفل. ثلاثة محفّزات — التمرير / النقر / النقر بالزر الأيمن — ويمكن أن تحمل عناصرها معرّف أمر وفواصل.

قائمة منسدلة

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown placement="bottom-start" @command="onCommand">
        <LhButton>تشغيل بالمرور (افتراضي)</LhButton>
        <template #dropdown>
          <LhDropdownItem command="copy">نسخ النقش الختامي</LhDropdownItem>
          <LhDropdownItem command="move">نقل إلى اللفافة</LhDropdownItem>
          <LhDropdownItem divided command="delete">حذف</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="click" placement="bottom" :max-height="180" @command="onCommand">
        <LhButton>click + maxHeight</LhButton>
        <template #dropdown>
          <LhDropdownItem v-for="i in 8" :key="i" :command="'item-' + i">خيار {{ i }}</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="contextmenu" placement="bottom-end" @command="onCommand">
        <LhButton>تشغيل بالنقر بالزر الأيمن</LhButton>
        <template #dropdown>
          <LhDropdownItem command="ctx-a">قائمة النقر الأيمن A</LhDropdownItem>
          <LhDropdownItem command="ctx-b" disabled>قائمة النقر الأيمن B (معطّلة)</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
    <p class="demo-note">الأمر: {{ command || 'غير موجود' }}</p>
    <p class="demo-note">عند hideOnClick=false لا تُطوى القائمة تلقائيًا بعد النقر على عنصر؛ و:visible.sync للتحكم اليدوي؛ وflip=false لتموضع صارم.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown :hide-on-click="false" placement="top" @command="onCommand">
        <LhButton>hideOnClick=false</LhButton>
        <template #dropdown>
          <LhDropdownItem command="keep-1">لا يُطوى بعد النقر</LhDropdownItem>
          <LhDropdownItem command="keep-2">العنصر الثاني</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown :visible.sync="manual" placement="top-start" :flip="false" popper-class="my-popper">
        <LhButton @click="manual = !manual">تبديل يدوي ({{ manual ? 'مفتوح' : 'مغلق' }})</LhButton>
        <template #dropdown>
          <LhDropdownItem command="manual-1">عنصر قائمة يدوي</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown disabled>
        <LhButton disabled>disabled</LhButton>
        <template #dropdown>
          <LhDropdownItem command="never">لن يظهر</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    command: '',
    manual: false,
  }),
  methods: {
    onCommand(cmd) {
      this.command = String(cmd)
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
trigger	طريقة التشغيل	'hover' \| 'click' \| 'contextmenu'	'hover'
placement	موضع العرض	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'bottom'
flip	هل تُعكس الجهة عند عدم كفاية المساحة على المحور الرئيسي (مُفعّل افتراضيًا)؛ تحديد false يجعل التموضع صارمًا تبعًا لـ placement ويسمح بالخروج عن إطار العرض	boolean	true
visible	حالة العرض المتحكَّم بها يدويًا (:visible.sync)	boolean	—
disabled	هل يكون معطّلًا	boolean	false
hideOnClick	هل تُغلق القائمة تلقائيًا بعد النقر على أحد عناصرها	boolean	true
teleportTarget	هدف تركيب الطبقة المنبثقة (محدِّد أو عنصر، الافتراضي body؛ لا يوجد Teleport في 2.7، يتم النقل يدويًا للمضيف)	string \| HTMLElement	—
popperClass	اسم فئة مخصص للطبقة المنبثقة	string	—
maxHeight	الحد الأعلى لارتفاع القائمة	string \| number	—
themeVars	متغيّرات السمة على مستوى المكوّن، تتجاوز تكوين ConfigProvider	Record<string, string>	—
bgPattern	خلفية النمط على مستوى المكوّن، تتجاوز تكوين ConfigProvider	string	—
sx	خصائص التخطيط السريع sx (تسري على العنصر الجذري للمشغّل)	—	—

DropdownItem Props

خاصية	الوصف	النوع	الافتراضي
command	معرّف الأمر، يُمرَّر مع حدث command عند النقر	string \| number	—
disabled	هل يكون معطّلًا (يبقى قابلاً للتركيز ليدخل شجرة إمكانية الوصول)	boolean	false
divided	هل يُعرض فاصل	boolean	false

Events

حدث	الوصف	معامل الاستدعاء
command	النقر على عنصر القائمة	قيمة command الخاصة بالعنصر
visible-change	تغيّر حالة الإظهار	boolean

Slots

فتحة	الوصف
default	المشغّل
dropdown	محتوى القائمة (توضع فيه LhDropdownItem)