스페이스

스페이스 (Space)

출처: 문서

본문

Divider가 있긴 하지만, 요소들을 분리할 때 Divider를 하나 이상 써야 하는 경우가 있어요. 그래서 각 요소를 Divider로 쌓아 올리곤 하는데, 그렇게 하면 코드만 지저분해지고 유지보수도 어려워져요. Space는 이런 상황에서 생산성과 깔끔함을 동시에 제공해주는 컴포넌트예요.

기본 사용법 (Basic Usage)

가장 기본적인 용도는 각 컴포넌트 사이에 일정한 간격을 제공하는 거예요.

{{ 'List item ' + o }}

세로 레이아웃 (Vertical Layout)

direction 속성으로 레이아웃을 제어해요. 내부적으로는 flex-direction을 이용해서 구현해요. 세로 레이아웃도 지원해요.

{{ 'List item ' + o }}

스페이스 크기 제어 (Control the Size of the Space)

size API로 스페이스 크기를 제어할 수 있어요. 내장된 크기인 small, default, large로 설정할 수 있는데, 각각 8px, 12px, 16px에 해당해요. 기본 크기는 small, 즉 8px이에요. 커스텀 크기로도 덮어쓸 수 있어요. 자세한 내용은 다음 부분을 참고해주세요.

import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'

const size = ref('default')

커스텀 크기 (Customized Size)

내장된 크기가 비즈니스 요구를 충족하지 못할 때는 숫자 타입의 커스텀 크기를 사용해서 항목 사이 간격을 조절할 수 있어요.

import { ref } from 'vue'

const size = ref(20)

TIP ElSpace를 조상 요소의 너비(높이)에 의존하는 컴포넌트(예: ElSlider)와 함께 사용하지 마세요. 그런 경우 트리거 버튼을 드래그하면 바가 커지면서 커서와 트리거 버튼 사이에 어긋남이 생겨요.

자동 줄바꿈 (Auto Wrapping)

가로 모드에서는 wrap(bool 타입)으로 자동 줄바꿈 동작을 제어할 수 있어요.

스페이서 (Spacer)

빈 공간보다 더 많은 걸 원할 때가 있어서, spacer를 사용할 수 있어요.

리터럴 타입 스페이서 (Literal Type Spacer)

import { ref } from 'vue'

const size = ref(10)

VNode 스페이서 (Spacer Can Also Be VNode)

import { h, ref } from 'vue'
import { ElDivider } from 'element-plus'

const size = ref(10)
const spacer = h(ElDivider, { direction: 'vertical' })

정렬 (Alignment)

이 속성으로 자식 노드의 정렬을 조절할 수 있어요. 원하는 값은 align-items에서 확인할 수 있어요.

string
 button

   header
  body

.alignment-container {
  width: 240px;
  margin-bottom: 20px;
  padding: 8px;
  border: 1px solid var(--el-border-color);
}

컨테이너 채우기 (Fill the Container)

fill(Boolean 타입) 파라미터로 자식 노드가 컨테이너를 자동으로 채울지 제어할 수 있어요. 아래 예시에서 fill로 설정하면 자식 노드의 너비가 컨테이너의 너비에 자동으로 맞춰져요.

          Card name
          Operation button

        {{ 'List item ' + o }}

import { ref } from 'vue'

const fill = ref(true)

fillRatio 파라미터로 채우는 비율을 직접 지정할 수도 있어요. 기본값은 100으로, 부모 컨테이너 너비의 100% 기준으로 채우는 걸 뜻해요. 가로 레이아웃과 세로 레이아웃의 표현이 조금 다르다는 점에 주의하세요. 구체적인 효과는 아래 예시에서 확인할 수 있어요.

    fillRatio:

          Card name
          Operation button

        {{ 'List item ' + o }}

import { ref } from 'vue'

import type { SpaceInstance } from 'element-plus'

const direction = ref('horizontal')
const fillRatio = ref(30)

API

속성 (Attributes)

슬롯 (Slots)

더 알아보기 (Learn more)