Popups

In web development, the usage of various popups can significantly enhance user experience and interaction. SVAR and Svelte, playing a duet, offer diverse options for creating interactive elements like popups. The following popup types are at your disposal: Popup, Dropdown, Portal, SideArea and Modal boxes. By leveraging these popup types in SVAR and Svelte, developers can create dynamic and responsive user interfaces.

Dropdowns optimize screen space, displaying a list of options or some other content (calendars, colors) when users interact with a particular element. Thus the use of this type of popups allows enhancing navigation efficiency.

tip

Check Dropdown API Reference to see the list of configuration properties.

Initialization

To create a Dropdown instance on a page, you need to complete the following steps:

get the widget by installing the wx-svelte-core package
import the source file of the component on a page:

App.svelte
<script>
    import { Dropdown } from "wx-svelte-core";
</script>

apply the <Dropdown> tag to initialize a dropdown and place content inside the component:

App.svelte
<Dropdown>
    <!-- a component to put inside a dropdown -->
</Dropdown>

Adding content

Dropdown plays a crucial role in scenarios where users need to make specific selections like dates, colors, and times. For date pickers, Dropdown might contain options like days, months, and years, allowing users to choose precise dates. Color pickers offer a palette of colors within Dropdown, enabling users to select the exact shade they desire. In time pickers, Dropdown typically includes options for hours, minutes, and sometimes seconds, making time selection accurate.

For example, to use Dropdown in a date picker, you should place Calendar inside. First, you need to import the used components in the <script> part of your page:

<script>
    import { Dropdown, Calendar } from "wx-svelte-core";
</script>

Then, wrap the <Calendar> tag within the <Dropdown> one and specify the necessary props, if needed:

<Dropdown align={"end"}>
    <Calendar/>
</Dropdown>

To turn it all into a date picker, add a text control and a click handler, to open a dropdown on click in the input:

<script>
    import { Dropdown, Calendar, Text } from "wx-svelte-core";

    let popup;

    function cancel() {
        popup = false;
    }
</script>

<div class="datepicker" on:click={() => (popup = true)}>
    <Text/>
    {#if popup}
        <Dropdown align={"end"} {cancel}>
            <Calendar />
        </Dropdown>
    {/if}
</div>

Dropdown front

As a rule a dropdown opens on an input click and hides on an outside click. You can provide some variable and use it to check the visibility of Dropdown.

In the example below the popup variable gets the true value on a click in the input and a dropdown is shown. On an outside click a dropdown is closed. It is specified via the cancel property of Dropdown, which is a function that defines the logic of Dropdown closing.

<script>
    import { Dropdown, Calendar, Text} from "wx-svelte-core";

    let popup;

    function cancel() {
        popup = false;
    }
</script>

<div class="datepicker" on:click={() => (popup = true)} >
    <Text />

{#if popup }
    <Dropdown {cancel} >
        <Calendar value={new Date(2023, 2, 15)} />
    </Dropdown>
{/if}
</div>

<style>
    .datepicker {
        position: relative;
        width: 300px;
    }

</style>

The width of Dropdown adjusts to the width of the content inside. By default it is "100%". If needed, you can change the width of Dropdown using the width property. It works in the same way as the width CSS property. The value should be set as a string, e.g.:

<Dropdown width="75%" />

Setting the position

A dropdown can appear at any of the four input's sides: at the top, bottom, right or left. By default a dropdown opens up at the bottom of the input field. Use the "top","right" or "left" value of the position property to specify a position different from the default one.

<Dropdown position={"top"} >
    <Calendar value={new Date(2023, 2, 15)} />
</Dropdown>

Adjusting the alignment

As for the alignment of the component, there are three possible settings: "start" (default), "center" or "end" of the input. The align property is responsible for the Dropdown alignment.

<Dropdown {cancel} position={"top"} align={"center"} >
    <Calendar value={new Date(2023, 2, 15)} />
</Dropdown>

The align and position properties are combined to make a style name specific for a particular position. Thus, there are "top-end" or "bottom-start" styles, for example.

Automatic positioning and alignment

The Dropdown API includes the autoFit configuration property that automatically calculates the necessary position and alignment of a dropdown relative to the input.

By default the autoFit property is enabled. It adjusts the position of a dropdown and prevents it from overflowing the window's borders. However, you can disable this setting, if needed, as in:

<Dropdown autoFit={false}>
    <Calendar value={new Date(2023, 2, 15)} />
</Dropdown>

Modal boxes grab user attention by overlaying the main content, ensuring focus on a specific task or message.

Prompt box

The Modal component allows creating two types of modal boxes: Prompt and Dialog. There are more types of modal and message boxes. You can explore all of them in the Messages guide.

tip

Check Modal API Reference to see the list of configuration properties.
Explore the samples to visualize the available features.

Initialization

To create a Modal instance on a page, you need to complete the following steps:

get the widget by installing the wx-svelte-core package
import the source file of the component on a page together with the Portal one (since a modal box should be created inside of a Portal to work correctly):

App.svelte
<script>
    import { Modal, Portal } from "wx-svelte-core";
</script>

wrap the <Modal> tag within the Portal to initialize the component:

App.svelte
<Portal>
    <Modal>
        <!-- the content -->
    </Modal>
</Portal>

use either the <Text> control to create a Prompt modal box or the <TextArea> control to create a custom Dialog box, correspondingly:

<script>
    import { Modal, Portal, Text, TextArea } from "wx-svelte-core";
</script>

<!-- to add a Prompt modal box -->
<Portal>
    <Modal>
        <Text />
    </Modal>
</Portal>

<!-- to add a Dialog modal box -->
<Portal>
    <Modal>
        <TextArea />
    </Modal>
</Portal>

Providing the buttons' functionality

The Modal component allows using two types of buttons in modal boxes: in-built buttons used by default and custom ones.

Using default buttons

There are two built-in buttons: "ok" and "cancel". They can be controlled via the buttons configuration property. For example, you can leave just one of the buttons in a modal box, like this:

<Portal>
    <Modal buttons={["ok"]}>
        <Text select={true} focus={true} value="Some" />
    </Modal>
</Portal>

To add some actions for the buttons, you should use the ok and cancel configuration properties of the Modal box, accordingly. As values they expect the names of the functions called on click of the corresponding button. Here is an example:

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

    let custom1;
    function hideAll() {
        custom1 = false;
    }
</script>

{#if custom1}
    <Portal>
        <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
            <Text select={true} focus={true} value="Some" />
        </Modal>
    </Portal>
{/if}

Related sample: Messages

Custom buttons

Besides standard buttons, you can also use custom buttons in modal boxes. The advantage of custom buttons in modal boxes is that they can be designed to match the application's theme, providing a cohesive user experience.

By default, buttons are placed in a named slot, given below:

<slot name="buttons"> 

It allows you to create your own buttons and use them instead of the default ones. To add a new button into a modal box, you need to:

import the Button control into the app:

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

provide the <Button> tag for each button you want to add within the default slot with buttons:

<Portal>
    <Modal>
        <Textarea />
        <div slot="buttons" style="margin-top: 20px;">
            <Button>Yes</Button>
            <Button>No</Button>
            <Button>Maybe</Button>
        </div>
    </Modal>
</Portal>

specify the function to be called on the button's click:

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

    function click() {
        // your logic
    }
</script>

<Portal>
    <Modal>
        Your feedback
        <Textarea placeholder="Leave your comment" />
        <div slot="buttons" style="margin-top: 20px;">
            <Button {click}>Yes</Button>
            <Button {click}>No</Button>
            <Button {click}>Maybe</Button>
        </div>
    </Modal>
</Portal>

Dialog box

Related sample: Messages

Adding the header title

Titles in modal boxes serve as concise and informative labels, providing users with a clear understanding of the modal's content or purpose. Regardless of the modal box's type, titles help users stay oriented within the application. They enhance user experience by making the modal's content easily recognizable.

To add a title into a modal box, set the title configuration property in the <Modal> tag and provide a string with the desired text as its value.

<Portal>
    <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
        <Text select={true} focus={true} value="Some" />
    </Modal>
</Portal>

Related sample: Messages

A popup is a versatile tool that provides context-specific information without navigating away from the current page. You can specify the area that will define the location of a popup rendering on a page, set a function that will close a popup under provided conditions and apply top and left offsets (if the connected area isn't defined).

Popup front

tip

Check Popup API Reference to see the list of configuration properties.
Explore the samples to visualize the available features.

Initialization

To create a Popup instance on a page, you need to complete the following steps:

get the widget by installing the wx-svelte-core package
import the source file of the component on a page:

App.svelte
<script>
    import { Popup } from "wx-svelte-core";
</script>

apply the <Popup> tag to initialize a popup and place content inside the component:

App.svelte
<Popup>
    <p>Some content</p>
</Popup>

Adding content

You can place a text or a different control inside of a popup. First, you need to import all the used controls in the <script> part of your page:

<script>
    import { Popup, Slider } from "wx-svelte-core";
</script>

Then, put the text content and necessary controls into the div with the "popup" class inside the <Popup> tag:

<Popup>
    <div class="popup">
        <p>Some text here and there</p>
        <p>Some text here and there</p>
        <Slider />
    </div>
</Popup>

As a most common case, you can show a popup on a button click and hide it on a click outside the popup. Let's declare a variable and call it showPopup. By default the variable is set to false and a popup is hidden. On a button click, the showPopup variable gets the true value and a popup is shown.

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

    let showPopup = false;

    function click() {
       showPopup = true;
    }
</script>

<div>
    <Button {click}>Show Popup</Button>
</div>

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

To hide a popup, use the cancel property of Popup. It is a function that defines the logic of Popup closing. In the example below a popup will be closed on a click outside it.

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

    let showPopup = false;

    function click() {
       showPopup = true;
    }

    function cancel() {
        showPopup = false;
    }
</script>

<div>
    <Button {click}>Show Popup</Button>
</div>

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

Related sample: Popup

Absolute positioning

If you want to display a popup at particular coordinates on a page, you should use the top and left properties and set their values in pixels.

<Popup top={300} left={300}>
    <div class="popup">
        <p>Some text here and there</p>
    </div>
</Popup>

The above logic defines that a popup will be shown at the specified coordinates without being bound to any node.

Popup front

Relative positioning

You can specify an HTML node near which a popup will be shown. For this, you will need the area property of the widget. It allows you to specify the desired node and provide the logic to show/hide a popup.

For example, you can show a popup next to a button on click and hide the popup on a click outside the specified node:

<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}

The Portal component allows placing a popup into the <body> of a page. Thus the popup will be rendered right under the button.

Popup front

Related sample: Popup

If you don't use Portal, the popup won't be aligned to the bottom left corner of the button and will appear somewhere near the button's div.

By default, Popup just adjusts its height to the number of elements inside it. You may also need to add some settings for the content of Popup to look neat. Use the .popup CSS class to change the appearance of the widget. For example, set the padding or add some background color:

App.svelte
<script>
    import { Popup } from "wx-svelte-core";
</script>

<Popup>
    <div class="popup">
        <p>Some text here and there</p>
    </div>
</Popup>

<style>
    .popup {
        padding: 10px 30px;
        background: turquoise;
    }
</style>

Popup front

Related sample: Popup

Portal

Portals are advanced popups that render content outside the DOM hierarchy. They allow seamless integration of components across different parts of the application. You need just to wrap the content you want to render somewhere else in the <Portal> tag.

tip

Check Portal API Reference to see the list of configuration properties.

Initialization

To create a Portal component, you need to complete the following steps:

get the component by installing the wx-svelte-core package
import the source file of the component on a page:

App.svelte
<script>
    import { Portal } from "wx-svelte-core";
</script>

apply the <Portal> tag to initialize a portal and place content inside the component:

App.svelte
<Portal>
    <!-- the content to be sent by the Portal -->
</Portal>

Adding content

You can transfer any content including other components to a different DOM node via the Portal component. To add a component into Portal, import it in the <script> part of your page:

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

Then, put the desired content within the <Portal> tag. The example below adds a Popup component inside a Portal:

<Portal>
    <Popup>
        <p>Some text here and there</p>
    </Popup>
</Portal>

Setting the target

You should set the target where the content should be rendered. Portal can send content both to a different part of DOM and even place it above the app structure. There's the target property intended for specifying the destination point of the transferred portal content.

In the example below a Modal component is sent through the Portal into the "box" element on a button click:

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

    let custom, box;
</script>

<Button click={() => (custom = !custom)}>Show Dialog</Button>
{#if custom}
    <Portal target={box}>
        <Modal>
            <TextArea/>
        </Modal>
    </Portal>
{/if}

Setting the theme for a moved component

Since Portal can be placed into the body of the app, the theme of the parent app/component won't apply to the component transferred through the Portal. In this case you can make use of the Portal's theme configuration property and set the necessary theme name as its value. There are three themes that correspond to the names of the main SVAR Svelte skins available: "material", "willow", "willow-dark".

Check the example below to see how you can apply a theme:

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

    let custom, box;
    function hideAll() {
        custom = false;
    }
</script>

<Button click={() => (custom = !custom)}>Show Dialog</Button>
{#if custom}
    <Portal theme={"willow-dark"}>
        <Modal>
            Some text here
            <TextArea placeholder="Some text" />
            <div slot="buttons" style="margin-top: 20px;">
                <Button click={hideAll}>Yes</Button>
                <Button click={hideAll}>No</Button>
                <Button click={hideAll}>Maybe</Button>
            </div>
        </Modal>
    </Portal>
{/if}

Portal theme

SideArea

Side area popups slide in from the edge of the screen, displaying additional content or options without disrupting the user's workflow.

SideArea right positioning

tip

Check SideArea API Reference to see the list of configuration properties.

Initialization

To create a SideArea instance on a page, you need to complete the following steps:

get the widget by installing the wx-svelte-core package
import the source file of the component on a page:

App.svelte
<script>
    import { SideArea } from "wx-svelte-core";
</script>

apply the <SideArea> tag to initialize a sidearea and place content inside the component:

App.svelte
<SideArea>
    <p>Some content</p>
<SideArea/>

Adding content

You can place various content into SideArea. If you want to add some controls into it, you need to import all of them in the <script> part of your page. e.g.:

<script>
    import { SideArea, Text, Field } from "wx-svelte-core";
</script>

Then, put the desired content within the <SideArea> tag. The example below adds a couple of Fields with Text controls inside a SideArea:

<SideArea>
    <Field label="First name" let:id>
        <Text bind:value {id} placeholder="Type here" />
    </Field>
    <Field label="Last name" let:id>
        <Text bind:value {id} placeholder="Type here" />
    </Field>
</SideArea>

Positioning SideArea

The SideArea component provides flexible positioning options, which allows creating interfaces that adjust to different user preferences and screen layouts. By default SideArea appears from the right side of the screen. Such behavior is suitable for larger screens where horizontal space is abundant and additional options are offered without cluttering the interface.

SideArea right positioning

When you develop an application intended for smaller screens or decide that a left-to-right flow is more intuitive for your interface, positioning the SideArea on the left ensures easy access without compromising the user's interaction with the primary content. Use the "left" value of the position property to change the default side of SideArea showing:

<SideArea position={"left"}>
    <!--some content -->
</SideArea>

Handling SideArea closing

SideArea closes on an outside click. You can handle closing of the component by checking some parameter. In the example below, the "sideAreaVisible" parameter is set to false by default and SideArea is closed. There are also two functions that control the value of the parameter:

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

    let sideAreaVisible = false;

    function openSideArea() {
        sideAreaVisible = true;
    }

    function closeSideArea() {
        sideAreaVisible = false;
    }

</script>

<div class="demo-box">
    <Button click={openSideArea}>Show Side Area</Button>
</div>

{#if sideAreaVisible}
    <SideArea on:close={closeSideArea}>
        Some content
    </SideArea>
{/if}

On a button click, the "openSideArea()" function shows SideArea and the checked parameter gets the true value. On an outside click, the close event fires, the "closeSideArea()" function closes SideArea and sets the the "sideAreaVisible" parameter to false.

Popups

Dropdown​

Initialization​

Adding content​

Showing/hiding Dropdown​

Setting the width of Dropdown​

Positioning and aligning Dropdown​

Setting the position​

Adjusting the alignment​

Automatic positioning and alignment​

Modal box​

Initialization​

Providing the buttons' functionality​

Using default buttons​

Custom buttons​

Adding the header title​

Popup​

Initialization​

Adding content​

Showing/hiding Popup​

Positioning Popup​

Absolute positioning​

Relative positioning​

Styling Popup​

Portal​

Initialization​

Adding content​

Setting the target​

Setting the theme for a moved component​

SideArea​

Initialization​

Adding content​

Positioning SideArea​

Handling SideArea closing​

Dropdown

Initialization

Adding content

Showing/hiding Dropdown

Setting the width of Dropdown

Positioning and aligning Dropdown

Setting the position

Adjusting the alignment

Automatic positioning and alignment

Modal box

Initialization

Providing the buttons' functionality

Using default buttons

Custom buttons

Adding the header title

Popup

Initialization

Adding content

Showing/hiding Popup

Positioning Popup

Absolute positioning

Relative positioning

Styling Popup

Portal

Initialization

Adding content

Setting the target

Setting the theme for a moved component

SideArea

Initialization

Adding content

Positioning SideArea

Handling SideArea closing