Space 간격

인접 요소 사이에 간격을 추가하는 레이아웃 컨테이너입니다. 수평/수직 방향, 프리셋 단계와 사용자 지정 간격, 줄바꿈과 정렬을 지원합니다.

간격

<template>
  <div class="demo-col">
    <p class="demo-note">수평 방향 + 프리셋 간격</p>
    <LhSpace>
      <LhButton>수묵</LhButton>
      <LhButton>화조</LhButton>
      <LhButton>인물</LhButton>
    </LhSpace>
    <p class="demo-note">수직 방향</p>
    <LhSpace direction="vertical">
      <LhButton>수묵</LhButton>
      <LhButton>화조</LhButton>
    </LhSpace>
    <p class="demo-note">사용자 지정 간격 + 줄바꿈</p>
    <LhSpace :size="24" wrap>
      <LhTag v-for="item in items" :key="item">{{ item }}</LhTag>
    </LhSpace>
    <p class="demo-note">정렬 방식 alignment=start</p>
    <LhSpace alignment="start">
      <LhButton>짧음</LhButton>
      <div style="height: 48px; padding: 12px; border: 1px dashed var(--lh-border-color)">높은 블록</div>
    </LhSpace>
  </div>
</template>

<script>
export default {
  data: () => ({ items: ['수묵', '화조', '인물', '공필', '사의', '몰골'] }),
}
</script>

Props

프로퍼티	설명	타입	기본값
direction	정렬 방향	'horizontal' \| 'vertical'	'horizontal'
size	간격: 프리셋 단계 / 픽셀 숫자 / [수평, 수직]	'small' \| 'medium' \| 'large' \| number \| [number, number]	'medium'
wrap	줄바꿈 허용 (수평 방향만)	boolean	false
alignment	교차축 정렬	'start' \| 'center' \| 'end' \| 'baseline'	'center'
sx	sx 레이아웃 단축 프로퍼티	—	—