Resize Observer

<pc-resize-observer>

0.1.0

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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 pc-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.

<div class="resize-observer-overview">
    <pc-resize-observer>
        <span>Resize this box and watch the console ➡️</span>
    </pc-resize-observer>
</div>

<script>
    const container = document.querySelector(
        ".resize-observer-overview",
    );
    const resizeObserver =
        container.querySelector("pc-resize-observer");

    resizeObserver.addEventListener("pc-resize", (event) => {
        console.log(event.detail);
    });
</script>

<style>
    .resize-observer-overview {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: var(--pc-spacing-xxxl);
        padding-inline: var(--pc-spacing-xxl);
        border: var(--pc-border-width-m) dashed
            var(--pc-color-neutral-border-normal);
        border-radius: var(--pc-border-radius-l);
        overflow: auto;
    }
</style>

Code

Edit

Eigenschaften#

Name	Beschreibung	Reflektiert	Standard
`disabled`	Disables the resize observer. Typ: `boolean`		`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.		‐

Erfahre mehr über Attribute und Eigenschaften.

Slots#

Name	Beschreibung
(default)	One or more elements to watch for resizing.

Erfahre mehr über die Benutzung von Slots.

Events#

Name	Beschreibung	Event‐Detail
`pc-resize`	Emitted when the element is resized.	`{ entries: ResizeObserverEntry[] }`

Erfahre mehr über Events.

Importieren#

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/resize-observer/resize-observer.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/resize-observer/resize-observer.js"; 

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

import "placer-toolkit/dist/components/resize-observer/resize-observer.js";