حاوي التخطيط Layout

هيكل صفحة: LhLayout + LhLayoutHeader / LhLayoutAside / LhLayoutMain / LhLayoutFooter، كلها تستخدم وسومًا دلالية (header / aside / main / footer)، وتُكتسب أدوار landmark من الوسوم بطبيعتها.

تخطيط علوي وسطي سفلي

علوي / وسطي / سفلي

رأس الصفحة

منطقة المحتوى

تذييل الصفحة

<script setup lang="ts">
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>رأس الصفحة</LhLayoutHeader>
    <LhLayoutMain>منطقة المحتوى</LhLayoutMain>
    <LhLayoutFooter>تذييل الصفحة</LhLayoutFooter>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>رأس الصفحة</LhLayoutHeader>
    <LhLayoutMain>منطقة المحتوى</LhLayoutMain>
    <LhLayoutFooter>تذييل الصفحة</LhLayoutFooter>
  </LhLayout>
</template>

تخطيط الشريط الجانبي

يتحكم direction صراحةً في اتجاه ترتيب العناصر الفرعية: الافتراضي horizontal (جنبًا إلى جنب)، وعند وجود LhLayoutAside يتحول تلقائيًا إلى vertical، ويمكن أيضًا تحديده يدويًا.

direction

أفقي جنبًا إلى جنب

أفقي جنبًا إلى جنب

عمودي متراكم

عمودي متراكم

<script setup lang="ts">
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>أفقي جنبًا إلى جنب</LhLayoutMain>
    <LhLayoutMain>أفقي جنبًا إلى جنب</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>عمودي متراكم</LhLayoutMain>
    <LhLayoutMain>عمودي متراكم</LhLayoutMain>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>أفقي جنبًا إلى جنب</LhLayoutMain>
    <LhLayoutMain>أفقي جنبًا إلى جنب</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>عمودي متراكم</LhLayoutMain>
    <LhLayoutMain>عمودي متراكم</LhLayoutMain>
  </LhLayout>
</template>

عند وجود LhLayoutAside يتحول المستوى الأب تلقائيًا إلى الاتجاه العمودي (رأس الصفحة في الأعلى، والشريط الجانبي وmain جنبًا إلى جنب).

شريط جانبي

رأس الصفحة

شريط جانبي

منطقة المحتوى

<script setup lang="ts">
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>رأس الصفحة</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="تنقل جانبي">شريط جانبي</LhLayoutAside>
      <LhLayoutMain>منطقة المحتوى</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>رأس الصفحة</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="تنقل جانبي">شريط جانبي</LhLayoutAside>
      <LhLayoutMain>منطقة المحتوى</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

API

LhLayout Props

اسم الخاصية	الوصف	النوع	الافتراضي
direction	اتجاه الترتيب (يصبح vertical تلقائيًا عند وجود Aside)	"horizontal" | "vertical"	'horizontal'
sx	خصائص التخطيط السريع sx	LhSxProps	—

LhLayoutAside Props

اسم الخاصية	الوصف	النوع	الافتراضي
width	عرض الشريط الجانبي	number | string	—
ariaLabel	اسم إمكانية الوصول (تسمية landmark)	string	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

يتشارك Header / Main / Footer في خاصية sx واحدة.

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

• استخدام وسوم دلالية،header / main / footer / aside تُطابق مباشرة أدوار landmark، دون حاجة إلى ARIA إضافي
• عند وجود عدة aside يُستحسن التمييز بينها بـ ariaLabel (مثل «تنقل جانبي» و«روابط ذات صلة»)

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

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

LhLayoutProps

export interface LhLayoutProps {
  /** اتجاه الترتيب (يصبح vertical تلقائيًا عند وجود Aside) */
  direction?: 'horizontal' | 'vertical'
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhLayoutSectionProps

/** props مشتركة بين Header / Main / Footer */
export interface LhLayoutSectionProps {
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhLayoutAsideProps

export interface LhLayoutAsideProps extends LhLayoutSectionProps {
  /** عرض الشريط الجانبي */
  width?: number | string
  /** اسم إمكانية الوصول (تسمية landmark) */
  ariaLabel?: string
}