Espaciado

Espacio entre los controles de un diseño.

Uso básico

Uso básico

Preset mediumElementoElemento

Preset largeElementoElemento

Numérico 8pxElementoElemento

Disposición verticalElementoElemento

import { LhSpace } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhSpace size="large">
      <span>Elemento uno</span>
      <span>Elemento dos</span>
      <span>Elemento tres</span>
    </LhSpace>
  )
}

Props de Space

Prop	Descripción	Tipo	Opciones	Predeterminado
direction	Dirección del arreglo	'horizontal' | 'vertical'	—	'horizontal'
size	Espaciado	'small' | 'medium' | 'large' | number | [number, number]	—	'medium'
wrap	Si se ajusta a otra línea (solo válido en dirección horizontal)	boolean	—	true
alignment	Alineación (align-items)	'start' | 'center' | 'end' | 'baseline'	—	'start'
sx	Propiedad abreviada de diseño	SxProps	—	—

Implementación del espaciado

El espaciado se delega por completo al gap nativo de CSS: los niveles predefinidos se mapean a los tokens --lh-spacing-* (small=8 / medium=16 / large=24), los números se interpretan como px y el arreglo [horizontal, vertical] controla ambos ejes por separado. El componente no envuelve a los hijos, por lo que no hace falta un SpaceItem.

Estilos

import '@lh-ui/react/style/space'