参考
悬停卡片 Hover Card
HoverCard:悬停卡片。预览卡片在普通 inline 链接上方淡入,不会抢走焦点。部件:Root、Trigger、Positioner、Content、Arrow、ArrowTip。
Arrow · ArrowTip · Trigger · Positioner · Content
#ArrowTip
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Arrow
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Content
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Positioner
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
closeDelay | number | 300 | 鼠标离开触发器或内容后,悬停卡片关闭的延迟时间 |
defaultOpen | boolean | 悬停卡片的初始展开状态;适合不需要受控展开状态的场景 | |
defaultTriggerValue | string | null | 触发器的初始值;适合不需要受控触发器值的场景 | |
disabled | boolean | 是否禁用悬停卡片 | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ trigger: string; content: string; positioner: string; arrow: string; }> | 悬停卡片各元素的 id,便于组合使用 | |
open | boolean | 悬停卡片的受控展开状态 | |
openDelay | number | 700 | 鼠标移入触发器后,悬停卡片打开的延迟时间 |
positioning | hoverCard.PositioningOptions | 用户传入的 popover 内容定位选项 | |
triggerValue | string | null | 当前打开悬停卡片的触发器值 |
| 事件 | 载荷 |
|---|---|
exitComplete | — |
openChange | details: OpenChangeDetails |
update:open | open: boolean |
triggerValueChange | details: TriggerValueChangeDetails |
update:triggerValue | triggerValue: string | null |
focusOutside | event: FocusOutsideEvent |
interactOutside | event: InteractOutsideEvent |
pointerDownOutside | event: PointerDownOutsideEvent |
#Trigger
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | string | 用于标识该触发器的值 |