跳转到内容

TrapFocus API

想要学习更多组件属性和 CSS API,可以查阅 React TrapFocus 组件的 API 文档。

导入

import TrapFocus from '@mui/base/TrapFocus';
// 或
import { TrapFocus } from '@mui/base';
你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

Utility component that locks focus inside the component.

属性

名称类型默认值描述
open*boolfalse
If true, focus is locked.
childrenelement
A single child content element.
⚠️ Needs to be able to hold a ref.
disableAutoFocusboolfalse
If true, the trap focus will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any trap focus children that have the disableAutoFocus prop.
Generally this should never be set to true as it makes the trap focus less accessible to assistive technologies, like screen readers.
disableEnforceFocusboolfalse
If true, the trap focus will not prevent focus from leaving the trap focus while open.
Generally this should never be set to true as it makes the trap focus less accessible to assistive technologies, like screen readers.
disableRestoreFocusboolfalse
If true, the trap focus will not restore focus to previously focused element once trap focus is hidden or unmounted.
getTabbablefunc
Returns an array of ordered tabbable nodes (i.e. in tab order) within the root. For instance, you can provide the "tabbable" npm dependency.

Signature:
function(root: HTMLElement) => void
isEnabledfuncfunction defaultIsEnabled() { return true; }
This prop extends the open prop. It allows to toggle the open state without having to wait for a rerender when changing the open prop. This prop should be memoized. It can be used to support multiple trap focus mounted at the same time.

组件无法持有 ref。

演示项目