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
}