svelte-toasty

Simple toast notifications using the Popover API.

Install

$ npm i -S @tadashi/svelte-toasty

API

acts.add(notification: Object): void

notification

| property | type | required | default | description | | -------- | --------------- | -------- | ------- | ------------------------------------------------------ | | custom | SvelteComponent | no | normal | The custom component to be displayed as the toast. | | lifetime | Number | no | 0 | The duration (in seconds) the toast should be visible. | | message | String | no | '' | The message to be displayed in the toast. | | mode* | Enums | no | normal | The mode of the toast. |

The mode can be:

- normal || base
- primary
- secondary
- accent
- info
- success || ok
- warning || warn
- error   || danger

CSS Vars from Original.svelte

| vars | default | | ----------------------- | ---------------------------------- | | --tto-margin | 0 0 0.8em | | --tto-border-radius | 3px | | --tto-box-shadow | 0 4px 10px oklch(0deg 0% 0% / 10%) | | --tto-content-padding | 0.9em | | --tto-bg | 100% 0 0 / 90% | | --tto-c | 0% 0 0 | | --tto-btn-font-size | 1.5em | | --tto-btn-font-family | monospace | | --tto-btn-after-content | ✗ |

[!IMPORTANT]
The color of Original component is compatible with DaisyUI.

Usage

Example via REPL.

<svelte:head>
    <link
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css"
        rel="stylesheet"
        type="text/css"
    />
    <script src="https://cdn.tailwindcss.com"></script>
</svelte:head>

<script>
import {Toasts, acts} from '@tadashi/svelte-toasty'

let triggers = [
    {mode: 'normal', message: 'Nothing to say...', lifetime: 5},
    {mode: 'primary', message: 'First place'},
    {mode: 'secondary', message: 'The second is the first loser'},
    {mode: 'accent', message: '♪♫'},
    {mode: 'success', message: 'Nice!'},
    {mode: 'info', message: 'Leve a japona'},
    {mode: 'warning', message: 'Já chegou o disco voador!'},
    {mode: 'error', message: 'Alta tensão'},
]
</script>

<div class="flex flex-col gap-4 items-start">
    {#each triggers as toasty}
        <button
            type="button"
            class="btn btn-{toasty.mode}"
            on:click={() => {
                acts.add(toasty)
            }}
        >Toasty!!! - {toasty.mode}</button>
    {/each}
</div>

<Toasts />

Buy Me a Coffee

BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4

License

MIT © Thiago Lagden