Space スペース

レイアウトコントロール間のスペースです。

基本的な使い方

基本的な使い方

プリセット medium項目項目

プリセット large項目項目

数値 8px項目項目

縦並び項目項目

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

export default function Demo() {
  return (
    <LhSpace size="large">
      <span>アイテム 1</span>
      <span>アイテム 2</span>
      <span>アイテム 3</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'