Backdrop ​
Loading...
A backdrop component that narrows the user's focus to a particular element.
- Tag:
<flint-backdrop> - Class:
FlintBackdrop
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintBackdrop } from '@getufy/flint-ui';Usage ​
html
<flint-backdrop></flint-backdrop>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | Whether the backdrop is visible and active. |
invisible | invisible | boolean | false | When true, the backdrop overlay is transparent. |
container | container | boolean | false | When true, the backdrop is scoped to its parent container instead of the viewport. |
Events ​
| Event | Detail | Description |
|---|---|---|
flint-backdrop-close | { open: false } | Dispatched when the backdrop is clicked or Escape is pressed. detail: { open: false } |
Slots ​
| Name | Description |
|---|---|
(default) | Content to display in the foreground. |
CSS Parts ​
| Name | Description |
|---|---|
base | The component's base wrapper element. |
content | The content container. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-backdrop-position | fixed |
--flint-backdrop-color | — |
--flint-backdrop-z-index | — |
--flint-z-modal | 1060 |