Popover

요소를 클릭하거나 호버하여 팝오버를 표시할 수 있습니다.

import { Popover } from 'sud-ui';

사용할 때

요소를 클릭하거나 호버하여 팝오버를 표시할 때

사용예제

Basic Usage

기본 사용 예시입니다.

Placement

위치 예시입니다.

import { Button, Popover, Segmented } from "sud-ui";
import { useState } from "react";

export default function App() {
  const [placement, setPlacement] = useState("bottom");

  return (
    <div>
      <div>
        <Segmented
          options={["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right", "left-top", "left-bottom", "right-top", "right-bottom"]}
          value={placement}
          onChange={(value) => setPlacement(value)}
          style={{ marginBottom: "20px" }}
        />
      </div>
      <Popover
        title="Title"
        content="This is a popover"
        placement={placement}
      >
        <Button>Hover me</Button>
      </Popover>
    </div>
  );
}

Close On Click

클릭 시 닫기 여부 예시입니다.

import { Button, Popover, Typography } from "sud-ui";

export default function App() {
  return (
    <div className="flex gap-[20px]">
      <Popover
        title="Title"
        content={
          <div className="flex flex-col gap-[20px]">
            <Typography>The popup will not close when clicked</Typography>
            <div>
              <Button size="sm" colorType="danger">
                Close
              </Button>
            </div>
          </div>
        }
        closeOnClick={false}
        trigger="click"
      >
        <Button>Click me</Button>
      </Popover>
    </div>
  );
}

Trigger

트리거 방식 예시입니다.

import { Button, Popover } from "sud-ui";

export default function App() {
  return (
    <div className="flex gap-[20px]">
      <Popover title="Title" content="This is a popover">
        <Button>Hover me</Button>
      </Popover>
      <Popover
        title="Title"
        content="This is a popover"
        trigger="click"
        placement="bottom"
      >
        <Button>Click me</Button>
      </Popover>
    </div>
  );
}

Disabled

비활성화 예시입니다.

Style Customization

스타일 커스터마이징 예시입니다.

import { Button, Popover } from "sud-ui";

export default function App() {
  return (
    <div className="flex gap-[20px]">
      <Popover
        title="Title"
        content="This is a popover"
        open={true}
        background="sky-2"
        color="mint-8"
        borderColor="black-7"
        borderType="dashed"
        borderWeight={2}
        shadow="lg"
      >
        <Button>Hover me</Button>
      </Popover>
    </div>
  );
}

사용 방법

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

children

Popover 트리거 역할을 하는 요소 (ReactNode)

ReactNode

-

title

Popover 제목 (ReactNode)

ReactNode

-

content

Popover 내용 (ReactNode)

ReactNode

-

trigger

트리거 방식입니다. click은 Enter 또는 Space로 열 수 있고, 열린 팝업은 Escape로 닫을 수 있습니다. contextMenu는 플랫폼의 컨텍스트 메뉴 입력을 따릅니다.

click

|

hover

|

contextMenu

hover

placement

Popover 위치 (PopupPlacement)

top

|

bottom

|

left

|

right

|

top-left

|

top-right

|

bottom-left

|

bottom-right

|

left-top

|

left-bottom

|

right-top

|

right-bottom

bottom

open

Popover 열림 상태 (제어용)

boolean

-

defaultOpen

Popover 기본 열림 상태

boolean

false

onOpenChange

Popover 열림 상태 변경 콜백 ((open: boolean) => void)

(open: boolean) => void

-

closeOnClick

클릭 시 닫기 여부

boolean

true

arrow

화살표 표시 여부

boolean

true

disabled

비활성화 여부

boolean

false

divider

구분선 표시 여부

boolean

false

background

배경색(palette값 또는 HEX code)

string

-

color

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

string

-

border

테두리 표시 여부

boolean

true

borderColor

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

string

-

borderType

테두리 스타일

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

solid

borderWeight

테두리 두께

number

1

shadow

그림자 효과

none

|

sm

|

md

|

lg

sm

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)

CSSProperties

{}

Soon UI Design

Popover

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관