Docs / Components
SenseBlockUiComponent
Overlay from @artificialsenselabs/ui that blocks interaction with projected content while exposing a loading status region.
Live demo: run nx serve showcase and open /components/block-ui (port 4202).
Overview
Category: Display. Selector: sense-block-ui. Import: import { SenseBlockUiComponent } from '@artificialsenselabs/ui';
<sense-block-ui [blocked]="saving()">
<form>...</form>
<div blockTemplate>
<sense-spinner />
</div>
</sense-block-ui>Inputs
| Input | Type | Default | Description |
|---|---|---|---|
blocked | boolean (model) | false | When true, blocks pointer interaction and shows the loading mask. |
styleClass | string | null | null | Extra CSS class names on the host. |
baseZIndex | number | 0 | Inline z-index for the mask; 0 keeps the token default. |
loadingLabel | string | null | null | Accessible name for the mask; falls back to block-ui.loading i18n. |
Accessibility
- When blocked, projected content receives
inertand the host setsaria-busy. - The mask uses
role="status"witharia-live="polite". - Project custom loading UI via the
blockTemplateslot.