//
A preview card for content.
bun add xiod-ui1import {2 HoverCard,3 PreviewCard,4 HoverCardArrow,5 PreviewCardArrow,6 HoverCardContent,7 PreviewCardPopup,8 HoverCardTrigger,9 PreviewCardTrigger10} from "xiod-ui/preview-card";1<PreviewCard>2 <HoverCardTrigger />3 <PreviewCardTrigger />4 <HoverCardContent>5 <HoverCard />6 <HoverCardArrow />7 <PreviewCardArrow />8 <PreviewCardPopup />9 </HoverCardContent>10</PreviewCard>| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: PreviewCardArrowState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, PreviewCardArrowState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: PreviewCardArrowState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: PreviewCardPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, PreviewCardPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: PreviewCardPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
align | Align| undefined | center | |
alignOffset | number| OffsetFunction| undefined | 0 | |
side | Side| undefined | bottom | |
sideOffset | number| OffsetFunction| undefined | 8 | |
anchor | Element| VirtualElement| RefObject<Element| null>| (() => Element| VirtualElement| null)| null| undefined | - | |
hideArrow | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
handle | PreviewCardHandle<unknown>| undefined | - | A handle to associate the trigger with a preview card. |
payload | unknown | - | A payload to pass to the preview card when it is opened. |
delay | number| undefined | 600 | How long to wait before the preview card opens. Specified in milliseconds. |
closeDelay | number| undefined | 300 | How long to wait before closing the preview card. Specified in milliseconds. |
className | string| ((state: PreviewCardTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, PreviewCardTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: PreviewCardTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |