Scrim

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: relative styling to its closest parent container.

Usage

  • Disable an area of the interface
  • Show loading of an area of the interface

Sample

3 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<calcite-shell>
    <calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start" width="l">
        <calcite-panel heading="Map Options">
            <calcite-scrim></calcite-scrim>
            <calcite-action icon="question" text="Favorite" slot="header-actions-start"></calcite-action>
            <calcite-action icon="save" text="Save" slot="header-actions-end"></calcite-action>
            <calcite-action icon="reset" text-enabled text="Reset" slot="header-menu-actions"></calcite-action>
            <calcite-action icon="pencil" text-enabled text="Rename" slot="header-menu-actions"></calcite-action>
            <calcite-button width="half" slot="footer" appearance="outline">
                Cancel
            </calcite-button>
            <calcite-button width="half" slot="footer">
                Next
            </calcite-button>
            <calcite-block collapsible heading="Layer effects" description="Adjust blur, highlight, and more"
                icon-start="effects">
                <calcite-notice open>
                    <div slot="message">Use layer effects sparingly, for emphasis</div>
                </calcite-notice>
            </calcite-block>
            <calcite-block collapsible heading="Symbology" description="Select type, color, and transparency"
                icon-start="map-pin">
                <calcite-notice open>
                    <div slot="message">The viewers are going to love this</div>
                </calcite-notice>
            </calcite-block>
            <calcite-fab slot="fab"></calcite-fab>
        </calcite-panel>
    </calcite-shell-panel>
    <calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
v3.0.3

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

PropertyAttributeDescriptionTypeDefault
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
messageOverridesUse this property to override individual strings used by the component.{ loading?: string; }

Slots

NameDescription
default (unnamed)A slot for adding custom content, primarily loading information.

Styles

NameDescription
--calcite-scrim-backgroundSpecifies the background color of the scrim.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close