Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

import React from 'react';
import { Menu, toast } from 'sud-ui';

const BasicMenu = () => {
  const items = [
    {
      key: "home",
      label: "Home",
      onClick: () => toast.info("Home clicked")
    },
    {
      key: "components",
      label: "Components",
      children: [
        {
          key: "button",
          label: "Button",
          onClick: () => toast.info("Button clicked")
        },
        {
          key: "input",
          label: "Input",
          onClick: () => toast.info("Input clicked")
        }
      ]
    },
    {
      key: "about",
      label: "About",
      onClick: () => toast.info("About clicked")
    }
  ];

  return <Menu items={items} />;
};

export default BasicMenu;

Horizontal

메뉴를 수평으로 배치하고 하위 메뉴를 팝오버 형태로 표시합니다.

import React from 'react';
import { Menu, toast } from 'sud-ui';

const HorizontalPopoverMenu = () => {
  const items = [
    {
      key: "home",
      label: "Home",
      onClick: () => toast.info("Home clicked")
    },
    {
      key: "components",
      label: "Components",
      children: [
        {
          key: "button",
          label: "Button",
          onClick: () => toast.info("Button clicked")
        },
        {
          key: "input",
          label: "Input",
          onClick: () => toast.info("Input clicked")
        }
      ]
    },
    {
      key: "about",
      label: "About",
      onClick: () => toast.info("About clicked")
    }
  ];

  return <Menu items={items} expandType="popover" horizontal border />;
};

export default HorizontalPopoverMenu;

Color Customization

메뉴의 색상을 커스텀할 수 있습니다.

import React from 'react';
import { Menu, toast } from 'sud-ui';

const CustomColorMenu = () => {
  const items = [
    {
      key: "home",
      label: "Home",
      onClick: () => toast.info("Home clicked")
    },
    {
      key: "components",
      label: "Components",
      children: [
        {
          key: "button",
          label: "Button",
          onClick: () => toast.info("Button clicked")
        },
        {
          key: "input",
          label: "Input",
          onClick: () => toast.info("Input clicked")
        }
      ]
    },
    {
      key: "about",
      label: "About",
      onClick: () => toast.info("About clicked")
    }
  ];

  return (
    <Menu
      items={items}
      colorType="sub"
      selectedColor="purple"
      selectedTextColor="white"
      hoverColor="yellow"
      hoverTextColor="black"
    />
  );
};

export default CustomColorMenu;

Popover

하위 메뉴를 팝오버 형태로 표시합니다.

import React from 'react';
import { Menu, toast } from 'sud-ui';

const PopoverMenu = () => {
  const items = [
    {
      key: "home",
      label: "Home",
      onClick: () => toast.info("Home clicked")
    },
    {
      key: "components",
      label: "Components",
      children: [
        {
          key: "button",
          label: "Button",
          onClick: () => toast.info("Button clicked")
        },
        {
          key: "input",
          label: "Input",
          onClick: () => toast.info("Input clicked")
        }
      ]
    },
    {
      key: "about",
      label: "About",
      onClick: () => toast.info("About clicked")
    }
  ];

  return <Menu items={items} expandType="popover" border />;
};

export default PopoverMenu;

General
Layout

Group

메뉴 항목을 그룹으로 구분하여 표시합니다.

import React from 'react';
import { Menu, toast } from 'sud-ui';

const GroupMenu = () => {
  const items = [
    {
      key: "general",
      title: "General",
      mode: "group",
      children: [
        { key: "button", label: "Button" },
        { key: "icon", label: "Icon" }
      ]
    },
    {
      key: "layout",
      title: "Layout",
      mode: "group",
      children: [
        { key: "header", label: "Header" },
        { key: "footer", label: "Footer" }
      ]
    }
  ];

  return <Menu items={items} />;
};

export default GroupMenu;

Divider

메뉴 항목 사이에 구분선을 표시합니다.

import React from 'react';
import { Menu, toast } from 'sud-ui';

const DividerMenu = () => {
  const items = [
    {
      key: "home",
      label: "Home",
      onClick: () => toast.info("Home clicked")
    },
    {
      key: "components",
      label: "Components",
      children: [
        {
          key: "button",
          label: "Button",
          onClick: () => toast.info("Button clicked")
        },
        {
          key: "input",
          label: "Input",
          onClick: () => toast.info("Input clicked")
        }
      ]
    },
    {
      key: "about",
      label: "About",
      onClick: () => toast.info("About clicked")
    }
  ];

  return <Menu items={items} divider />;
};

export default DividerMenu;

사용 방법

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

items

메뉴 항목 목록 (MenuItem[])

MenuItem[]

[]

selectedKey

현재 선택된 메뉴 항목의 key

string

defaultSelectedKey

비제어형 메뉴의 초기 선택 key입니다. accordion과 popover 확장 방식 모두에 적용됩니다.

string

onSelect

메뉴 항목 선택 시 호출되는 함수 (key: string) => void

(key: string) => void

expandType

하위 메뉴 확장 방식 (MenuExpandType)

accordion

popover

accordion

horizontal

메뉴를 수평으로 배치할지 여부 (expandType이 'popover'일 때만 동작)

boolean

false

selectedColor

선택된 메뉴 항목의 배경색(palette값 또는 HEX code)

string

selectedTextColor

선택된 메뉴 항목의 텍스트 색상(palette값 또는 HEX code)

string

hoverColor

호버 시 메뉴 항목의 배경색(palette값 또는 HEX code)

string

hoverTextColor

호버 시 메뉴 항목의 텍스트 색상(palette값 또는 HEX code)

string

divider

메뉴 항목 사이에 구분선을 표시할지 여부

boolean

false

dividerColor

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

string

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

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

shape

메뉴의 모양

square

circle

rounded

capsule

rounded

shadow

메뉴의 그림자 효과

none

placement

팝오버 메뉴의 위치 (expandType이 'popover'일 때만 동작)

[

top

bottom

left

right

top

bottom

left

right

]

['bottom', 'right']

className

추가 클래스명

string

style

추가 스타일

CSSProperties

level

메뉴의 중첩 레벨

number

parentContentRef

부모 컨텐츠 요소의 참조

RefObject<HTMLElement>

개인정보 처리방침

서비스 약관

Soon UI Design

Menu

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관