Espacement

Gère l'espacement entre les contrôles d'une mise en page.

Utilisation de base

Utilisation de base

Preset mediumÉlémentÉlément

Preset largeÉlémentÉlément

Numérique 8pxÉlémentÉlément

Disposition verticaleÉlémentÉlément

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

export default function Demo() {
  return (
    <LhSpace size="large">
      <span>Élément un</span>
      <span>Élément deux</span>
      <span>Élément trois</span>
    </LhSpace>
  )
}

Space Props

Prop	Description	Type	Options	Valeur par défaut
direction	Direction d'arrangement	'horizontal' | 'vertical'	—	'horizontal'
size	Espacement	'small' | 'medium' | 'large' | number | [number, number]	—	'medium'
wrap	Retour à la ligne (uniquement en direction horizontale)	boolean	—	true
alignment	Alignement (align-items)	'start' | 'center' | 'end' | 'baseline'	—	'start'
sx	Raccourci de mise en page	SxProps	—	—

Implémentation de l'espacement

L'espacement est entièrement délégué au gap CSS natif : les paliers préréglés sont mappés aux jetons --lh-spacing-* (small=8 / medium=16 / large=24), les nombres sont traités en px, et le tableau [horizontal, vertical] contrôle les deux axes. Le composant n'encapsule pas ses enfants, nul besoin de SpaceItem.

Styles

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