a-blur
A Blur is a wrapper element which can show and hide its children.
Implemented with Sheet and Dialog.
Blur
An a-blur functions like a low-level dialog, it manages the focus and scrolling, and provides events for when clicked outside of its children.
Example
<a-blur>
<div>
<h1>Modal</h1>
<p>Click outside of this modal to close it.</p>
</div>
</a-blur>Attributes
| Name | Type | Default value | Description |
|---|---|---|---|
allowscroll
|
string | "" |
(experimental) Comma separated list of selectors to exclude from the scroll-lock. |
autoinert
|
"true" | "false" | "true" |
(experimental) Whether the blur should be set to inert, when not enabled. |
enabled
|
boolean | false |
The "enabled" will enable or disabled all functionality. All other properties only apply, when the element is enabled. |
initialfocus
|
"false" | "auto" | "auto" |
(experimental) Whether the blur should set the focus to the first focusable element, when enabled. |
scrolllock
|
boolean | false |
Whether the blur should lock scrolling, when enabled. |
Events
| Name | Description |
|---|---|
exit
|
Emitted when the elements is blurred / closed. |