Contenedor de diseño

Esqueleto a nivel de página: LhLayout + LhLayoutHeader / LhLayoutAside / LhLayoutMain / LhLayoutFooter, todos ellos con etiquetas semánticas (header / aside / main / footer); el landmark se obtiene de forma natural a partir de la etiqueta.

Diseño superior, central e inferior

Superior, central e inferior

Encabezado

Área de contenido

Pie de página

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

<template>
  <LhLayout>
    <LhLayoutHeader>Encabezado</LhLayoutHeader>
    <LhLayoutMain>Área de contenido</LhLayoutMain>
    <LhLayoutFooter>Pie de página</LhLayoutFooter>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>Encabezado</LhLayoutHeader>
    <LhLayoutMain>Área de contenido</LhLayoutMain>
    <LhLayoutFooter>Pie de página</LhLayoutFooter>
  </LhLayout>
</template>

Diseño con barra lateral

direction controla explícitamente la dirección de disposición de los hijos: por defecto horizontal (en paralelo); cuando incluye LhLayoutAside cambia automáticamente a vertical, y también se puede especificar manualmente.

direction

En paralelo horizontal

En paralelo horizontal

Apilado vertical

Apilado vertical

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

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>En paralelo horizontal</LhLayoutMain>
    <LhLayoutMain>En paralelo horizontal</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>Apilado vertical</LhLayoutMain>
    <LhLayoutMain>Apilado vertical</LhLayoutMain>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>En paralelo horizontal</LhLayoutMain>
    <LhLayoutMain>En paralelo horizontal</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>Apilado vertical</LhLayoutMain>
    <LhLayoutMain>Apilado vertical</LhLayoutMain>
  </LhLayout>
</template>

Cuando incluye LhLayoutAside, el contenedor padre cambia automáticamente a la dirección vertical (header arriba, aside y main en paralelo).

Barra lateral

Encabezado

Barra lateral

Área de contenido

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

<template>
  <LhLayout>
    <LhLayoutHeader>Encabezado</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="Navegación lateral">Barra lateral</LhLayoutAside>
      <LhLayoutMain>Área de contenido</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>Encabezado</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="Navegación lateral">Barra lateral</LhLayoutAside>
      <LhLayoutMain>Área de contenido</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

API

LhLayout Props

Prop	Descripción	Tipo	Predeterminado
direction	Dirección de disposición (cambia automáticamente a vertical cuando incluye Aside)	"horizontal" | "vertical"	'horizontal'
sx	Props de maquetación rápida sx	LhSxProps	—

LhLayoutAside Props

Prop	Descripción	Tipo	Predeterminado
width	Ancho de la barra lateral	number | string	—
ariaLabel	Nombre accesible (denominación del landmark)	string	—
sx	Props de maquetación rápida sx	LhSxProps	—

Header / Main / Footer comparten una única prop sx.

Accesibilidad

• Se usan etiquetas semánticas: header / main / footer / aside se mapean directamente al rol de landmark, sin necesidad de ARIA adicional
• Con varios aside se recomienda distinguirlos con ariaLabel (p. ej. "Navegación lateral", "Enlaces relacionados")

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/layout/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhLayoutProps

export interface LhLayoutProps {
  /** Dirección de disposición (cambia automáticamente a vertical cuando incluye Aside) */
  direction?: 'horizontal' | 'vertical'
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhLayoutSectionProps

/** Props compartidas por Header / Main / Footer */
export interface LhLayoutSectionProps {
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhLayoutAsideProps

export interface LhLayoutAsideProps extends LhLayoutSectionProps {
  /** Ancho de la barra lateral */
  width?: number | string
  /** Nombre accesible (denominación del landmark) */
  ariaLabel?: string
}