TitleButton

Action

페이지 헤더에서 제목을 눌러 메뉴를 여는 버튼.

Usage

페이지 헤더의 제목 자체를 눌러 메뉴를 여는 트리거(제목 + chevron)

import

import { TitleButton } from '@mildang/design-system/TitleButton';

API Reference

TitleButton Props

Prop

Type

Default

children

필수

ReactNode

지정 안 함

label

필수

ReactNode

지정 안 함

align

"end" | "start" | "center"

start

contentProps

Omit<MenuContentProps, "children" | "sideOffset" | "align" | "side">

지정 안 함

defaultOpen

boolean

지정 안 함

disabled

boolean

지정 안 함

endIcon

ReactNode

지정 안 함

modal

boolean

지정 안 함

onOpenChange

(open: boolean) => void

지정 안 함

open

boolean

지정 안 함

side

"bottom" | "left" | "right" | "top"

지정 안 함

sideOffset

number

지정 안 함

예제

비활성

바꿀 대상이 하나뿐일 때 사용자가 메뉴를 열지 못하도록 비활성화한 상태입니다.

코드

Open in Playground

import { TitleButton } from '@mildang/design-system/TitleButton';
import { Menu } from '@mildang/design-system/Menu';

const TitleButtonDisabledExample = () => (
    <TitleButton label="Title" disabled>
      <Menu.Item>Option</Menu.Item>
    </TitleButton>
  );

export default TitleButtonDisabledExample;

기본 사용

제목을 눌러 화면을 바꾸는 메뉴를 엽니다 — 앱 화면에서는 modal 을 넘기지 않습니다.

코드

Open in Playground

import { TitleButton } from '@mildang/design-system/TitleButton';
import { Menu } from '@mildang/design-system/Menu';

const TitleButtonDefaultExample = () => (
    <TitleButton label="Title">
      <Menu.Group>
        <Menu.Label>Label</Menu.Label>
        <Menu.Item>Option</Menu.Item>
        <Menu.Item>Option</Menu.Item>
        <Menu.Item>Option</Menu.Item>
      </Menu.Group>
      <Menu.Separator />
      <Menu.Group>
        <Menu.Label>Label</Menu.Label>
        <Menu.Item>Option</Menu.Item>
        <Menu.Item>Option</Menu.Item>
        <Menu.Item>Option</Menu.Item>
      </Menu.Group>
    </TitleButton>
  );

export default TitleButtonDefaultExample;

Example

코드

Open in Playground

import { TitleButton } from '@mildang/design-system/TitleButton';
import { Menu } from '@mildang/design-system/Menu';

const TitleButtonExampleExample = () => (
    <TitleButton label="2학년 1반 수학">
      <Menu.Item>수업 공간</Menu.Item>
      <Menu.Item>오늘의 수업</Menu.Item>
      <Menu.Separator />
      <Menu.Item>학급별 수업 관리</Menu.Item>
    </TitleButton>
  );

export default TitleButtonExampleExample;