blocks

blocks — объект, экспортируемый из каждого .ecss-файла. Содержит по одной фабрике на каждый объявленный @block.

Импорт

import { blocks } from './Button.ecss';

Вызов блока

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

const {
  class: className,
  cssVariables,
  dataAttributes,
} = blocks.Button({
  variant: 'primary',
  disabled: true,
});

Параметры соответствуют @param-объявлениям в .ecss, имена в camelCase.

class

CSS-класс блока — строка, которую нужно добавить к элементу.

cssVariables

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

dataAttributes

Объект data-атрибутов, отражающих переданные параметры. Используется для применения условных стилей из @if.

Элементы

Если @block содержит @element, они доступны как вложенные фабрики:

blocks.Button({ variant: 'primary' }); // фабрика блока
blocks.Button.Icon(); // фабрика элемента Icon
blocks.Button.Text(); // фабрика элемента Text

Фабрики элементов параметров не принимают.

Ручная сборка

Прямой доступ к полям результата полезен, когда вы строите обёртку вручную — например, для собственного рендерера или интеграции с нестандартным фреймворком:

const element = document.createElement('button');
const {
  class: className,
  cssVariables,
  dataAttributes,
} = blocks.Button({
  variant: 'primary',
  disabled: true,
});

element.className = className;

Object.entries(cssVariables).forEach(([key, val]) => {
  element.style.setProperty(key, val);
});

Object.entries(dataAttributes).forEach(([key, val]) => {
  element.setAttribute(key, String(val));
});

См. также

• @block — объявление блоков
• @element — вложенные элементы