Espaciado

Contenedor de maquetación que aporta un espaciado uniforme a los componentes hijos, implementado sobre el gap nativo de CSS. Es un contenedor de maquetación puro (role="presentation") y no participa en el árbol de accesibilidad.

Uso básico

Espaciado horizontal

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

<template>
  <LhSpace>
    <LhButton>Botón 1</LhButton>
    <LhButton>Botón 2</LhButton>
    <LhButton>Botón 3</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>Botón 1</LhButton>
    <LhButton>Botón 2</LhButton>
    <LhButton>Botón 3</LhButton>
  </LhSpace>
</template>

Espaciado vertical

Espaciado vertical

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

<template>
  <LhSpace direction="vertical">
    <LhButton>Botón 1</LhButton>
    <LhButton>Botón 2</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>Botón 1</LhButton>
    <LhButton>Botón 2</LhButton>
  </LhSpace>
</template>

Tamaño del espaciado

Las tres preset mapean a los tokens de tema --lh-spacing-*; también se admite un número de píxeles o un array [horizontal, vertical].

Tamaño del espaciado

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

<template>
  <!-- preset small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- preset medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- preset large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- Píxeles personalizados: 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- preset small -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- preset medium -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- preset large -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- Píxeles personalizados: 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

Ajuste de línea y alineación

Ajuste de línea

Etiqueta 1Etiqueta 2Etiqueta 3Etiqueta 4Etiqueta 5Etiqueta 6Etiqueta 7Etiqueta 8Etiqueta 9Etiqueta 10Etiqueta 11Etiqueta 12

alignment controla la alineación de los elementos hijos: por defecto al centro, y se puede cambiar a alineación al inicio o al final.

Alineación

Contenido más alto

Contenido más alto

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

<template>
  <!-- Permitir ajuste de línea -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Etiqueta {{ n }}</LhTag>
  </LhSpace>
  <!-- Alineación start -->
  <LhSpace alignment="start">
    <LhButton>alineación start</LhButton>
    <span style="height: 48px; line-height: 48px">Contenido más alto</span>
  </LhSpace>
  <!-- Alineación end -->
  <LhSpace alignment="end">
    <LhButton>alineación end</LhButton>
    <span style="height: 48px; line-height: 48px">Contenido más alto</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- Permitir ajuste de línea -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Etiqueta {{ n }}</LhTag>
  </LhSpace>
  <!-- Alineación start -->
  <LhSpace alignment="start">
    <LhButton>alineación start</LhButton>
    <span style="height: 48px; line-height: 48px">Contenido más alto</span>
  </LhSpace>
  <!-- Alineación end -->
  <LhSpace alignment="end">
    <LhButton>alineación end</LhButton>
    <span style="height: 48px; line-height: 48px">Contenido más alto</span>
  </LhSpace>
</template>

Space API

Props

Prop	Descripción	Tipo	Predeterminado
direction	Dirección de disposición	"horizontal" | "vertical"	'horizontal'
size	Espaciado: preset / número de píxeles / [horizontal, vertical]	number | "small" | "medium" | "large" | [number, number]	'medium'
wrap	Si se permite el ajuste de línea (solo en dirección horizontal)	boolean	true
alignment	Alineación	"start" | "center" | "end" | "baseline"	'start'
sx	Props de maquetación rápida (p. ej. { mt: 2 }), se fusionan con los estilos en línea y su prioridad es mayor que la de alignment	LhSxProps	—

Accesibilidad

• El contenedor es un elemento de maquetación puro con role="presentation" y no intercepta el foco
• El espaciado se basa en el gap nativo de CSS, sin envoltorios DOM sobre los elementos hijos

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/space/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):

LhSpaceProps

export interface LhSpaceProps {
  /** Dirección de disposición */
  direction?: 'horizontal' | 'vertical'
  /** Espaciado: preset / número de píxeles / [horizontal, vertical] */
  size?: LhSpaceSizeInput
  /** Si se permite el ajuste de línea (solo en dirección horizontal) */
  wrap?: boolean
  /** Alineación */
  alignment?: LhSpaceAlignment
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhSpaceSizeInput _{(de @lh-ui/share/core/space)}

/**
 * Espaciado normalizado: el preset mapea al token de spacing, un número se interpreta como px
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{(de @lh-ui/share/core/space)}

/** Alineación del espaciado */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'