a-blur

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	true	Whether the blur should lock scrolling when shown.

Events

---

Name	Description
blur	Emitted when the elements is blurred / closed.

Methods

---

Show ↴ ↶

Blur.connectedCallback()

src/Blur.ts:154

Blur.disable()

src/Blur.ts:96

Disable the blur element

Blur.disconnectedCallback()

src/Blur.ts:198

Blur.enable()

src/Blur.ts:106

Enable the blur element