React BlockUI 组件 - PrimeReact 组件库

导入#


import { BlockUI } from 'primereact/blockui';

基本用法#

要阻止的元素应该作为 BlockUI 的子元素放置，并且需要使用 blocked 属性来控制状态。

基本用法

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<div className="mb-3">
    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
    <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary"></Button>
</div>
<BlockUI blocked={blocked}>
    <Panel header="Basic">
        <p className="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum.
        </p>
    </Panel>
</BlockUI>

文档#

启用 fullScreen 属性可以控制文档。


<BlockUI blocked={blocked} fullScreen />
<Button label="Block" onClick={() => setBlocked(true)} />

模板#

可以使用 template 属性将自定义内容放置在模态层中。

Prime React 新闻

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

继续阅读吗？


<BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }}></i>}>
    <Panel header="Prime React News">
        <p className="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum.
        </p>
    </Panel>
</BlockUI>
<div className="mt-3 flex flex-column align-items-center">
    <h3>Continue reading?</h3>
    <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)}></Button>
</div>

可访问性#

屏幕阅读器

当 UI 被阻止和取消阻止时，BlockUI 管理 aria-busy 状态属性。任何有效的属性都会传递到根元素，因此可以使用诸如 role 和 aria-live 之类的其他属性来定义实时区域。

键盘支持

组件不包含任何交互元素。