Dropdown menu

Exports

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

Props

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

DropdownMenuCheckboxItem

DropdownMenuCheckboxItem 속성
PropType필수 여부
size'lg' | 'md' | 'sm'선택
variant'default' | 'destructive'선택

DropdownMenuItem

DropdownMenuItem 속성
PropType필수 여부
size'lg' | 'md' | 'sm'선택
variant'default' | 'destructive'선택
asChildboolean조건부
descriptionstring조건부

DropdownMenuLabel

DropdownMenuLabel 속성
PropType필수 여부
asChildboolean조건부
childrenReactNode | ReactElement<unknown, string | JSXElementConstructor<any>>조건부

DropdownMenuSubTrigger

DropdownMenuSubTrigger 속성
PropType필수 여부
size'lg' | 'md' | 'sm'선택

Type reference

전체 타입 보기

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

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

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

export type DropdownMenuItemSize = 'lg' | 'md' | 'sm';

export type DropdownMenuItemVariant = 'default' | 'destructive';

type DropdownMenuContentPrimitiveProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;

export type DropdownMenuContentProps = DropdownMenuContentPrimitiveProps & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.Content>>;

type DropdownMenuItemOwnProps = {
    size?: DropdownMenuItemSize;
    variant?: DropdownMenuItemVariant;
};

type DropdownMenuItemPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, 'asChild'>;

type DropdownMenuItemAsChildProps = {
    asChild: true;
    description?: never;
};

type DropdownMenuItemOwnedProps = {
    asChild?: false | undefined;
    description?: string;
};

export type DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & DropdownMenuItemOwnProps & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.Item>> & (DropdownMenuItemAsChildProps | DropdownMenuItemOwnedProps);

export type DropdownMenuCheckboxItemProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & DropdownMenuItemOwnProps & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>>;

export type DropdownMenuSubTriggerProps = Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, 'asChild'> & Omit<DropdownMenuItemOwnProps, 'variant'> & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>>;

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

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

export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuSub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;

export declare function DropdownMenuPortal({ container, ...portalProps }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>): import("react").JSX.Element;

export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;

export declare function DropdownMenuContent({ align, avoidCollisions, className, ref, side, sideOffset, ...contentProps }: DropdownMenuContentProps): import("react").JSX.Element;

export declare function DropdownMenuItem({ children, className, description, ref, size, variant, ...itemProps }: DropdownMenuItemProps): import("react").JSX.Element;

export declare function DropdownMenuCheckboxItem({ children, className, ref, size, variant, ...checkboxItemProps }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;

export declare const DropdownMenuItemIndicator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemIndicatorProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;

type DropdownMenuLabelPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, 'asChild' | 'children'>;

export type DropdownMenuLabelProps = (DropdownMenuLabelPrimitiveProps & {
    asChild?: false;
    children?: ReactNode;
}) | (DropdownMenuLabelPrimitiveProps & {
    asChild: true;
    children: ReactElement;
});

export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<DropdownMenuLabelProps & RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;

export declare const DropdownMenuShortcut: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;

export declare function DropdownMenuSubTrigger(props: DropdownMenuSubTriggerProps): import("react").JSX.Element;

export declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;