svelte-toast

svelte-toast provides all the necessary stuff to create toast notifications.

A toast is a simple feedback message. It only fills the required amount of space and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.

The Toast component

The Toast component is a container holding all the active toasts notifications. It comes with a default styling and a default toast template making it usable out-of-the-box.

<script lang="ts">
    import Toast from '@aircss/svelte-toast';
</script>

<div class="absolute top right w-100 w6-m ma4">
    <Toast />
</div>

Props

• class: set custom classes for the toast container element (optional, default: "flex column")
• timeout: default timeout of a toast in ms (optional, default: 5000)

Slot

It is possible to override the default template of a toast by declaring a new template as a child of the Toast element. The values of each toast are exposed through the toast property:

<script lang="ts">
    import Toast from '@aircss/svelte-toast';
</script>

<div class="absolute top right w-100 w6-m ma4">
    <Toast let:toast>
        <div class="w-100 w6-m pa3 bt4 ba bg--white">
            <h1 class="ma0 f-subtitle">{toast.title}</h1>
            <p class="lh-body tj overflow-hidden">
                {toast.message}
            </p>
        </div>
    </Toast>
</div>

The toast API

Creating a new toast only requires to call the send() method of the toast API:

<script lang="ts">
    import { toast } from '@aircss/svelte-toast';
    import Toast from '@aircss/svelte-toast';

    function show() {
        toast.send({
            title: 'Hello world!',
            message: 'This is a simple Svelte X Air CSS toast notification.'
        });
    }
</script>

<div class="absolute top right w-100 w6-m ma4">
    <Toast />
</div>

<button on:click={show}>Show toast</button>

The send() message expect an object as param complying to the Toast interface. The minimal toast bears a little to no data. However, developers should add as much of properties as pleased. Reserved properties are as follow:

• id: unique identifier of the toast notification (automatically generated)

• index: rank index of each toast starting with 0 for the least recent one (automatically generated)

• timestamp: creation time of the toast (automatically generated)

• dismiss: function to dismiss the toast (automatically generated)

• timeout: timeout of the toast in ms (optional, default: global timeout)

• title: title of the toast (optional)

• message: message of the toast (optional)

• template: use a Svelte component as a template for the toast (optional)

Svelte components as toast templates

As mentionned in the previous paragraph, the send() method accepts svelte components as templates for toasts. The component only requires a mandatory toast prop compliant with the Toast interface to work:

<script lang="ts">
    export let toast: Toast;
</script>

<div class="w-100 w6-m pa3 bt4 ba bg--white">
    <h1 class="ma0 f-subtitle">{toast.title}</h1>
    <p class="lh-body tj overflow-hidden">
        {toast.message}
    </p>
</div>

The following example shows how to use this component as a toast template:

<script lang="ts">
    import { toast } from '@aircss/svelte-toast';
    import Toast from '@aircss/svelte-toast';

    import MyTemplate from './my-component.svelte';

    function show() {
        toast.send({
            title: 'Hello world!',
            message: 'This is a simple Svelte X Air CSS toast notification.',
            template: MyTemplate
        });
    }
</script>

<div class="absolute top right w-100 w6-m ma4">
    <Toast />
</div>

<button on:click={show}>Show toast</button>