Skip to content

useHoverCard

@astryxdesign/core v0.7.1 · useHoverCard

参数 ​

参数类型默认值说明
placement'above' | 'below' | 'start' | 'end' | MaybeRefOrGetter'above'卡片落在触发器的哪一侧。逻辑方向:start / end 在 RTL 下自动镜像。空间不够时翻到对面。
alignment'start' | 'center' | 'end' | MaybeRefOrGetter'center'沿方位轴的对齐方式。
delaynumber | MaybeRefOrGetter300悬停多久才显示卡片,单位毫秒。
hideDelaynumber | MaybeRefOrGetter200指针或焦点离开后多久隐藏,单位毫秒。指针可以借这段时间移进卡片。
focusTrigger'auto' | 'always' | 'never' | MaybeRefOrGetter'auto'焦点何时打开卡片。auto 只给本来就能聚焦的元素挂焦点监听。
touchTrigger'auto' | 'tap' | 'none' | MaybeRefOrGetter'auto'没有 hover 的触摸设备上轻点做什么。auto 在触发器自己有动作时不打开;tap 总是打开;none 从不打开。
isEnabledboolean | MaybeRefOrGettertrue是否启用悬停与焦点触发。
labelstring | undefined | MaybeRefOrGetter—卡片的无障碍名称。给了就以有名字的 role="dialog" 暴露;不给退回 role="group"(组可以没有名字)。
isOpenboolean | undefined | MaybeRefOrGetter—受控的打开状态。true 强制显示,false 强制隐藏,undefined 交给悬停/焦点管理。
isDefaultOpenbooleanfalse挂载时是否显示。
onShow() => void—卡片显示后调用。
onHide() => void—卡片隐藏后调用。

返回值 ​

字段类型说明
isOpenRef<boolean>卡片当前是否显示。
triggerRefRef<HTMLElement | null>触发器元素。用 :ref 绑上去,hook 会挂事件和 ARIA 关系。
contentRefRef<HTMLElement | null>卡片容器。
idstring卡片的唯一 ID。
anchorIdstring锚点的 CSS 标识,用于高级定位场景。
describedBystring要拼进 aria-describedby 的 ID。hook 已经写到 triggerRef 上了,手写 ARIA 时才需要它。
contentStyleComputedRef<CSSProperties>卡片的内联坐标。
resolvedPlacementComputedRef<'above' | 'below' | 'start' | 'end'>考虑空间翻转之后实际生效的方位。
isDialogComputedRef<boolean>卡片是以有名字的对话暴露,还是无名分组。
contentPropsComputedRef<Record<string, unknown>>卡片的属性:id、role、aria-label,以及保持显示的指针 / 焦点处理。
show() => void立刻显示卡片。
hide() => void立刻隐藏卡片。