37 lines
914 B
Plaintext
37 lines
914 B
Plaintext
import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
|
|
|
|
import * as LoadingOverlayStories from "./LoadingOverlay.stories";
|
|
|
|
<Meta of={LoadingOverlayStories} />
|
|
|
|
# LoadingOverlay
|
|
|
|
The LoadingOverlay is meant to cover the container element completely, hiding the content behind a
|
|
dimming filter, while content loads.
|
|
|
|
It has a single named slot, "body" into which messages about the loading process can be included.
|
|
|
|
## Usage
|
|
|
|
```Typescript
|
|
import "@goauthentik/elements/LoadingOverlay.js";
|
|
```
|
|
|
|
Note that the content of an alert _must_ be a valid HTML component; plain text does not work here.
|
|
|
|
```html
|
|
<ak-loading-overlay topmost
|
|
><span>This would display in the "body" slot of the enclosing EmptyState object.</span
|
|
></ak-loading-overlay>
|
|
```
|
|
|
|
## Demo
|
|
|
|
### Default
|
|
|
|
<Story of={LoadingOverlayStories.DefaultStory} />
|
|
|
|
### With a message
|
|
|
|
<Story of={LoadingOverlayStories.WithAMessage} />
|