classMap и styleMap

Haunted — это современная библиотека для создания веб-компонентов на базе Web Components и Hooks, вдохновлённая React. Она предоставляет инструменты для декларативного управления состоянием и рендерингом. Важными вспомогательными функциями являются classMap и styleMap, позволяющие удобно управлять CSS-классами и стилями внутри шаблонов.

classMap

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

Синтаксис

import { html } from 'haunted';
import { classMap } from 'lit-html/directives/class-map.js';

const template = (isActive, isDisabled) => html`
  <button class=${classMap({ active: isActive, disabled: isDisabled })}>
    Кнопка
  </button>
`;

Пояснения

  • Ключи объекта — имена CSS-классов.

  • Значения:

    • true — класс применяется.
    • false — класс не применяется.

  • Можно комбинировать несколько классов динамически без необходимости вручную формировать строку.

Примеры использования

Пример 1. Динамическое переключение состояний кнопки:

import { component, useState } from 'haunted';

function ToggleButton() {
  const [active, setActive] = useState(false);

  return html`
    <button
      class=${classMap({ active: active, inactive: !active })}
      @click=${() => setActive(!active)}
    >
      ${active ? 'Включено' : 'Выключено'}
    </button>
  `;
}

customElements.define('toggle-button', component(ToggleButton));

Пример 2. Условное применение нескольких классов:

const classes = {
  primary: true,
  rounded: false,
  disabled: false
};

html`<div class=${classMap(classes)}>Контейнер</div>`;

Здесь только primary будет применён.

styleMap

styleMap предназначен для динамического управления inline-стилями элементов. Он работает аналогично classMap, но для CSS-свойств.

Синтаксис

import { html } from 'haunted';
import { styleMap } from 'lit-html/directives/style-map.js';

const template = (width, height, color) => html`
  <div style=${styleMap({ width: `${width}px`, height: `${height}px`, backgroundColor: color })}>
    Прямоугольник
  </div>
`;

Пояснения

  • Объект ключ-значение:

    • ключ — CSS-свойство в camelCase (backgroundColor, fontSize).
    • значение — строка с конкретным значением ('100px', 'red').

  • Позволяет легко менять стили динамически, избегая ручного объединения строк.

Примеры использования

Пример 1. Динамическое изменение размеров элемента:

import { component, useState } from 'haunted';

function ResizableBox() {
  const [size, setSize] = useState(100);

  return html`
    <div
      style=${styleMap({ width: `${size}px`, height: `${size}px`, backgroundColor: 'blue' })}
      @click=${() => setSize(size + 20)}
    ></div>
  `;
}

customElements.define('resizable-box', component(ResizableBox));

Пример 2. Динамическая смена цвета и шрифта:

const styles = {
  color: 'white',
  backgroundColor: 'green',
  fontSize: '20px',
  padding: '10px'
};

html`<p style=${styleMap(styles)}>Текст с динамическими стилями</p>`;

Совместное использование classMap и styleMap

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

import { html } from 'haunted';
import { classMap } from 'lit-html/directives/class-map.js';
import { styleMap } from 'lit-html/directives/style-map.js';

const template = (active, color) => html`
  <button
    class=${classMap({ active: active, disabled: !active })}
    style=${styleMap({ backgroundColor: color, padding: '12px 24px' })}
  >
    Кнопка
  </button>
`;

Здесь:

  • classMap управляет состояниями (active/disabled).
  • styleMap задаёт цвет и внутренние отступы.

Особенности и лучшие практики

  1. Реактивность: Изменение объекта, переданного в classMap или styleMap, автоматически приводит к обновлению DOM, если объект используется внутри Haunted-шаблона.

  2. Использование camelCase для styleMap: CSS-свойства, содержащие дефисы (background-color), должны записываться в camelCase (backgroundColor).

  3. Избегать вычисления строк вручную: Директивы упрощают код, предотвращая ошибки в конкатенации и дублирование.

  4. Совместимость с Lit-html: Haunted использует lit-html под капотом, поэтому любые примеры из документации lit-html для classMap и styleMap применимы и здесь.

Подытоживание возможностей

  • classMap позволяет управлять CSS-классами через объект с булевыми значениями.
  • styleMap упрощает динамическое добавление inline-стилей через объект ключ-значение.
  • Их совместное использование обеспечивает чистый и читаемый код веб-компонентов, полностью декларативный и реактивный.
  • Эти директивы позволяют легко изменять внешний вид компонентов в зависимости от состояния без ручной работы со строками классов и стилей.

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

Оглавление