@param

Директива @param объявляет параметр внутри @block. Параметры управляют тем, какие CSS-правила применяются к компоненту.

Синтаксис

@param --name Type;
@param --name? Type;
@param --name? Type: default;

@param объявляется в начале тела @block.

Имя параметра

Имя параметра — custom property CSS (--имя). В JS оно преобразуется в camelCase:

ECSS	JS
--variant	variant
--is-disabled	isDisabled
--bg-color	bgColor

Обязательный и опциональный

Параметр без ? — обязательный: его нужно передавать при каждом вызове.

@param --variant Variant;
@param --size unit;

Знак ? после имени делает параметр опциональным. Если значение не передано, используется null (или явный дефолт):

@param --label? string;
@param --label? string: "Submit";

INFO

Значение по умолчанию можно задать только для опционального параметра.

Тип параметра

Все поддерживаемые типы описаны в справочнике типов данных. Тип всегда указывается явно.

boolean

@param --disabled boolean;
@param --elevated? boolean: true;

В TypeScript: boolean.

string

@param --label? string: "Submit";
@param --href string;

В TypeScript: string.

number

@param --columns number;
@param --opacity? number: 1;

В TypeScript: number.

unit

@param --size unit;
@param --gap? unit: 8px;

В TypeScript: строковый литерал вида "16px", "1.5rem" — число с допустимой единицей.

color

@param --bg color;
@param --accent? color: #646cff;

В TypeScript: string.

Ссылка на @enum

Параметр принимает одно из значений перечисления. Тип — имя @enum:

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

@block Button {
  @param --variant Variant;
}

В TypeScript: union-тип из значений перечисления.

Значение по умолчанию

Дефолт указывается через : и используется когда параметр не передан. Требует ?:

@param --variant? Variant: "primary";
@param --disabled? boolean: false;
@param --size? unit: 16px;

Опциональный параметр без явного дефолта получает null по умолчанию.

TypeScript-типы

Синтаксис	Тип TypeScript	Дефолт
@param --p Type;	Type	—
@param --p? Type;	Type | null | undefined	null
@param --p? Type: value;	Type | null | undefined	value

Использование

Параметры можно использовать в условиях @if и как значения CSS-свойств:

@block Badge {
  @param --status Status;
  @param --outlined? boolean: false;
  @param --gap? unit: 8px;

  padding: 8px 16px;
  column-gap: --gap; // var() не нужен

  @if (--outlined) {
    border: 1px solid currentColor;
  }

  @if (--status == "error") {
    background: #ffe0e0;
    color: #cc0000;
  }
}

Ограничения

• @param объявляется только внутри @block, не внутри @element
• Имена параметров уникальны в пределах блока и всех его наследников — дочерний блок не может объявить параметр с именем, уже существующим у родителя

См. также

• Типы данных — полный справочник по типам
• @enum — объявление типов-перечислений
• @if — использование параметров в условиях
• Core API: blocks — передача параметров при вызове