Использование с Svelte

Для работы с iziToast в проекте на Svelte необходимо сначала установить библиотеку через npm:

npm install izitoast

После установки подключение происходит в компоненте через импорт CSS и JS:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

CSS подключается отдельно, чтобы стили уведомлений корректно отображались.

Базовое использование iziToast в компоненте Svelte

В Svelte уведомления можно вызывать прямо из методов или реактивных блоков. Простейший пример:

<script>
    import iziToast from 'izitoast';
    import 'izitoast/dist/css/iziToast.min.css';

    function showSuccess() {
        iziToast.success({
            title: 'Успех',
            message: 'Операция выполнена успешно!',
            position: 'topRight'
        });
    }
</script>

<button on:click={showSuccess}>Показать уведомление</button>

Ключевые моменты:

  • title — заголовок уведомления.
  • message — текст уведомления.
  • position — положение на экране (topRight, topLeft, bottomRight, bottomLeft, center).

Настройка глобальных параметров

Для удобства можно определить глобальные настройки, чтобы не повторять их в каждом уведомлении:

iziToast.settings({
    timeout: 5000,
    resetOnHover: true,
    progressBar: true,
    theme: 'dark',
});

После этого все уведомления будут использовать заданные значения по умолчанию.

Различные типы уведомлений

iziToast поддерживает несколько встроенных типов:

  • success — уведомления об успешных действиях.
  • error — сообщения об ошибках.
  • info — информационные уведомления.
  • warning — предупреждения.

Пример вызова разных типов:

function showError() {
    iziToast.error({
        title: 'Ошибка',
        message: 'Произошла ошибка при загрузке данных',
        position: 'topRight'
    });
}

function showInfo() {
    iziToast.info({
        title: 'Информация',
        message: 'Сервер скоро будет обновлен',
        position: 'topRight'
    });
}

Использование событий iziToast

iziToast позволяет обрабатывать действия пользователя через события:

iziToast.show({
    title: 'Внимание',
    message: 'Вы уверены?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            console.log('Подтверждено');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['<button>Нет</button>', function (instance, toast) {
            console.log('Отменено');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

Особенности:

  • buttons — массив кнопок, каждая кнопка — массив из HTML и функции обратного вызова.
  • instance.hide() закрывает уведомление с возможностью анимации.

Интеграция с реактивностью Svelte

Svelte позволяет связывать уведомления с реактивными переменными:

<script>
    import iziToast from 'izitoast';
    import 'izitoast/dist/css/iziToast.min.css';

    let status = '';

    $: if (status === 'success') {
        iziToast.success({ title: 'Успех', message: 'Данные сохранены!' });
        status = '';
    }
</script>

<button on:click={() => status = 'success'}>Сохранить</button>

Здесь используется реактивный блок $:, который отслеживает изменение переменной status и автоматически вызывает уведомление.

Продвинутые настройки

Анимации

iziToast поддерживает кастомные анимации появления и исчезновения:

iziToast.show({
    title: 'Анимация',
    message: 'Использование кастомных анимаций',
    animateInside: true,
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOutUp'
});
  • transitionIn — эффект появления.
  • transitionOut — эффект скрытия.
  • animateInside — анимация контента уведомления.

Позиционирование и стек уведомлений

Можно управлять положением и количеством одновременно отображаемых уведомлений:

iziToast.settings({
    position: 'bottomLeft',
    maxWidth: 400,
    zindex: 9999
});
  • maxWidth ограничивает ширину уведомления.
  • zindex позволяет контролировать порядок наложения поверх других элементов.

Авто закрытие и таймер

iziToast.show({
    title: 'Таймер',
    message: 'Уведомление закроется через 3 секунды',
    timeout: 3000, 
    progressBar: true
});
  • timeout — время автоматического закрытия в миллисекундах.
  • progressBar — отображение индикатора оставшегося времени.

Встраивание HTML и кастомных элементов

iziToast поддерживает HTML внутри сообщений:

iziToast.show({
    title: 'HTML контент',
    message: '<strong>Жирный текст</strong> и <em>курсив</em>',
    timeout: 4000
});

Также можно использовать кастомные блоки:

iziToast.show({
    title: 'Кастомная кнопка',
    message: 'Нажмите кнопку ниже',
    buttons: [
        ['<button>Закрыть</button>', (instance, toast) => instance.hide({}, toast)]
    ]
});

Использование iziToast в SvelteKit

В проектах SvelteKit iziToast можно использовать на клиентской стороне. Рекомендуется оборачивать вызовы уведомлений в условие проверки browser:

import { browser } from '$app/environment';
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

if (browser) {
    iziToast.success({ title: 'SvelteKit', message: 'Клиентское уведомление!' });
}

Это предотвращает ошибки при SSR (Server Side Rendering), так как iziToast работает только в браузере.

Стилизация и темы

iziToast поддерживает смену темы через theme:

iziToast.show({
    title: 'Темы',
    message: 'Тёмная тема уведомления',
    theme: 'dark'
});

Доступные темы:

  • light — светлая.
  • dark — тёмная.

Для полной кастомизации можно изменять CSS переменные или подключать собственные стили:

.iziToast.iziToast-dark {
    background: linear-gradient(90deg, #4b6cb7, #182848);
}

Интеграция с формами и асинхронными действиями

<script>
    import iziToast from 'izitoast';
    import 'izitoast/dist/css/iziToast.min.css';

    async function submitForm() {
        try {
            const response = await fetch('/api/data', { method: 'POST' });
            if (!response.ok) throw new Error('Ошибка сервера');
            iziToast.success({ title: 'Успех', message: 'Данные отправлены' });
        } catch (e) {
            iziToast.error({ title: 'Ошибка', message: e.message });
        }
    }
</script>

<form on:submit|preventDefault={submitForm}>
    <input type="text" placeholder="Введите данные" required>
    <button type="submit">Отправить</button>
</form>

Такой подход позволяет показывать уведомления в ответ на результат асинхронных действий, сохраняя UX без перезагрузки страницы.

Оглавление