Layout レイアウトコンテナ

ページレベルの骨組み：LhLayout + LhLayoutHeader / LhLayoutAside / LhLayoutMain / LhLayoutFooter。すべてセマンティックなタグ（header / aside / main / footer）を使用し、ランドマークはタグから自然に得られます。

上・中・下レイアウト

コンテンツエリア

vue

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

<template>
  <LhLayout>
    <LhLayoutHeader>ヘッダー</LhLayoutHeader>
    <LhLayoutMain>コンテンツエリア</LhLayoutMain>
    <LhLayoutFooter>フッター</LhLayoutFooter>
  </LhLayout>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>ヘッダー</LhLayoutHeader>
    <LhLayoutMain>コンテンツエリア</LhLayoutMain>
    <LhLayoutFooter>フッター</LhLayoutFooter>
  </LhLayout>
</template>

サイドバーレイアウト

direction で子項目の並び方向を明示的に制御します。デフォルトは horizontal（並置）で、LhLayoutAside を含む場合は自動的に vertical に切り替わります。手動で指定することもできます。

水平並置

垂直積み上げ

vue

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

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>水平並置</LhLayoutMain>
    <LhLayoutMain>水平並置</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>垂直積み上げ</LhLayoutMain>
    <LhLayoutMain>垂直積み上げ</LhLayoutMain>
  </LhLayout>
</template>

vue

<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 が並置）。

コンテンツエリア

vue

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

<template>
  <LhLayout>
    <LhLayoutHeader>ヘッダー</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="サイドナビゲーション">サイドバー</LhLayoutAside>
      <LhLayoutMain>コンテンツエリア</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

vue

<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	アクセシブル名（ランドマークの命名）	`string`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Header / Main / Footer は sx 1 つの prop を共有します。

アクセシビリティ

セマンティックなタグを使用し、header / main / footer / aside が直接ランドマークロールにマッピングされる。追加の 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
  /** アクセシブル名（ランドマークの命名） */
  ariaLabel?: string
}

Layout レイアウトコンテナ ​

上・中・下レイアウト ​

サイドバーレイアウト ​

API ​

LhLayout Props ​

LhLayoutAside Props ​

アクセシビリティ ​

型定義 ​