Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Div

외부 요소에 스타일, 클릭 이벤트를 쉽게 적용할 수 있는 컴포넌트입니다.

import { Div } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

외부 요소에 스타일, 클릭 이벤트를 적용할 때

사용예제

#d46b08

orange-7

Basic Usage

기본 사용 예시입니다.

import { Card, Div, Typography } from "sud-ui";
import { ShieldQuarterFill } from "sud-icons";

export default function App() {
  return (
    <div className="grid grid-cols-2 gap-[10px]">
      <Card width="100%">
        <div className="flex flex-col justify-center items-center gap-[10px]">
          <ShieldQuarterFill size={100} color="#d46b08" />
          <Typography color="primary">#d46b08</Typography>
        </div>
      </Card>
      <Card width="100%">
        <Div className="flex flex-col justify-center items-center gap-[10px]" color="orange-7">
          <ShieldQuarterFill size={100} />
          <Typography color="orange-7">orange-7</Typography>
        </Div>
      </Card>
    </div>
  );
}

사용 방법

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

children

Div 내부에 표시될 자식 요소

ReactNode

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

background

배경색(palette값 또는 HEX code)

string

color

텍스트 색상(palette값 또는 HEX code)

string

onClick

클릭 이벤트 핸들러 (e: MouseEvent<HTMLDivElement>) => void

(e: MouseEvent<HTMLDivElement>) => void

border

테두리 표시 여부

boolean

false

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

shadow

그림자 효과

none

style

추가 스타일

React.CSSProperties

{}

className

추가 클래스명

string

개인정보 처리방침

서비스 약관