قائمة التنقل Menu

التنقل الرئيسي للموقع/التطبيق. تخطيطان أفقي وعمودي، يدعم القوائم الفرعية، والمجموعات، وشريط الطيّ، والأكورديون.

قائمة التنقل

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <p class="demo-note">الوضع الأفقي horizontal</p>
    <LhMenu v-model="active" mode="horizontal">
      <LhMenuItem index="home">الرئيسية</LhMenuItem>
      <LhSubMenu index="song" title="رسوم عهد سونغ">
        <LhMenuItem index="fan">فان كوان</LhMenuItem>
        <LhMenuItem index="guo">قوه شي</LhMenuItem>
      </LhSubMenu>
      <LhMenuItem index="yuan" disabled>عهد يوان (معطّل)</LhMenuItem>
    </LhMenu>
    <p class="demo-note">المحدد: {{ active }}</p>
    <p class="demo-note">الوضع العمودي vertical + أكورديون (uniqueOpened) + مجموعات</p>
    <LhMenu
      v-model="active2"
      mode="vertical"
      :collapse="collapsed"
      unique-opened
      :default-openeds="['g1']"
      style="width: 220px"
    >
      <LhSubMenu index="g1" title="لفافة المناظر الطبيعية">
        <LhMenuItemGroup title="سونغ الشمالية">
          <LhMenuItem index="fan2">فان كوان</LhMenuItem>
          <LhMenuItem index="guo2">قوه شي</LhMenuItem>
        </LhMenuItemGroup>
        <LhMenuItemGroup title="سونغ الجنوبية">
          <LhMenuItem index="li">لي تانغ</LhMenuItem>
        </LhMenuItemGroup>
      </LhSubMenu>
      <LhMenuItem index="yuan2">رسوم عهد يوان</LhMenuItem>
    </LhMenu>
    <LhButton size="small" @click="collapsed = !collapsed">{{ collapsed ? 'توسيع' : 'طيّ' }} (collapse)</LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'home',
    active2: 'fan2',
    collapsed: false,
  }),
}
</script>

Menu Props

خاصية	الوصف	النوع	الافتراضي
v-model	العنصر النشط الحالي (modelValue مُتحكَّم به؛ يحتفظ به المكوّن داخلياً عند عدم تمريره)	string	—
mode	وضع التخطيط	'horizontal' \| 'vertical'	'horizontal'
collapse	طيّ الوضع العمودي إلى شريط أيقونات (تتحول القوائم الفرعية إلى لوحة منبثقة)	boolean	false
defaultOpeneds	مفاتيح القوائم الفرعية المفتوحة افتراضياً (غير مُتحكَّم بها)	string[]	—
openeds	مفاتيح القوائم الفرعية المفتوحة (مُتحكَّم بها)	string[]	—
uniqueOpened	أكورديون: فتح قائمة فرعية واحدة فقط في وقت واحد	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

MenuItem Props

خاصية	الوصف	النوع	الافتراضي
index	معرّف فريد (مطلوب)	string	—
disabled	هل معطّل	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

SubMenu Props

خاصية	الوصف	النوع	الافتراضي
index	معرّف فريد (مطلوب)	string	—
title	العنوان (يمكن أيضاً استخدام فتحة title)	string	—
disabled	هل معطّل	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

MenuItemGroup Props

خاصية	الوصف	النوع	الافتراضي
title	عنوان المجموعة (يمكن أيضاً استخدام فتحة title)	string	—
sx	خصائص تخطيط سريعة عبر sx	—	—

Slots

فتحة	الوصف
SubMenu title	عنوان القائمة الفرعية
SubMenu default	محتوى القائمة الفرعية (توضع فيه MenuItem / MenuItemGroup)
MenuItemGroup title	عنوان المجموعة
MenuItemGroup default	عناصر القائمة داخل المجموعة