packagesreactcomponentsSpacer

Spacer

간격을 선언적으로 줄 수 있는 컴포넌트입니다.

Props

이름타입설명기본값
orientation'vertical' | 'horizontal'간격의 방향을 지정합니다. 'vertical'이면 위/아래에, 'horizontal'이면 좌/우에 간격을 제공합니다.vertical
sizestring | number간격의 크기를 지정합니다. 숫자를 입력하면 px 단위로 변환되고, 문자열이면 그대로 사용됩니다.1rem
asElementType(선택) 렌더링할 요소의 타입을 지정합니다. 예를 들어, 'div', 'span' 등으로 변경할 수 있습니다.div
…rest기타 HTML 속성 및 이벤트 핸들러추가적인 HTML 속성 및 이벤트 핸들러가 전달됩니다.-

Usage

수직 간격 추가

import { Spacer } from '@teamsparta/react';
 
function VerticalExample() {
  return (
    <>
      <div>상단 요소</div>
      <Spacer size={20} />
      <div>하단 요소</div>
    </>
  );
}

수평 간격 추가

function HorizontalExample() {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <div>왼쪽 요소</div>
      <Spacer orientation="horizontal" size={50} />
      <div>오른쪽 요소</div>
    </div>
  );
}

다형성 사용 예

function PolymorphicExample() {
  return (
    <>
      <div>상단 요소</div>
      <Spacer as="span" size={20} />
      <div>하단 요소</div>
    </>
  );
}
SeparatedSuspense