Backdrop¶
The h-backdrop webcomponent is used to render a backdrop covering the whole page except for other surface type elements. h-backdrop webcomponent uses the h-portal webcomponent to render it's content in a correct place on a page and is typically used with others elements such as h-modal and h-dropdown on mobile resolution.
Note: h- stands for headless. This is a naming convention used for every webcomponent as they must have a two-part name.
Features:
- Possibility of having control over the backdrop using the appropriate DOM events
- Adds appropriate ARIA roles
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
visible |
boolean |
false | If set to true the backdrop will be visible by default |
Event Bus events¶
This webcomponent listens to the following DOM events:
It also dispatches the following events:
Remember that h-backdrop by default is placed outside the main content of the page which means that the events may not be directly reachable to any element inside the document. In order to catch them make sure to use document.addEventListener instead of this.addEventListener.
Example¶
In this example we render a basic backdrop
Example¶
In this example we render a backdrop that is visible by default