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
allowinert string "true"

(experimental) Whether the blur should be set to inert, when not enabled.
enabled boolean false

Whether the blur is enabled or not.
scrolllock boolean false

Whether the blur should lock scrolling when shown.

Events

Name Description
exit

Emitted when the elements is blurred / closed.

Methods

Blur.disable()

src/Blur.ts:148

Disable the blur element

Blur.enable()

src/Blur.ts:162

Enable the blur element