Split button

Playground

'use client';
import {
  SplitButton,
  SplitButtonAction,
  SplitButtonMenuTrigger,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@mbsw/ui';
import { ChevronDown, Plus, ArrowRight } from 'lucide-react';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "trailingIcon": false,
    "label": "텍스트",
    "disabled": false
  };
  const items = ['contents 1', 'contents 2'];
  return (
    <SplitButton disabled={settings.disabled}>
      <SplitButtonAction
        leadingIcon={settings.leadingIcon ? Plus : undefined}
        trailingIcon={settings.trailingIcon ? ArrowRight : undefined}
      >
        {settings.label}
      </SplitButtonAction>
      <DropdownMenu>
        <SplitButtonMenuTrigger
          aria-label={"옵션 열기"}
          icon={ChevronDown}
        />
        <DropdownMenuContent align="end" style={{ width: 180 }}>
          {items.map((label, index) => (
            <DropdownMenuItem key={index}>{label}</DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </SplitButton>
  );
}

Properties

Leading icon

Trailing icon

Disabled

Content

Label

Usage

기본 동작과 DropdownMenu를 한 그룹으로 조합합니다. SplitButtonAction 다음에 DropdownMenu를 배치합니다.

'use client';
import {
  SplitButton,
  SplitButtonAction,
  SplitButtonMenuTrigger,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@mbsw/ui';
import { ChevronDown } from 'lucide-react';

export default function Example({
  onAdd,
  onAddFromTemplate,
}: {
  onAdd: () => void;
  onAddFromTemplate: () => void;
}) {
  return (
    <SplitButton>
      <SplitButtonAction onClick={onAdd}>{"텍스트"}</SplitButtonAction>
      <DropdownMenu>
        <SplitButtonMenuTrigger
          aria-label={"옵션 열기"}
          icon={ChevronDown}
        />
        <DropdownMenuContent>
          <DropdownMenuItem onSelect={onAddFromTemplate}>
            contents 1
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SplitButton>
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

SplitButtonSplitButtonActionSplitButtonMenuTrigger