Split button

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

SplitButton

SplitButtonAction

SplitButtonMenuTrigger

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

SplitButton

SplitButton 속성
Prop	Type	필수 여부
`children`	`readonly [ReactElement<SplitButtonActionProps, string \| JSXElementConstructor<any>>, ReactElement<DropdownMenuProps, string \| JSXElementConstructor<any>>]`	필수
`disabled`	`boolean`	선택

SplitButtonAction

SplitButtonAction 속성
Prop	Type	필수 여부
`children`	`NonEmptyActionChild`	필수
`leadingIcon`	`IconComponent`	선택
`trailingIcon`	`IconComponent`	선택

SplitButtonMenuTrigger

SplitButtonMenuTrigger 속성
Prop	Type	필수 여부
`aria-label`	`string`	필수
`icon`	`IconComponent`	필수

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type ReactElement, type ReactNode, type SVGProps, type ComponentPropsWithoutRef, type ComponentRef, type RefAttributes } from 'react';

import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';

export type DropdownMenuProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;

export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type IconComponent = ElementType<SVGProps<SVGSVGElement>>;

type NonEmptyActionChild = Exclude<ReactNode, boolean | null | undefined>;

export type SplitButtonProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & DataAttributes & {
    children: readonly [
        ReactElement<SplitButtonActionProps>,
        ReactElement<Parameters<typeof DropdownMenu>[0]>
    ];
    disabled?: boolean;
};

export type SplitButtonActionProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & DataAttributes & {
    children: NonEmptyActionChild;
    leadingIcon?: IconComponent;
    trailingIcon?: IconComponent;
};

export type SplitButtonMenuTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children'> & DataAttributes & {
    'aria-label': string;
    icon: IconComponent;
};

export declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & DataAttributes & {
    children: readonly [ReactElement<SplitButtonActionProps>, ReactElement<Parameters<typeof DropdownMenu>[0]>];
    disabled?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;

export declare const SplitButtonAction: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & DataAttributes & {
    children: NonEmptyActionChild;
    leadingIcon?: IconComponent;
    trailingIcon?: IconComponent;
} & import("react").RefAttributes<HTMLButtonElement>>;

export declare const SplitButtonMenuTrigger: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children"> & DataAttributes & {
    'aria-label': string;
    icon: IconComponent;
} & import("react").RefAttributes<HTMLButtonElement>>;