Resize Observer
<wa-resize-observer>
The Resize Observer component offers a thin, declarative interface to the ResizeObserver API
.
The resize observer will report changes to the dimensions of the elements it wraps through the wa-resize
event. When emitted, a collection of ResizeObserverEntry
objects will be attached to event.detail
that contains the target element and information about its dimensions.
Resize this box and watch the console 👉
<div class="resize-observer-overview"> <wa-resize-observer> <div>Resize this box and watch the console 👉</div> </wa-resize-observer> </div> <script> const container = document.querySelector('.resize-observer-overview'); const resizeObserver = container.querySelector('wa-resize-observer'); resizeObserver.addEventListener('wa-resize', event => { console.log(event.detail); }); </script> <style> .resize-observer-overview div { display: flex; border: solid 2px var(--wa-color-surface-border); align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; } </style>
Slots Jump to heading
Learn more about using slots.
Name | Description |
---|---|
(default) | One or more elements to watch for resizing. |
Attributes & Properties Jump to heading
Learn more about attributes and properties.
Name | Description | Reflects | |
---|---|---|---|
disabled disabled |
Disables the observer.
Type
boolean Default
false |
|
Events Jump to heading
Learn more about events.
Name | Description |
---|---|
wa-resize |
Emitted when the element is resized. |
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/components/resize-observer/resize-observer.js';