Skip to content

useContainerReveal

@astryxdesign/core v0.7.1 · useContainerReveal

参数 ​

名称类型默认值说明
optionsUseContainerRevealOptions{}露出的配置对象,可以不传。
options.isEnabledMaybeRefOrGetter<boolean>true为 false 时这个 hook 完全失效:容器拿不到类,内容也拿不到类,内容一直可见。每次调用都会重新读,所以组件挂载后也能改(例如按 revealOn === "hover" 决定)。
containerProps(options?).hoverDelaynumber—指针要停多少毫秒才开始露出,和 Tooltip、HoverCard 的延时一样,是个「确认要悬停」的闸门:光标扫过列表时不会把沿途的行都点亮。键盘和粗指针不等待。
containerProps(options?).forceState'active' | 'inactive'—把触发状态钉住,交给调用方掌管的时候用:动效门控、滚动中、行的菜单已打开。'inactive' 仍然让键盘焦点和粗指针看见内容。
contentProps(options?).isRevealInvertedbooleanfalse反过来:平时可见,悬停时藏起。只影响指针,键盘焦点和触摸照样能看到。
contentProps(options?).isLayoutPreservedbooleanfalse藏起时仍占住原来的位置(只改不透明度),避免布局跳动。
contentProps(options?).forceVisibility'shown' | 'hidden'—单独钉住这一个元素的可见性,不跟容器走。'hidden' 在焦点进来时仍会露出。

返回值 ​

名称类型说明
containerProps(options?: ContainerRevealOptions) => { class?: string | Record<string, boolean>, style?: CSSProperties }绑在容器上,容器的悬停和 focus-within 决定露出。可以传 hoverDelay 和 forceState。hook 关掉时返回空对象。
contentProps(options?: ContentRevealOptions) => { class?: string | Record<string, boolean> }绑在每一个要露出或要藏起的子元素上。可以传 isRevealInverted、isLayoutPreserved 和 forceVisibility。hook 关掉时返回空对象。