Space 间距

布局控件之间的间距。

基础用法

基础用法

预设 medium项目项目

预设 large项目项目

数字 8px项目项目

垂直排列项目项目

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

export default function Demo() {
  return (
    <LhSpace size="large">
      <span>项目一</span>
      <span>项目二</span>
      <span>项目三</span>
    </LhSpace>
  )
}

Space Props

属性	说明	类型	可选值	默认值
direction	排列方向	'horizontal' | 'vertical'	—	'horizontal'
size	间距	'small' | 'medium' | 'large' | number | [number, number]	—	'medium'
wrap	是否换行（仅水平方向生效）	boolean	—	true
alignment	对齐方式（align-items）	'start' | 'center' | 'end' | 'baseline'	—	'start'
sx	快速布局属性	SxProps	—	—

间距实现

间距全部交给原生 CSS gap：预设档位映射 --lh-spacing-* 令牌（small=8 / medium=16 / large=24），数字视为 px，数组 [水平, 垂直] 分别控制两轴。组件不包裹子项，无需 SpaceItem。

样式

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