Работа с классами и стилями

Slim.js — это легковесная библиотека для создания веб-компонентов с минимальной нагрузкой на DOM. Управление классами и стилями в Slim.js тесно связано с реактивной моделью данных и привязками, что позволяет динамически изменять внешний вид компонентов без прямого вмешательства в DOM через classList или style.

Привязка классов через объект

Одним из основных способов управления классами в Slim.js является использование объекта привязки, где ключ — это имя класса, а значение — булевое выражение, определяющее его активность:

<div class="{ active: isActive, hidden: !isVisible }">
    Контент
</div>

Здесь:

  • active будет добавлен, если переменная isActive истинна.
  • hidden появится, если isVisible ложна.

Это позволяет полностью отказаться от ручного манипулирования classList, делая код декларативным и реактивным.

Привязка классов через строку

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

<div class="base-class { additionalClass }">
    Пример
</div>

Значение переменной additionalClass будет добавлено к базовому классу base-class, если оно существует. При обновлении additionalClass Slim.js автоматически синхронизирует DOM.

Условные классы через тернарный оператор

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

<div class="{ isActive ? 'enabled' : 'disabled' }">
    Кнопка
</div>

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

Прямое управление стилями через объект

Slim.js поддерживает инлайн-стили через объект, где ключи — имена CSS-свойств в camelCase, а значения — строки или переменные:

<div style="{ color: textColor, fontSize: fontSize + 'px' }">
    Текст
</div>

Изменение переменной textColor автоматически изменяет цвет текста без повторного рендера всего компонента.

Динамическая генерация стилей

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

get styleObject() {
    return {
        backgroundColor: this.isActive ? 'green' : 'red',
        border: this.hasBorder ? '1px solid black' : 'none'
    };
}
<div style="{ styleObject }">
    Динамический фон
</div>

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

Сочетание классов и стилей

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

<div class="{ isHighlighted ? 'highlight' : '' }" style="{ fontSize: fontSize + 'px' }">
    Комбинированное оформление
</div>

Анимации через классы

Для анимаций удобно использовать классы с CSS-транзишнами. Управление классами через Slim.js упрощает включение и отключение анимаций:

<div class="{ fadeIn: showElement }">
    Появляющийся элемент
</div>

CSS:

.fadeIn {
    transition: opacity 0.5s ease-in;
    opacity: 1;
}

.fadeIn.hidden {
    opacity: 0;
}

Slim.js гарантирует, что при изменении showElement классы будут обновлены синхронно с реактивными данными.

Доступ к элементу и манипуляции вне привязки

Для редких случаев, когда требуется прямое управление, Slim.js позволяет получить ссылку на элемент через ref:

<div ref="myDiv">
    Контент
</div>

В компоненте:

this.refs.myDiv.classList.add('custom-class');
this.refs.myDiv.style.backgroundColor = 'yellow';

Использование ref рекомендуется только для специфических сценариев, так как основной подход — декларативные привязки через объекты и строки.

Встроенные утилиты для работы с классами

Slim.js предоставляет утилиты для упрощения логики присвоения классов, включая функции условной конкатенации и объединения:

<div class="{ Slim.joinClasses('base', isActive && 'active', isDisabled && 'disabled') }">
    Пример с joinClasses
</div>

Функция Slim.joinClasses автоматически фильтрует ложные значения и объединяет строки, упрощая сложные условия.

Практические советы

  • Использовать объектные привязки для реактивного управления множеством классов.
  • Для одиночных статических классов достаточно строковой привязки.
  • Объединять классы и стили для более выразительного управления внешним видом.
  • Минимизировать использование ref для прямого доступа к DOM, полагаясь на реактивность.

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

Оглавление