Условная стилизация

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

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

В Riot.js классы можно добавлять условно с использованием выражений внутри атрибута class. Основной синтаксис:

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

isActive — булевое свойство компонента.
Если isActive равно true, элемент получит класс active, иначе — inactive.

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

<div class={ 
  active: isActive,
  disabled: !isEnabled,
  highlighted: isHighlighted 
}>Контент</div>

Каждое ключевое слово в объекте соответствует имени CSS-класса, а значение — логическое выражение. Riot автоматически применяет классы с истинным значением и игнорирует ложные.

Инлайновые стили через атрибут `style`

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

<div style={ 
  color: isError ? 'red' : 'black',
  fontWeight: isBold ? 'bold' : 'normal' 
}>Сообщение</div>

Каждое свойство объекта соответствует CSS-свойству.
Значение вычисляется динамически на основе текущего состояния компонента.

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

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

<my-component>
  <div class={ selected ? 'selected' : '' }>Элемент</div>

  <script>
    this.selected = false;

    toggle() {
      this.selected = !this.selected;
    }
  </script>
</my-component>

При вызове метода toggle() класс selected будет динамически добавляться или удаляться без необходимости ручного манипулирования DOM.

Комбинация классов и стилей

Для более гибкой стилизации можно комбинировать классы и инлайновые стили:

<div 
  class={ isActive ? 'active' : '' } 
  style={ { backgroundColor: isActive ? 'green' : 'gray' } }
>
  Кнопка
</div>

class управляет семантическими или общими стилями.
style позволяет точно настроить визуальные параметры без создания дополнительных CSS-классов.

Динамическая смена темы и состояния

Riot.js позволяет условно применять целые наборы классов для управления темами или состояниями компонента:

<div class={ 
  'button': true,
  'button-primary': isPrimary,
  'button-disabled': isDisabled 
}>
  Отправить
</div>

button применяется всегда.
button-primary и button-disabled добавляются в зависимости от состояния компонента.
Такой подход упрощает масштабирование стилей при расширении приложения.