Работа с CSS-классами
Имена классов skin в примерах приведены в читаемом виде. Хелперы возвращают имена из CSS Modules (зависят от сборки). В режиме конструктора skinAspectRatio также может добавлять класс предпросмотра.
cn
|
Описание |
Сигнатура |
|
Формирует строку CSS‑классов (через пробел). Все аргументы приводятся к строкам. |
|
Параметры
|
Параметр |
Тип |
Описание |
|
|
Any |
Значения, преобразуемые в имена классов. |
Примеры
{{cn "card" "card--active"}}
{{!-- Результат: "card card--active" --}}
{{!-- Данные: { isPrimary: true, isLarge: false } --}}
{{cn "button" (when isPrimary "button--primary") (when isLarge "button--large")}}
{{!-- Результат: "button button--primary" --}}
{{cn "header" false undefined "header--sticky"}}
{{!-- Результат: "headerfalse undefinedheader--sticky" --}}
skinAspectRatio
|
Описание |
Сигнатура |
|
Возвращает CSS-класс для заданного соотношения сторон контейнера. Применяется для изображений, видео и медиа-блоков. |
|
Параметры
|
Параметр |
Тип |
Описание |
|
|
AspectRatio |
Соотношение сторон. |
Допустимые значения ratio
|
Значение |
Пропорция |
Типичное использование |
|
|
Вертикальное. |
Портретные фото, карточки товаров. |
|
|
Квадрат. |
Аватары, иконки. |
|
|
Классическое. |
Фотографии, превью. |
|
|
Широкоформатное. |
Видео, баннеры. |
|
|
Панорамное. |
Широкие баннеры. |
|
|
Ультраширокое. |
Промо-секции. |
|
|
Ультраширокое. |
Хедер-баннеры. |
|
|
Широкое. |
Баннеры среднего формата. |
|
|
Полоса. |
Тонкие промо-полосы. |
|
|
Узкая полоса. |
Разделители. |
|
|
Узкая полоса. |
Очень широкие баннеры. |
|
|
По экрану. |
Полноэкранные секции. |
Примеры
{{skinAspectRatio "16:9"}}
{{!-- Результат: ".skin_aspect-ratio_16:9" --}}
{{skinAspectRatio "1:1"}}
{{!-- Результат: ".skin_aspect-ratio_1:1" --}}
{{skinAspectRatio "fit-screen"}}
{{!-- Результат: ".skin_aspect-ratio_fit-screen" --}}
skinBackground
|
Описание |
Сигнатура |
|
Возвращает CSS-класс фона для секции или блока. |
|
Параметры
|
Параметр |
Тип |
Описание |
|
|
BackgroundSkin |
Тип фона. |
Допустимые значения color
|
Значение |
Описание |
|
|
Без фона (прозрачный). |
|
|
Белый фон |
|
|
Основной цвет фона. |
|
|
Вторичный цвет фона. |
|
|
Нейтральный фон. |
Примеры
{{skinBackground "primary"}}
{{!-- Результат: "skin_background_primary" --}}
{{skinBackground "none"}}
{{!-- Результат: "skin_background_none" --}}
Примечание
Класс только определяет CSS переменную --ys-current-skin-fill, для применения фона укажите стиль.
background-color: var(--ys-current-skin-fill)
skinBorderColor
|
Описание |
Сигнатура |
|
Возвращает CSS-класс цвета обводки для блока. |
|
Параметры
|
Параметр |
Тип |
Описание |
|
|
BorderSkin |
Тип обводки. |
Допустимые значения color
|
Значение |
Описание |
|
|
Без обводки. |
|
|
Обводка основным цветом. |
|
|
Обводка вторичным цветом. |
Примеры
{{skinBorderColor "primary"}}
{{!-- Результат: "skin_border_primary" --}}
{{skinBorderColor "none"}}
{{!-- Результат: "skin_border_none" --}}
{{skinBorderColor "secondary"}}
{{!-- Результат: "skin_border_secondary" --}}
skinRounded
|
Описание |
Сигнатура |
|
Возвращает CSS-класс скругления углов. Учитывает степень скругления и тип скругления из глобальных настроек. |
|
Параметры
|
Параметр |
Тип |
Описание |
|
|
RoundedSkin |
Степень скругления. |
Допустимые значения rounded
|
Значение |
Описание |
|
|
Без скругления. |
|
|
Минимальное. |
|
|
Малое. |
|
|
Среднее малое. |
|
|
Среднее. |
|
|
Среднее большое. |
|
|
Большое. |
|
|
Очень большое. |
|
|
Максимальное (круг). |
Примеры
{{!-- Глобальная настройка roundedType: "normal" --}}
{{skinRounded "100"}}
{{!-- Результат: "skin_border-radius-normal_100" --}}
{{skinRounded "0"}}
{{!-- Результат: "skin_border-radius-normal_0" --}}
{{skinRounded "999"}}
{{!-- Результат: "skin_border-radius-normal_999" --}}
Примечание
Класс только определяет CSS переменную --ys-current-skin-border-radius. Для применения скругления укажите стили.
border-radius: var(--ys-current-skin-border-radius)