Skip to content
Atrium Logo Atrium Logo Atrium

a-blur

Lit Lit

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

Whether the blur is enabled or not.
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.

Methods

Blur.disable()

src/Blur.ts:163

Disable the blur element

Blur.enable()

src/Blur.ts:176

Enable the blur element