Scrims are used to apply loading visualizations on top of specific sections of content.
Overview
Scrims are an overlay, which can be placed on top of content to show disabled or loading states, and/or contain top level content in the interface.
Light and dark modes have their own distinct overlay color, and a loading property places Loader in the center for convenience.
By default, Scrim positions to the extent of its closest parent. To display a Scrim with custom positioning, add position styling to its closest parent container.
Usage
- Disable an area of the interface
- Show loading of an area of the interface
Sample
Accessibility
While Scrim prevents slotted components from recieving mouse clicks, keyboard functionality remains intact. It is up to the developer to accommodate keyboard workflows that best fit their use case when working with Scrim.
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| loading | loading | When true, a busy indicator is displayed. | boolean | false |
| messageOverrides | Use this property to override individual strings used by the component. | { loading?: string; } |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding custom content, primarily loading information. |
Styles
| Name | Description |
|---|---|
| --calcite-scrim-background | Specifies the background color of the scrim. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |