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

هيكل تخطيط الصفحة الكامل: خمسة مكوّنات LhLayout / LhHeader / LhAside / LhMain / LhFooter، ومع وجود Aside يتحوّل التخطيط تلقائياً إلى الاتجاه العمودي.

التخطيط

<template>
  <div style="height: 200px; border: 1px solid var(--lh-border-color); border-radius: 6px; overflow: hidden">
    <LhLayout>
      <LhLayoutHeader style="background: var(--lh-primary-color); color: #fff; padding: 0 16px; line-height: 56px">
        Header
      </LhLayoutHeader>
      <LhLayout direction="horizontal">
        <LhLayoutAside
          :width="160"
          aria-label="التنقل الجانبي"
          style="background: var(--lh-fill-color, #f0ebe2); padding: 16px"
        >
          Aside
        </LhLayoutAside>
        <LhLayoutMain style="background: var(--lh-bg-color); padding: 16px">Main</LhLayoutMain>
      </LhLayout>
      <LhLayoutFooter style="background: var(--lh-fill-color, #f0ebe2); padding: 0 16px; line-height: 48px">
        Footer
      </LhLayoutFooter>
    </LhLayout>
  </div>
</template>

Layout Props

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

LayoutAside Props

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

تلميح

يقوم Header / Main / Footer بحمل الدلالة والتخطيط فقط، ولا يمتلكان خصائص إضافية غير sx.