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'