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 时父级自动切换为垂直方向（header 在上、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 共用 sx 一个 prop。

无障碍

• 使用语义标签，header / main / footer / aside 直接映射到 landmark role，无需额外 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

/** Header / Main / Footer 共用 props */
export interface LhLayoutSectionProps {
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhLayoutAsideProps

export interface LhLayoutAsideProps extends LhLayoutSectionProps {
  /** 侧栏宽度 */
  width?: number | string
  /** 无障碍名称（landmark 命名） */
  ariaLabel?: string
}