Динамические стили

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

Атрибут class и его привязка

В Slim.js атрибут class может быть связан с данными компонента. Для этого используется синтаксис привязки через двойные фигурные скобки:

<div class="{{isActive ? 'active' : 'inactive'}}">Контент</div>

Здесь isActive — свойство компонента. При его изменении Slim.js автоматически обновляет класс элемента в DOM. Это позволяет создавать интерактивные интерфейсы без ручного вмешательства в DOM.

Для множественных классов можно использовать объект:

<div class="{{ { active: isActive, disabled: isDisabled } }}">Текст</div>

Slim.js преобразует объект в строку классов, оставляя только те ключи, значения которых истинны.

Атрибут style и inline-стили

Прямое управление стилями возможно через атрибут style:

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

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

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

<div style="{{ styleObject }}">Контент</div>

<script>
  this.styleObject = {
    color: 'red',
    backgroundColor: 'yellow',
    fontWeight: 'bold'
  };
</script>

Slim.js конвертирует объект в корректную CSS-строку, что облегчает поддержку динамических стилей.

Реактивные вычисляемые свойства

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

get buttonStyle() {
  return {
    backgroundColor: this.isActive ? 'green' : 'gray',
    color: this.isActive ? 'white' : 'black'
  };
}

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

<button style="{{ buttonStyle }}">Нажми меня</button>

Любое изменение isActive мгновенно отразится на стилях кнопки.

Анимации и переходы

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

.fade {
  transition: opacity 0.3s ease-in-out;
}
.fade.hidden {
  opacity: 0;
}
.fade.visible {
  opacity: 1;
}
<div class="fade {{isVisible ? 'visible' : 'hidden'}}">Содержимое</div>

Переключение isVisible вызовет автоматическое плавное изменение прозрачности без необходимости напрямую работать с JavaScript-анимациями.

Управление псевдоклассами через динамику

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

<div class="{{isHovered ? 'hovered' : ''}}" 
     onmouseo ver="{{() => this.isHovered = true}}" 
     onmouse out="{{() => this.isHovered = false}}">
  Элемент с hover
</div>

CSS:

.hovered {
  background-color: lightblue;
}

Такой подход делает состояния полностью реактивными и независимыми от внешнего JS-кода.

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

В Slim.js удобно реализовывать темизацию, передавая объект стилей в компонент:

this.theme = {
  primaryColor: '#3498db',
  secondaryColor: '#2ecc71'
};
<div style="{{ { color: theme.primaryColor, borderColor: theme.secondaryColor } }}">
  Тематический блок
</div>

Изменение объекта theme мгновенно обновляет стили всех связанных элементов, что упрощает поддержку нескольких визуальных схем.

Итоговые принципы работы с динамическими стилями

  • Использовать привязку к атрибутам class и style для автоматического обновления DOM.
  • Применять объекты для удобной работы с несколькими стилями одновременно.
  • Вычисляемые свойства позволяют создавать реактивные и условные стили без дублирования кода.
  • Комбинация динамических классов и CSS-переходов обеспечивает плавные анимации и эффекты.
  • Темизация через объекты стилей делает компоненты гибкими и масштабируемыми.

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

Оглавление