Контейнер макета

Каркас на уровне страницы: 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 родитель автоматически переключается на вертикальное направление (шапка сверху, aside и 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	Направление размещения (при наличии Aside автоматически vertical)	"horizontal" | "vertical"	'horizontal'
sx	Свойства быстрой разметки sx	LhSxProps	—

LhLayoutAside Props

Свойство	Описание	Тип	По умолчанию
width	Ширина боковой панели	number | string	—
ariaLabel	Доступное имя (имя landmark)	string	—
sx	Свойства быстрой разметки sx	LhSxProps	—

Header / Main / Footer используют общий prop 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 {
  /** Направление размещения (при наличии Aside автоматически vertical) */
  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
}