useFocusTrap
@astryxdesign/core v0.7.1 · useFocusTrap
参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
options | UseFocusTrapOptions | {} | 焦点陷阱的配置对象。里面的字段都是可选的。 |
options.container | Ref<HTMLElement | null> | — | 要关住焦点的元素。模板里绑同一个模板引用。不传也行,hook 自己建一个,从返回值的 containerRef 取。 |
options.isActive | MaybeRefOrGetter<boolean> | — | 陷阱当前是否生效。打开时装上监听并把焦点送进去,关闭时摘掉监听并把焦点还回去。isEnabled 是同一个开关的另一个名字,任一为真即生效。 |
options.isEnabled | MaybeRefOrGetter<boolean> | — | 和 isActive 是同一个开关,习惯哪个名字就用哪个。两个都传没意义。 |
options.onEscape | () => void | — | 容器里按下 Escape 时调用。陷阱不吞这个键:旁边的轻关闭处理照样收得到。 |
options.initialFocus | () => HTMLElement | null | — | 陷阱打开时先聚焦哪个元素。返回 null 就退回第一个可聚焦元素。 |
返回值
| 名称 | 类型 | 说明 |
|---|---|---|
containerRef | Ref<HTMLElement | null> | 绑到要关住焦点的容器上的 ref。就是你传进来的 container,没传时是 hook 自己建的那个。 |
focusFirst | () => void | 聚焦容器里的第一个可聚焦元素。 |
focusLast | () => void | 聚焦容器里的最后一个可聚焦元素。 |
update | () => void | 留给需要在子元素变化后重新测量的调用方。它什么都不做:可聚焦元素在每次按键时都会重新读。 |