Шаблоны уведомлений

iziToast предоставляет гибкую систему для создания уведомлений с кастомными шаблонами. Любое уведомление состоит из набора стандартных элементов: заголовка (title), текста (message), иконки (icon) и кнопок действий (buttons). Шаблоны позволяют изменять структуру и стили этих элементов без изменения исходного кода библиотеки.

iziToast.show({
    title: 'Пример',
    message: 'Текст уведомления',
    icon: 'ico-info',
    position: 'topRight'
});

В этом примере используется стандартный шаблон, где библиотека автоматически расставляет элементы уведомления по умолчанию.

Создание собственного шаблона

Для создания кастомного шаблона используется свойство template. Оно позволяет полностью переопределить HTML-структуру уведомления.

iziToast.show({
    title: 'Кастомный шаблон',
    message: 'Уведомление с уникальным видом',
    template: `
        

            
{icon}

            

                
{title}

                
{message}

            

            
        

    `
});

В шаблоне можно использовать плейсхолдеры:

  • {title} — заголовок уведомления
  • {message} — текст уведомления
  • {icon} — иконка уведомления
  • {buttons} — кнопки действий

Плейсхолдеры заменяются значениями, указанными при вызове iziToast.show.

Использование кастомных стилей

Любой шаблон можно стилизовать с помощью CSS. Для этого рекомендуется задавать уникальные классы:

.custom-toast {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.custom-icon {
    margin-right: 10px;
    font-size: 20px;
}

.custom-content h4 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.custom-content p {
    margin: 0;
    font-size: 14px;
}

.custom-close {
    margin-left: auto;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

Такой подход позволяет создавать уведомления, полностью соответствующие дизайну проекта, включая цвета, шрифты, размеры и расположение элементов.

Динамические шаблоны

Шаблоны можно генерировать динамически с помощью функций. Для этого template может быть функцией, которая возвращает строку HTML:

iziToast.show({
    title: 'Динамический шаблон',
    message: 'Создан через функцию',
    template: function(options) {
        return `
            

                ${options.title}
                ${options.message}
            

        `;
    },
    backgroundColor: '#1abc9c'
});

Преимущество функции в том, что можно использовать любые условия и логические конструкции для формирования структуры уведомления на лету.

Шаблоны для кнопок

buttons — это массив элементов с возможностью передачи callback-функций. В шаблоне используется плейсхолдер {buttons} для автоматической вставки кнопок.

iziToast.show({
    title: 'Вопрос',
    message: 'Хотите продолжить?',
    buttons: [
        ['', function(instance, toast){
            console.log('Нажата кнопка Да');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['', function(instance, toast){
            console.log('Нажата кнопка Нет');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Кнопки полностью управляются через JavaScript, что позволяет добавлять динамические действия, выполнять AJAX-запросы или закрывать уведомления программно.

Многоуровневые уведомления

Шаблоны поддерживают вложенность элементов, что позволяет создавать сложные уведомления с несколькими блоками информации:

iziToast.show({
    template: `
        

            
{title}

            
{message}

            
{buttons}

        

    `,
    title: 'Отчет',
    message: 'Все операции завершены',
    buttons: [
        ['', function(instance, toast){
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

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

Оглавление