Skip to main content

area

Description​

sets an object relative to which a popup appears

Type​

object

Example​

<script>
    import { Button, Popup, Portal } from "wx-svelte-core";

    let node;
    let area;

    function click() {
        area = node.getBoundingClientRect();
    }

    function cancel() {
        area = null;
    }
</script>

<div>
    <div bind:this={node}>
        <Button {click}>Show Popup</Button>
    </div>
</div>

{#if area}
    <Portal>
        <Popup {area} {cancel}>
            <div class="popup">
                <p>Some text here and there</p>
            </div>
        </Popup>
    </Portal>
{/if}

Details​

The Portal component allows placing a popup into the <body> of a page. Thus the popup will be rendered right under the button. If you don't use a portal, the popup will appear next to the div with a button.

Related article: Relative positioning

Related sample: Popup