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'

기본 사용법​

Space Props​

스타일​

기본 사용법

Space Props

스타일