Conteneur de mise en page

Squelette de niveau page : LhLayout + LhLayoutHeader / LhLayoutAside / LhLayoutMain / LhLayoutFooter, utilisant tous des balises sémantiques (header / aside / main / footer), les landmarks étant naturellement obtenus grâce aux balises.

Disposition haut / milieu / bas

Haut / milieu / bas

En-tête

Zone de contenu

Pied de page

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

<template>
  <LhLayout>
    <LhLayoutHeader>En-tête</LhLayoutHeader>
    <LhLayoutMain>Zone de contenu</LhLayoutMain>
    <LhLayoutFooter>Pied de page</LhLayoutFooter>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>En-tête</LhLayoutHeader>
    <LhLayoutMain>Zone de contenu</LhLayoutMain>
    <LhLayoutFooter>Pied de page</LhLayoutFooter>
  </LhLayout>
</template>

Disposition avec barre latérale

direction contrôle explicitement la direction d'arrangement des enfants : horizontal par défaut (côte à côte), bascule automatiquement sur vertical en présence de LhLayoutAside, mais peut aussi être forcé manuellement.

direction

Côte à côte

Côte à côte

Empilés verticalement

Empilés verticalement

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

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>Côte à côte</LhLayoutMain>
    <LhLayoutMain>Côte à côte</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>Empilés verticalement</LhLayoutMain>
    <LhLayoutMain>Empilés verticalement</LhLayoutMain>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>Côte à côte</LhLayoutMain>
    <LhLayoutMain>Côte à côte</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>Empilés verticalement</LhLayoutMain>
    <LhLayoutMain>Empilés verticalement</LhLayoutMain>
  </LhLayout>
</template>

En présence de LhLayoutAside, le conteneur parent bascule automatiquement en direction verticale (l'en-tête en haut, la barre latérale et la zone principale côte à côte).

Barre latérale

En-tête

Barre latérale

Zone de contenu

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

<template>
  <LhLayout>
    <LhLayoutHeader>En-tête</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="Navigation latérale">Barre latérale</LhLayoutAside>
      <LhLayoutMain>Zone de contenu</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>En-tête</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="Navigation latérale">Barre latérale</LhLayoutAside>
      <LhLayoutMain>Zone de contenu</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

API

LhLayout Props

Prop	Description	Type	Valeur par défaut
direction	Direction d'arrangement (automatiquement vertical en présence d'un Aside)	"horizontal" | "vertical"	'horizontal'
sx	Props de mise en page sx	LhSxProps	—

LhLayoutAside Props

Prop	Description	Type	Valeur par défaut
width	Largeur de la barre latérale	number | string	—
ariaLabel	Nom accessible (nommage du landmark)	string	—
sx	Props de mise en page sx	LhSxProps	—

Header / Main / Footer partagent une seule prop sx.

Accessibilité

• Les balises sémantiques sont utilisées : header / main / footer / aside correspondent directement à des rôles landmark, sans ARIA supplémentaire
• En présence de plusieurs aside, il est recommandé de les distinguer avec ariaLabel (ex. « Navigation latérale », « Liens connexes »)

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/layout/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhLayoutProps

export interface LhLayoutProps {
  /** Direction d'arrangement (automatiquement vertical en présence d'un Aside) */
  direction?: 'horizontal' | 'vertical'
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhLayoutSectionProps

/** Props partagées par Header / Main / Footer */
export interface LhLayoutSectionProps {
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhLayoutAsideProps

export interface LhLayoutAsideProps extends LhLayoutSectionProps {
  /** Largeur de la barre latérale */
  width?: number | string
  /** Nom accessible (nommage du landmark) */
  ariaLabel?: string
}