import BlockUI from 'primevue/blockui';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"></script>
BlockUI is controlled using the blocked property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
<BlockUI :blocked="blockedPanel">
<Panel header="Header">
Panel Content
</Panel>
</BlockUI>
export default {
data() {
return {
blockedPanel: false
}
},
methods: {
blockPanel() {
this.blockedPanel = true;
},
unblockPanel() {
this.blockedPanel = false;
}
}
}
In full screen mode, instead of a particular element, the whole document gets blocked. Set fullScreen as true in order to enable this functionality.
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| blocked | array | null | Controls the blocked state. |
| fullscreen | menuitem | null | When enabled, the whole document gets blocked. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| Name | Parameters | Description |
|---|---|---|
| block | - | Fired when the element gets blocked. |
| unblock | - | Fired when the element gets unblocked. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-blockui | Mask element. |
| p-blockui-document | Mask element in full screen mode. |
BlockUI manages aria-busy state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like role and aria-live can be used to define live regions.
Component does not include any interactive elements.
None.