Dropdown menu
Exports
@mbsw/ui에서 가져올 수 있는 항목입니다.
DropdownMenuDropdownMenuCheckboxItemDropdownMenuContentDropdownMenuGroupDropdownMenuItemDropdownMenuItemIndicatorDropdownMenuLabelDropdownMenuPortalDropdownMenuSeparatorDropdownMenuShortcutDropdownMenuSubDropdownMenuSubContentDropdownMenuSubTriggerDropdownMenuTriggerProps
컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.
DropdownMenuCheckboxItem
| Prop | Type | 필수 여부 |
|---|---|---|
size | 'lg' | 'md' | 'sm' | 선택 |
variant | 'default' | 'destructive' | 선택 |
DropdownMenuItem
DropdownMenuLabel
DropdownMenuSubTrigger
| Prop | Type | 필수 여부 |
|---|---|---|
size | 'lg' | 'md' | 'sm' | 선택 |
Type reference
전체 타입 보기
속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.
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>>;