Divider

구분선을 구현할 수 있는 컴포넌트입니다.

import { Divider } from 'sud-ui';

사용할 때

구분선을 구현할 때

사용예제

Top Right Content

This is Divider

Bottom Content

Content Usage

구분선 중앙에 표시할 내용을 지정할 수 있습니다.

import { Divider, Typography } from "sud-ui";

export default function App() {
  return (
    <div className="flex flex-col justify-center items-center">
      <div className="flex justify-center items-center">
        <Typography as="span">Top Left Content</Typography>
        <Divider vertical content="Divider" height="10em" />
        <Typography as="span">Top Right Content</Typography>
      </div>
      <Divider content="This is Divider" />
      <div className="flex justify-center items-center">
        <Typography as="span">Bottom Content</Typography>
      </div>
    </div>
  );
}

top

center

bottom

Content

This

Content

Vertical Align

수직 구분선 정렬 방식을 지정할 수 있습니다.

import { Divider, Typography, Card, Radio } from "sud-ui";
import { useState } from "react";

export default function App() {
  const [verticalAlign, setVerticalAlign] = useState("center");
  const verticalAlignOptions = [
    { label: "top", value: "top" },
    { label: "center", value: "center" },
    { label: "bottom", value: "bottom" }
  ];

  return (
    <div className="flex flex-col gap-[20px] justify-center items-center">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Radio.Group
            options={verticalAlignOptions}
            direction="horizontal"
            value={verticalAlign}
            onChange={setVerticalAlign}
          />
        </div>
      </Card>
      <div className="flex justify-center items-center">
        <Typography as="span">Content</Typography>
        <Divider
          vertical
          content="This"
          align={verticalAlign}
          height="5em"
        />
        <Typography as="span">Content</Typography>
      </div>
    </div>
  );
}

Left Content

Right Content

Vertical Usage

수직 구분선 사용 방법입니다.

left

center

right

This is Divider

Content

Horizontal Align

구분선 정렬 방식을 지정할 수 있습니다.

import { Divider, Typography, Card, Radio } from "sud-ui";
import { useState } from "react";

export default function App() {
  const [align, setAlign] = useState("center");
  const alignOptions = [
    { label: "left", value: "left" },
    { label: "center", value: "center" },
    { label: "right", value: "right" }
  ];

  return (
    <div className="flex flex-col gap-[20px] justify-center items-center">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Radio.Group
            options={alignOptions}
            direction="horizontal"
            value={align}
            onChange={setAlign}
          />
        </div>
      </Card>
      <Divider content="This is Divider" align={align} />
      <div className="flex justify-center items-center">
        <Typography as="span">Content</Typography>
      </div>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

content

구분선 중앙에 표시할 내용

ReactNode

-

align

내용 정렬 방식 (left, center, right, top, bottom)

left

|

center

|

right

|

top

|

bottom

center

borderWeight

구분선 두께

number

1

borderType

구분선 스타일

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

solid

color

내용 색상(palette값 또는 HEX code)

string

-

borderColor

구분선 색상(palette값 또는 HEX code)

string

-

width

구분선 너비

string | number

100%

height

구분선 높이

string | number

2em

vertical

수직 구분선 여부

boolean

false

border

테두리 표시 여부

boolean

true

colorType

테마 색상 타입

default

|

primary

|

success

|

warning

|

danger

|

info

|

red

|

rose

|

coral

|

orange

|

volcano

|

apricot

|

yellow

|

gold

|

amber

|

green

|

lime

|

mint

|

blue

|

sky

|

cerulean

|

indigo

|

cobalt

|

navy

|

purple

|

plum

|

orchid

|

forest

|

sage

|

warm-gray

|

cool-gray

|

neutral

|

text

|

ghost

default

className

추가 클래스명

string

-

style

추가 스타일

CSSProperties

{}

Soon UI Design

Divider

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관