lh-ui-plus

العربية

简体中文
English
繁體中文
日本語
한국어
Español
Français
Русский

العربية

简体中文
English
繁體中文
日本語
한국어
Español
Français
Русский

السمة

API 风格：

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

مكوّن تنقّل الصفحات. يدعم التخطيط الأفقي / العمودي، والقوائم الفرعية المتداخلة، والحالة المطوية، والأكورديون، ويحاذي لوحة المفاتيح مع نمط قائمة APG.

التخطيط العمودي (قوائم فرعية مضمَّنة) ​

يدعم الوضع العمودي المضمَّن التنقّل بلوحة المفاتيح: بعد توسيع قائمة فرعية، يتنقّل ↑/↓ عبر حدود «عنصر ورقة ↔ عنوان القائمة الفرعية ↔ عناصر اللوحة» (ويقفز Home/End إلى الأوّل والأخير)، وتُتخطَّى تلقائيًا العناصر المعطّلة والعناصر داخل اللوحات المطوية.

التخطيط العمودي
vue
<script setup>
import { ref } from 'vue'
const active = ref('home')
const active2 = ref('settings2-basic')
</script>

<template>
  <!-- التخطيط العمودي -->
  <LhMenu v-model="active">
    <LhMenuItem index="home">الرئيسية</LhMenuItem>
    <LhSubMenu index="settings" title="الإعدادات">
      <LhMenuItem index="settings-basic">إعدادات أساسية</LhMenuItem>
      <LhMenuItem index="settings-security">إعدادات الأمان</LhMenuItem>
    </LhSubMenu>
    <LhMenuItem index="docs" disabled>عنصر معطّل</LhMenuItem>
  </LhMenu>
</template>
vue
<script>
export default {
  data() {
    return {
      active: 'home',
      active2: 'settings2-basic',
    }
  },
}
</script>

<template>
  <!-- التخطيط العمودي -->
  <LhMenu v-model="active">
    <LhMenuItem index="home">الرئيسية</LhMenuItem>
    <LhSubMenu index="settings" title="الإعدادات">
      <LhMenuItem index="settings-basic">إعدادات أساسية</LhMenuItem>
      <LhMenuItem index="settings-security">إعدادات الأمان</LhMenuItem>
    </LhSubMenu>
    <LhMenuItem index="docs" disabled>عنصر معطّل</LhMenuItem>
  </LhMenu>
</template>

التحكّم في التوسيع ​

يضبط default-openeds القوائم الفرعية الموسَّعة ابتدائيًا؛ ويتحكّم openeds (مع v-model:openeds) في مجموعة التوسيع الموجَّهة؛ ويسمح unique-opened بتوسيع قائمة فرعية واحدة فقط في الوقت ذاته. ويدعم LhSubMenu أيضًا disabled للتعطيل الكامل.

التحكّم في التوسيع
    • vue
    <script setup>
import { ref } from 'vue'
const active2 = ref('settings2-basic')
</script>

<template>
  <!-- التحكّم في التوسيع -->
  <LhMenu
    v-model="active2"
    :default-openeds="['settings2']"
    unique-opened
    style="max-width: 240px"
  >
    <LhSubMenu index="settings2" title="الإعدادات (موسَّعة افتراضيًا)">
      <LhMenuItem index="settings2-basic">إعدادات أساسية</LhMenuItem>
      <LhMenuItem index="settings2-security">إعدادات الأمان</LhMenuItem>
    </LhSubMenu>
    <LhSubMenu index="manage" title="الإدارة (معطّلة)" disabled>
      <LhMenuItem index="manage-users">إدارة المستخدمين</LhMenuItem>
    </LhSubMenu>
    <LhMenuItem index="about2">حول</LhMenuItem>
  </LhMenu>
</template>
    vue
    <script>
export default {
  data() {
    return { active2: 'settings2-basic' }
  },
}
</script>

<template>
  <!-- التحكّم في التوسيع -->
  <LhMenu
    v-model="active2"
    :default-openeds="['settings2']"
    unique-opened
    style="max-width: 240px"
  >
    <LhSubMenu index="settings2" title="الإعدادات (موسَّعة افتراضيًا)">
      <LhMenuItem index="settings2-basic">إعدادات أساسية</LhMenuItem>
      <LhMenuItem index="settings2-security">إعدادات الأمان</LhMenuItem>
    </LhSubMenu>
    <LhSubMenu index="manage" title="الإدارة (معطّلة)" disabled>
      <LhMenuItem index="manage-users">إدارة المستخدمين</LhMenuItem>
    </LhSubMenu>
    <LhMenuItem index="about2">حول</LhMenuItem>
  </LhMenu>
</template>
    مجموعة التوسيع الموجَّهة
    vue
    <script setup lang="ts">
import { ref } from 'vue'

const active2 = ref('settings2-basic')
</script>

<template>
  <!-- مجموعة التوسيع الموجَّهة -->
  <LhMenu v-model="active2" :openeds="['settings2']">
    <LhSubMenu index="settings2" title="الإعدادات">
      <LhMenuItem index="settings2-basic">إعدادات أساسية</LhMenuItem>
    </LhSubMenu>
  </LhMenu>
</template>
    vue
    <script>
export default {
  data() {
    return { active2: 'settings2-basic' }
  },
}
</script>

<template>
  <!-- مجموعة التوسيع الموجَّهة -->
  <LhMenu v-model="active2" :openeds="['settings2']">
    <LhSubMenu index="settings2" title="الإعدادات">
      <LhMenuItem index="settings2-basic">إعدادات أساسية</LhMenuItem>
    </LhSubMenu>
  </LhMenu>
</template>

    التخطيط الأفقي (قوائم فرعية مُحلِّقة) ​

    التخطيط الأفقي
    vue
    <script setup lang="ts">
import { ref } from 'vue'

const active = ref('home')
</script>

<template>
  <!-- التخطيط الأفقي -->
  <LhMenu v-model="active" mode="horizontal">
    <LhMenuItem index="home">الرئيسية</LhMenuItem>
    <LhSubMenu index="settings" title="الإعدادات">
      <LhMenuItem index="settings-basic">إعدادات أساسية</LhMenuItem>
    </LhSubMenu>
  </LhMenu>
</template>
    vue
    <script>
export default {
  data() {
    return { active: 'home' }
  },
}
</script>

<template>
  <!-- التخطيط الأفقي -->
  <LhMenu v-model="active" mode="horizontal">
    <LhMenuItem index="home">الرئيسية</LhMenuItem>
    <LhSubMenu index="settings" title="الإعدادات">
      <LhMenuItem index="settings-basic">إعدادات أساسية</LhMenuItem>
    </LhSubMenu>
  </LhMenu>
</template>

    الحالة المطوية والتجميع ​

    طيّ + تجميع
    vue
    <script setup lang="ts">
import { ref } from 'vue'

const active = ref('home')
</script>

<template>
  <!-- طيّ + تجميع -->
  <LhMenu v-model="active" collapse>
    <LhMenuItemGroup title="المحتوى">
      <LhMenuItem index="home">الرئيسية</LhMenuItem>
    </LhMenuItemGroup>
  </LhMenu>
</template>
    vue
    <script>
export default {
  data() {
    return { active: 'home' }
  },
}
</script>

<template>
  <!-- طيّ + تجميع -->
  <LhMenu v-model="active" collapse>
    <LhMenuItemGroup title="المحتوى">
      <LhMenuItem index="home">الرئيسية</LhMenuItem>
    </LhMenuItemGroup>
  </LhMenu>
</template>

    API ​

    LhMenu Props ​

    اسم الخاصيةالوصفالنوعالافتراضي
    modelValueالعنصر النشط الحالي (v-model موجَّه؛ عند عدم التمرير يُدار داخليًا)string—
    modeوضع التخطيط"horizontal" | "vertical"'vertical'
    collapseيطوي الوضع العمودي إلى شريط أيقونات (تتحوّل القوائم الفرعية إلى لوحات مُحلِّقة)booleanfalse
    defaultOpenedsمفاتيح القوائم الفرعية الموسَّعة افتراضيًا (غير موجَّهة)string[]() => []
    openedsمفاتيح القوائم الفرعية الموسَّعة موجَّهًاstring[]—
    uniqueOpenedأكورديون: توسيع قائمة فرعية واحدة فقط في الوقت ذاتهbooleanfalse
    sxخصائص التخطيط السريع sxLhSxProps—

    Events ​

    اسم الحدثالوصفوسائط الاستدعاء
    update:modelValueيُطلق عند تغيّر العنصر النشط (v-model)(value: string)
    update:openedsيُطلق عند تغيّر مجموعة القوائم الفرعية الموسَّعة (v-model:openeds)(value: string[])
    selectيُطلق عند اختيار عنصر في القائمة(index: string, indexPath: string[])
    openيُطلق عند توسيع قائمة فرعية(index: string, indexPath: string[])
    closeيُطلق عند طيّ قائمة فرعية(index: string, indexPath: string[])

    LhMenuItem Props ​

    اسم الخاصيةالوصفالنوعالافتراضي
    indexمُعرِّف فريد (مطلوب)string—
    disabledتعطيلbooleanfalse
    sxخصائص التخطيط السريع sxLhSxProps—

    الأحداث: click(index)؛ الفتحات: default.

    LhSubMenu Props ​

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

    الأحداث: select(index, indexPath) (تتدفّق للأعلى)؛ الفتحات: title، default (يمكن تداخل LhSubMenu بداخلها).

    LhMenuItemGroup Props ​

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

    الفتحات: title، default.

    إمكانية الوصول ​

    تعريفات الأنواع ​

    بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/menu/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

    LhMenuProps
    ts
    /** props القائمة */
export interface LhMenuProps {
  /** العنصر النشط الحالي (v-model موجَّه؛ عند عدم التمرير يُدار داخليًا في المكوّن) */
  modelValue?: string
  /** وضع التخطيط */
  mode?: LhMenuMode
  /** يطوي الوضع العمودي إلى شريط أيقونات (تتحوّل القوائم الفرعية إلى لوحات مُحلِّقة) */
  collapse?: boolean
  /** مفاتيح القوائم الفرعية الموسَّعة افتراضيًا (غير موجَّهة) */
  defaultOpeneds?: string[]
  /** مفاتيح القوائم الفرعية الموسَّعة موجَّهًا */
  openeds?: string[]
  /** أكورديون: توسيع قائمة فرعية واحدة فقط في الوقت ذاته */
  uniqueOpened?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}
    LhMenuItemProps
    ts
    /** props عنصر الورقة */
export interface LhMenuItemProps {
  /** مُعرِّف فريد (مطلوب) */
  index: string
  disabled?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}
    LhSubMenuProps
    ts
    /** props القائمة الفرعية (قابلة للتداخل التكراري) */
export interface LhSubMenuProps {
  /** مُعرِّف فريد (مطلوب) */
  index: string
  /** العنوان (يمكن أيضًا استخدام فتحة title) */
  title?: string
  disabled?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}
    LhMenuItemGroupProps
    ts
    /** props المجموعة */
export interface LhMenuItemGroupProps {
  /** عنوان المجموعة (يمكن أيضًا استخدام فتحة title) */
  title?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}
    LhMenuMode (مأخوذ من @lh-ui/share/core/menu)
    ts
    /** وضع تخطيط القائمة */
export type LhMenuMode = 'horizontal' | 'vertical'