Popover
Exports
@mbsw/ui에서 가져올 수 있는 항목입니다.
HoverCardHoverCardContentHoverCardTriggerPopoverPopoverContentPopoverTriggerProps
컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.
HoverCardContent
| Prop | Type | 필수 여부 |
|---|---|---|
width | 'fixed' | 'hug' | 선택 |
PopoverContent
| Prop | Type | 필수 여부 |
|---|---|---|
actions | PopoverAction | PopoverAction[] | null | 선택 |
children | ReactNode | 필수 |
size | 'lg' | 'md' | 'sm' | 선택 |
Type reference
전체 타입 보기
속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.
TYPESCRIPT
import { type ComponentProps, type ReactElement, type ReactNode, type ButtonHTMLAttributes, type ElementType, type RefAttributes, type SVGProps } from 'react';
import { HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive } from 'radix-ui';
export type ButtonVariant = 'solid' | 'outline' | 'ghost';
export type ButtonTone = 'primary' | 'secondary' | 'destructive' | 'highlight';
export type ButtonSize = 'lg' | 'md' | 'sm';
export type IconOnlyButtonSize = ButtonSize | 'xs';
type IconComponent = ElementType<SVGProps<SVGSVGElement>>;
type DataAttributes = {
[key: `data-${string}`]: boolean | number | string | undefined;
};
type ButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'size'> & DataAttributes & {
/** Highlight-only visual state. Callers retain aria-busy, disabled and event policy. */
generating?: boolean;
tone?: ButtonTone;
variant?: ButtonVariant;
};
type NonEmptyButtonChild = Exclude<ReactNode, boolean | null | undefined>;
type NativeTextButtonProps = ButtonBaseProps & {
asChild?: false;
children: NonEmptyButtonChild;
icon?: never;
iconForeground?: never;
iconOnly?: false;
leadingIcon?: IconComponent;
size?: ButtonSize;
trailingIcon?: IconComponent;
};
type SlottedTextButtonProps = Omit<ButtonBaseProps, 'disabled'> & {
asChild: true;
children: ReactElement;
disabled?: never;
icon?: never;
iconForeground?: never;
iconOnly?: false;
leadingIcon?: never;
size?: ButtonSize;
trailingIcon?: never;
};
type IconOnlyButtonContent = {
children?: never;
icon: IconComponent;
/** Secondary direct icon slot only; children styling stays caller-owned. */
iconForeground?: 'primary' | 'secondary';
} | {
children: NonEmptyButtonChild;
icon?: never;
iconForeground?: never;
};
type IconOnlyButtonProps = ButtonBaseProps & IconOnlyButtonContent & {
'aria-label': string;
asChild?: false;
iconOnly: true;
leadingIcon?: never;
size?: IconOnlyButtonSize;
trailingIcon?: never;
};
export type ButtonProps = (NativeTextButtonProps & RefAttributes<HTMLButtonElement>) | (SlottedTextButtonProps & RefAttributes<HTMLElement>) | (IconOnlyButtonProps & RefAttributes<HTMLButtonElement>);
type ButtonComponent = {
(props: ButtonProps): ReactElement | null;
displayName?: string;
};
export declare const Button: ButtonComponent;
export type PopoverSize = 'lg' | 'md' | 'sm';
export type HoverCardWidth = 'fixed' | 'hug';
export type PopoverProps = ComponentProps<typeof PopoverPrimitive.Root>;
export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;
type PopoverPrimitiveContentProps = ComponentProps<typeof PopoverPrimitive.Content>;
type PopoverAction = ReactElement<ButtonProps, typeof Button>;
export type PopoverContentProps = Omit<PopoverPrimitiveContentProps, 'asChild' | 'avoidCollisions' | 'children'> & {
actions?: PopoverAction | PopoverAction[] | null;
children: ReactNode;
size?: PopoverSize;
};
export type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;
export type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;
type HoverCardPrimitiveContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;
export type HoverCardContentProps = Omit<HoverCardPrimitiveContentProps, 'avoidCollisions'> & {
width?: HoverCardWidth;
};
export declare function Popover(props: PopoverProps): import("react").JSX.Element;
export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;
export declare function PopoverContent(props: PopoverContentProps): import("react").JSX.Element;
export declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;
export declare function HoverCardTrigger(props: HoverCardTriggerProps): import("react").JSX.Element;
export declare function HoverCardContent({ align, alignOffset, children, className, side, sideOffset, width, ...contentProps }: HoverCardContentProps): import("react").JSX.Element;