Divider

v1.1.0

다양한 방향, 스타일, 색상을 지원하는 콘텐츠 구분선 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Divider } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

위쪽 콘텐츠

아래쪽 콘텐츠

horizontal

위

아래

vertical

왼쪽

오른쪽

variant="solid"

variant="dashed"

variant="dotted"

variant="gradient"

위쪽 콘텐츠

아래쪽 콘텐츠

color="default"

color="muted"

color="primary"

color="secondary"

size="sm"

size="md"

size="lg"

이름	타입	기본값	설명
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	구분선 방향
`variant`	`"solid" \| "dashed" \| "dotted" \| "gradient" \| "glass"`	`"solid"`	구분선 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	구분선 두께
`spacing`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	구분선 주변 여백
`color`	`"default" \| "muted" \| "primary" \| "secondary"`	`"default"`	구분선 색상

기본 사용법

import { Divider } from '@hua-labs/ui';

<Divider />

세로

<div className="flex h-20 items-center">
  <div>Left</div>
  <Divider orientation="vertical" />
  <div>Right</div>
</div>

변형

<Divider variant="dashed" />
<Divider variant="dotted" />
<Divider variant="gradient" />
<Divider variant="glass" />