Параметры и состояния

Параметры — это входные значения блока, от которых зависит, какие стили применятся. Они объявляются директивой @param и управляют условными правилами @if. Это и есть «состояния» компонента, только описанные в стилях, а не в JavaScript.

Объявление параметров

@param объявляется в начале тела блока: имя (CSS-переменная с префиксом --), тип и, при необходимости, значение по умолчанию.

@enum Variant {
  values: "primary", "ghost";
}

@block Button {
  @param --variant Variant;       // обязательный
  @param --disabled? boolean;     // опциональный (знак ?)
  @param --size? string: "md";    // опциональный со значением по умолчанию

  /* стили ниже */
}

Знак ? после имени делает параметр необязательным. Типы бывают примитивные (boolean, string, number, unit, color) и пользовательские — перечисления @enum. Полный список — в разделе Типы данных.

Связь с пропом params

Каждый @param становится полем объекта params у сгенерированного компонента. Имя переводится из --kebab-case в camelCase:

В .ecss	В компоненте
@param --variant	params.variant
@param --is-active	params.isActive

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

<EButton as="button" params={{ variant: 'primary', disabled: true }}>
  Нажми меня
</EButton>;

TypeScript знает типы всех параметров: передать variant: 'danger', которого нет в @enum Variant, не получится. Если у блока есть хотя бы один обязательный параметр, проп params обязателен; если все параметры опциональны — его можно не передавать.

Условные стили @if

Параметры сами по себе ничего не делают — их «считывают» условия @if / @elseif / @else. Это механизм, который превращает значение параметра в набор CSS-правил:

@block Button {
  @param --variant Variant;
  @param --disabled? boolean;

  display: inline-flex;
  padding: 8px 16px;

  @if (--variant == "primary") {
    background: #646cff;
    color: #fff;
  } @elseif (--variant == "ghost") {
    background: transparent;
    border: 1px solid currentColor;
  }

  @if (--disabled) {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

Для boolean-параметра достаточно голого имени (@if (--disabled) — эквивалент --disabled == true). Для перечислений и строк используется сравнение == / !=. Условия можно комбинировать (&&, ||, !) и вкладывать — подробности в справочнике @if.

Что дальше?

• @param — полный справочник параметров
• @if / @elseif / @else — все формы условий
• Типы данных — типы параметров
• Компоненты и адаптеры — как блок становится компонентом