Skip to content

useLayer

@astryxdesign/core v0.7.1 · useLayer

参数 ​

参数类型默认值说明
mode'context' | 'fixed'必填定位方式:context 跟着锚点元素,fixed 用 x / y 给的坐标。
anchorRef<HTMLElement | null>—context 模式下外部的锚点元素。不传就把返回的 anchorRef 绑到触发器上。
placement'above' | 'below' | 'start' | 'end' | MaybeRefOrGetter'below'浮层落在锚点的哪一侧。逻辑方向:start / end 在 RTL 下自动镜像。空间不够时翻到对面。
alignment'start' | 'center' | 'end' | MaybeRefOrGetter'center'沿方位轴的对齐方式。
gapnumber4浮层与锚点之间的空隙,单位 px。
xnumber | MaybeRefOrGetter0fixed 模式的横向视口坐标。
ynumber | MaybeRefOrGetter0fixed 模式的纵向视口坐标。
isDefaultOpenbooleanfalse首次渲染就打开。
lightDismissboolean | MaybeRefOrGetterfalse点击外部是否关闭浮层。
lazyMountboolean | MaybeRefOrGetterfalse是否等到第一次 show() 才渲染内容。渲染与否看 isMounted。
onShow() => void—show() 打开浮层后调用。靠 isDefaultOpen 首次渲染就打开不算一次显示,不会调用它。
onHide() => void—hide() 关闭浮层后调用。

返回值 ​

字段类型说明
isOpenShallowRef<boolean>浮层当前是否打开。
anchorRefRef<HTMLElement | null>context 模式的锚点元素,用 :ref 绑到触发器上;fixed 模式下不用设。
contentRefRef<HTMLElement | null>浮层容器。定位靠它量尺寸,点击外部也靠它判断。
contentStyleComputedRef<CSSProperties>内联坐标:context 模式是量出来的 top / left;fixed 模式是 position: fixed 加 x / y。
resolvedPlacementComputedRef<'above' | 'below' | 'start' | 'end'>考虑空间翻转之后实际生效的方位。fixed 模式下等于请求的方位。
isMountedComputedRef<boolean>内容是否该渲染。lazyMount 打开时,第一次 show() 之前一直是 false。
idstring浮层的唯一 ID,用于 aria-controls、aria-describedby 这类关系。
anchorIdstring锚点的 CSS 标识,用于高级定位场景。
show() => void打开浮层。
hide() => void关闭浮层。