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
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:141

Disable the blur element

Blur.enable()

src/Blur.ts:151

Enable the blur element