FloatButton

페이지 위에 고정되어 있는 버튼 컴포넌트입니다.

import { FloatButton } from 'sud-ui';

사용할 때

사이트의 글로벌 기능을 제공할 때

어떤 페이지에서든 볼 수 있는 버튼이 필요할 때

사용예제

Basic Usage

기본적인 사용 방법입니다.

Placement

버튼의 위치를 설정합니다.

import React from "react";
import { FloatButton } from "sud-ui";
import { Chat } from "sud-icons";

export default function Example() {
  return (
    <>
      <FloatButton 
        icon={<Chat />} 
        placement="top-left"
      />
      <FloatButton 
        icon={<Chat />} 
        placement="top-center"
      />
      <FloatButton 
        icon={<Chat />} 
        placement="top-right"
      />
      <FloatButton 
        icon={<Chat />} 
        placement="bottom-left"
      />
      <FloatButton 
        icon={<Chat />} 
        placement="bottom-center"
      />
      <FloatButton 
        icon={<Chat />} 
        placement="bottom-right"
      />
    </>
  );
}

Extended Button Direction

확장 버튼의 방향을 설정합니다.

import React from "react";
import { FloatButton } from "sud-ui";
import { AngleLeft, MailOutline, Chat } from "sud-icons";

export default function Example() {
  return (
    <>
      <FloatButton 
        icon={<AngleLeft />}
        direction="left"
        actions={[
          {
            icon: <MailOutline />,
            onClick: () => {}
          },
          {
            icon: <Chat />,
            onClick: () => {}
          }
        ]}
      />
    </>
  );
}

Shape

버튼의 모양을 설정합니다.

import React from "react";
import { FloatButton } from "sud-ui";
import { Chat } from "sud-icons";

export default function Example() {
  return (
    <>
      <FloatButton 
        icon={<Chat />} 
        shape="rounded" 
        style={{ right: 24 }}
      />
      <FloatButton 
        icon={<Chat />} 
        shape="square" 
        style={{ right: 84 }}
      />
      <FloatButton 
        icon={<Chat />} 
        shape="circle" 
        style={{ right: 124 }}
      />
    </>
  );
}

Extended Button

확장 버튼을 사용할 수 있습니다.

import React from "react";
import { FloatButton } from "sud-ui";
import { UserOutline, MailOutline, Chat } from "sud-icons";

export default function Example() {
  return (
    <>
      <FloatButton 
        icon={<UserOutline />}
        actions={[
          {
            icon: <MailOutline />,
            onClick: () => {}
          },
          {
            icon: <Chat />,
            onClick: () => {}
          }
        ]}
      />
    </>
  );
}

사용 방법

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

icon

버튼에 표시할 아이콘

ReactNode

-

onClick

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

(e: MouseEvent<HTMLButtonElement>) => void

-

actions

확장 버튼 목록 (FloatButtonAction[])

FloatButtonAction[]

[]

placement

버튼의 위치

bottom-right

|

bottom-left

|

bottom-center

|

top-right

|

top-left

|

top-center

|

left-center

|

right-center

bottom-right

direction

확장 버튼 방향 (FloatButtonDirection)

up

|

down

|

left

|

right

-

shape

버튼의 모양

square

|

circle

|

rounded

|

capsule

circle

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

primary

background

버튼의 배경색(palette값 또는 HEX code)

string

-

color

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

string

-

border

테두리 표시 여부

boolean

false

borderColor

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

string

-

borderType

버튼의 테두리 스타일

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

solid

borderWeight

버튼의 테두리 두께

number

1

disabled

버튼 비활성화 여부

boolean

false

shadow

버튼의 그림자 효과

none

|

sm

|

md

|

lg

md

subColorType

확장 버튼의 기본 색상 타입

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

size

버튼의 크기

xs

|

sm

|

md

|

lg

|

xl

md

style

추가 스타일

CSSProperties

{}

className

추가 클래스명

string

-

ariaLabel

ARIA 라벨

string

-

ariaPressed

ARIA pressed 상태

boolean

-

ariaExpanded

ARIA expanded 상태

boolean

-

ariaControls

ARIA controls 속성

string

-

role

ARIA 역할

string

button

Soon UI Design

FloatButton

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관