Параметр variant

Featherlight — это лёгкая и гибкая библиотека для создания модальных окон на JavaScript. Одним из ключевых инструментов для кастомизации внешнего вида модального окна является параметр variant. Он позволяет назначать модификаторы классов, которые применяются к контейнеру окна, обеспечивая тонкую настройку его стилей без изменения исходного кода библиотеки.

Основная концепция

Параметр variant используется для передачи строки или массива строк, каждая из которых соответствует дополнительному CSS-классу, который будет добавлен к контейнеру модального окна. Это позволяет создавать различные визуальные варианты одного и того же окна, например:

стандартный;
с затемнением фона;
с анимацией появления;
модифицированный по стилю под конкретный блок контента.

Пример инициализации с использованием variant:

$.featherlight('#modalContent', {
    variant: 'custom-modal'
});

В данном случае контейнеру модального окна будет добавлен класс custom-modal. После этого можно определить стили в CSS:

.custom-modal {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
}

Использование нескольких вариантов

Параметр variant поддерживает передачу массива строк, что позволяет комбинировать несколько модификаторов одновременно:

$.featherlight('#modalContent', {
    variant: ['dark-theme', 'rounded']
});

В этом случае контейнер окна получит оба класса dark-theme и rounded. Такой подход облегчает построение сложных комбинаций стилей без необходимости создавать отдельный CSS-класс для каждой вариации.

.dark-theme {
    background-color: #333;
    color: #fff;
}

.rounded {
    border-radius: 15px;
}

Динамическое управление вариантами

Featherlight предоставляет возможность динамически изменять вариант уже открытого модального окна через API. Для этого используется метод instance().$instance:

var fl = $.featherlight('#modalContent', { variant: 'initial' });
fl.open();

setTimeout(function() {
    fl.$instance.removeClass('initial').addClass('highlighted');
}, 2000);

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

Взаимодействие с анимацией

Параметр variant тесно связан с системой анимаций. Например, можно определить варианты с классами, отвечающими за переходы:

$.featherlight('#modalContent', {
    variant: ['fade-in', 'slide-up']
});

CSS:

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
    transform: translateY(20px);
    animation: slideUp 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); }
    to { transform: translateY(0); }
}

Таким образом, variant служит мостом между логикой модального окна и визуальными эффектами, полностью сохраняя лёгкость Featherlight.

Влияние на внутренние элементы окна

Кроме контейнера, variant косвенно влияет на внутренние блоки, если CSS определён каскадно. Например, можно задать разные стили для заголовка или кнопки закрытия в зависимости от класса окна:

.custom-modal h1 {
    font-size: 24px;
    color: #222;
}

.custom-modal .featherlight-close {
    color: #ff0000;
}

Это позволяет создавать тематические модальные окна без дублирования кода или изменения HTML-структуры.