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
(Standard)	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, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <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, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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