Чекбоксы и радиокнопки

Для работы с iziToast необходимо подключить библиотеку через CDN или npm. Основные файлы: iziToast.min.css и iziToast.min.js. После подключения можно вызывать метод iziToast.show() для отображения уведомлений.

iziToast.show({
    title: 'Пример',
    message: 'Базовое уведомление'
});

Библиотека автоматически добавляет контейнер для уведомлений в DOM, что позволяет позиционировать их с помощью опции position.

iziToast.show({
    title: 'Информация',
    message: 'Уведомление в правом верхнем углу',
    position: 'topRight'
});

Использование чекбоксов и радиокнопок в уведомлениях

iziToast поддерживает кастомные элементы, такие как чекбоксы и радиокнопки, через опцию inputs. Она принимает массив объектов, где каждый объект описывает элемент управления: тип, название, значение и текст.

Пример с чекбоксами

iziToast.show({
    title: 'Выберите опции',
    message: 'Отметьте нужные пункты',
    timeout: false,
    close: false,
    overlay: true,
    inputs: [
        ['checkbox', 'option1', '', 'Первый вариант'],
        ['checkbox', 'option2', '', 'Второй вариант'],
        ['checkbox', 'option3', '', 'Третий вариант']
    ],
    buttons: [
        ['<button>Сохранить</button>', function (instance, toast) {
            let checkedOptions = [];
            toast.querySelectorAll('input[type="checkbox"]').forEach(input => {
                if(input.checked) checkedOptions.push(input.value);
            });
            console.log('Выбрано:', checkedOptions);
            instance.hide({transitionOut: 'fadeOut'});
        }]
    ]
});

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

  • timeout: false предотвращает автоматическое скрытие уведомления.
  • overlay: true делает фон затемнённым, выделяя уведомление.
  • inputs описывают элементы управления в формате [тип, имя, значение, текст].
  • Доступ к состоянию чекбоксов осуществляется через toast.querySelectorAll.

Пример с радиокнопками

iziToast.show({
    title: 'Выберите один вариант',
    message: 'Только один вариант может быть активен',
    timeout: false,
    overlay: true,
    inputs: [
        ['radio', 'choice', 'a', 'Вариант A'],
        ['radio', 'choice', 'b', 'Вариант B'],
        ['radio', 'choice', 'c', 'Вариант C']
    ],
    buttons: [
        ['<button>Подтвердить</button>', function (instance, toast) {
            const selected = toast.querySelector('input[type="radio"]:checked');
            console.log('Выбранный вариант:', selected ? selected.value : null);
            instance.hide({transitionOut: 'fadeOut'});
        }]
    ]
});

Особенности работы с радиокнопками:

  • Все элементы с одинаковым именем name образуют группу.
  • Можно легко получить выбранное значение через input:checked.
  • Для обязательного выбора можно добавить проверку перед закрытием уведомления.

Стилизация чекбоксов и радиокнопок

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

.iziToast input[type="checkbox"],
.iziToast input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}
.iziToast label {
    cursor: pointer;
    user-select: none;
}

Дополнительно можно обернуть элементы в контейнеры или добавлять иконки рядом с текстом для визуального акцента.

Динамическое создание элементов

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

const options = ['Красный', 'Синий', 'Зелёный'];

const inputs = options.map((opt, index) => ['checkbox', `color${index}`, opt, opt]);

iziToast.show({
    title: 'Выберите цвета',
    message: '',
    timeout: false,
    inputs: inputs,
    buttons: [
        ['<button>Применить</button>', function (instance, toast) {
            const selected = [];
            toast.querySelectorAll('input[type="checkbox"]:checked').forEach(el => selected.push(el.value));
            console.log('Выбрано цветов:', selected);
            instance.hide();
        }]
    ]
});

Такой подход удобен, если количество опций заранее неизвестно.

Взаимодействие с событиями

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

  • onOpening — перед отображением уведомления
  • onOpened — после появления
  • onClosing — перед скрытием
  • onClosed — после скрытия

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

iziToast.show({
    title: 'События',
    message: '',
    timeout: false,
    inputs: [
        ['checkbox', 'notify', 'yes', 'Получать уведомления']
    ],
    onOpened: function(toast){
        const input = toast.querySelector('input[name="notify"]');
        input.checked = true; // по умолчанию активен
    }
});

Рекомендации по UX

  • Не перегружать уведомление большим количеством чекбоксов.
  • Для радиокнопок использовать явные заголовки и пояснения.
  • При длительных действиях (timeout: false) всегда добавлять кнопку закрытия.
  • Для мобильных интерфейсов увеличивать размер элементов для удобного нажатия.

Совмещение с кнопками и колбэками

Чекбоксы и радиокнопки особенно полезны вместе с кнопками действия:

iziToast.show({
    title: 'Настройки уведомлений',
    message: 'Выберите предпочтения',
    timeout: false,
    inputs: [
        ['checkbox', 'email', '', 'Email'],
        ['checkbox', 'sms', '', 'SMS']
    ],
    buttons: [
        ['<button>Сохранить</button>', function (instance, toast) {
            const prefs = Array.from(toast.querySelectorAll('input[type="checkbox"]:checked'))
                               .map(input => input.value);
            savePreferences(prefs); 
            instance.hide();
        }],
        ['<button>Отмена</button>', function (instance, toast) {
            instance.hide();
        }]
    ]
});

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

Оглавление