Space 간격

자식 컴포넌트에 통일된 간격을 제공하는 레이아웃 컨테이너로, 네이티브 CSS gap을 기반으로 구현되었습니다. 순수 레이아웃 컨테이너(role="presentation")이며 무장애 트리에 참여하지 않습니다.

기본 사용법

가로 간격

<script setup lang="ts">
</script>

<template>
  <LhSpace>
    <LhButton>버튼 1</LhButton>
    <LhButton>버튼 2</LhButton>
    <LhButton>버튼 3</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>버튼 1</LhButton>
    <LhButton>버튼 2</LhButton>
    <LhButton>버튼 3</LhButton>
  </LhSpace>
</template>

세로 간격

세로 간격

<script setup lang="ts">
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>버튼 1</LhButton>
    <LhButton>버튼 2</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>버튼 1</LhButton>
    <LhButton>버튼 2</LhButton>
  </LhSpace>
</template>

간격 크기

세 단계의 사전 설정은 --lh-spacing-* 테마 token에 매핑됩니다. 픽셀 숫자나 [가로, 세로] 배열도 지원합니다.

간격 크기

<script setup lang="ts">
</script>

<template>
  <!-- small 사전 설정 단계 -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- medium 사전 설정 단계 -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- large 사전 설정 단계 -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- 커스텀 픽셀 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- small 사전 설정 단계 -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- medium 사전 설정 단계 -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- large 사전 설정 단계 -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- 커스텀 픽셀 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

줄 바꿈과 정렬

줄 바꿈

태그 1태그 2태그 3태그 4태그 5태그 6태그 7태그 8태그 9태그 10태그 11태그 12

alignment는 자식 항목의 정렬 방식을 제어합니다. 기본은 가운데 정렬이며, 시작 또는 끝 정렬로 전환할 수 있습니다.

정렬 방식

높이가 큰 콘텐츠

높이가 큰 콘텐츠

<script setup lang="ts">
</script>

<template>
  <!-- 줄 바꿈 허용 -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">태그 {{ n }}</LhTag>
  </LhSpace>
  <!-- start 정렬 -->
  <LhSpace alignment="start">
    <LhButton>start 정렬</LhButton>
    <span style="height: 48px; line-height: 48px">높이가 큰 콘텐츠</span>
  </LhSpace>
  <!-- end 정렬 -->
  <LhSpace alignment="end">
    <LhButton>end 정렬</LhButton>
    <span style="height: 48px; line-height: 48px">높이가 큰 콘텐츠</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- 줄 바꿈 허용 -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">태그 {{ n }}</LhTag>
  </LhSpace>
  <!-- start 정렬 -->
  <LhSpace alignment="start">
    <LhButton>start 정렬</LhButton>
    <span style="height: 48px; line-height: 48px">높이가 큰 콘텐츠</span>
  </LhSpace>
  <!-- end 정렬 -->
  <LhSpace alignment="end">
    <LhButton>end 정렬</LhButton>
    <span style="height: 48px; line-height: 48px">높이가 큰 콘텐츠</span>
  </LhSpace>
</template>

Space API

Props

프로퍼티	설명	타입	기본값
direction	정렬 방향	"horizontal" | "vertical"	'horizontal'
size	간격: 사전 설정 단계 / 픽셀 숫자 / [가로, 세로]	number | "small" | "medium" | "large" | [number, number]	'medium'
wrap	줄 바꿈 허용 여부 (가로 방향만)	boolean	true
alignment	정렬 방식	"start" | "center" | "end" | "baseline"	'start'
sx	빠른 레이아웃 속성 (예: { mt: 2 }), 인라인 스타일에 병합되며 우선순위가 alignment보다 높음	LhSxProps	—

무장애

• 컨테이너는 role="presentation"인 순수 레이아웃 요소이며 포커스를 가로채지 않습니다
• 간격은 네이티브 CSS gap을 기반으로 하며, DOM으로 자식 요소를 감싸지 않습니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/space/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhSpaceProps

export interface LhSpaceProps {
  /** 정렬 방향 */
  direction?: 'horizontal' | 'vertical'
  /** 간격: 사전 설정 단계 / 픽셀 숫자 / [가로, 세로] */
  size?: LhSpaceSizeInput
  /** 줄 바꿈 허용 여부 (가로 방향만) */
  wrap?: boolean
  /** 정렬 방식 */
  alignment?: LhSpaceAlignment
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSpaceSizeInput _{(출처: @lh-ui/share/core/space)}

/**
 * 정규화된 간격: 사전 설정 단계는 spacing token에 매핑, 숫자는 px로 취급
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{(출처: @lh-ui/share/core/space)}

/** 간격 정렬 방식 */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'