Контент

`<ya-kit-breadcrumbs />`

Элемент для отображения хлебных крошек.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
items	`BreadcrumbModel[]`	Массив моделей хлебных крошек.

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

<ya-kit-breadcrumbs-controller as="breadcrumbsController">
    <ya-kit-breadcrumbs items={{breadcrumbsController.model}} />
</ya-kit-breadcrumbs-controller>

Пример внешнего вида

png

`<ya-kit-image />`

Элемент для отображения изображений в шаблонах.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
src	`string`, `ImageInfoModel`	URL изображения или массив нарезок изображения. Этот атрибут является обязательным для элемента `<ya-kit-image>`.
fit	`contain`, `cover`, `auto`	Определяет, как содержимое должно заполнять контейнер относительно его высоты и ширины: `auto` — в автоматическом режиме выбирает один из двух вариантов в зависимости от изображения. `contain` — смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально. `cover` — смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока.
aspect-ratio	`3:4`, `1:1`, `4:3`, `2:1`, `5:2`, `5:1`	Соотношение сторон для контейнера.
background-color	`none`, `primary`, `secondary`, `neutral`	Цвет фона под изображением. Применятся для изображений с прозрачным фоном.
rounded	`0`, `25`, `50`, `75`, `100`, `150`, `200`, `250`, `999`	Радиус скругления углов изображений. По умолчанию — `0`.
enable-paranja	`boolean`	Затемнение фотографий. По умолчанию — `true`.

`<ya-kit-image-swiper />`

Элемент для отображения группы изображений, которые сменяют друг друга при наведении.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
items	`MediaModel[]`	Массив медиа-элементов для отображения.
fit	`contain`, `cover`, `auto`	Определяет, как содержимое должно заполнять контейнер относительно его высоты и ширины: `auto` — в автоматическом режиме выбирает один из двух вариантов в зависимости от изображения. `contain` — смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально. `cover` — смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока.
aspect-ratio	`3:4`, `1:1`, `4:3`, `2:1`, `5:2`, `5:1`	Соотношение сторон для контейнера.
background-color	`none`, `primary`, `secondary`, `neutral`	Цвет фона под изображением. Применятся для изображений с прозрачным фоном.
rounded	`0`, `25`, `50`, `75`, `100`, `150`, `200`, `250`, `999`	Радиус скругления углов изображений. По-умолчанию — `0`.
disable-carousel	`boolean`	Отображать только первое изображение. По-умолчанию `false`.
disable-carousel	`enable-paranja`	Затемнение фотографий. По-умолчанию `true`.
disable-carousel	`hover`, `never`, `always`	Условия отображения индикаторов слайдов на декстопных устройствах. `hover` — отображать индикаторы при наведении. `never` — всегда скрывать индикаторы. `always` — всегда отображать индикаторы.

Пример внешнего вида

Связанные типы: MediaModel.

`<ya-kit-grouping-characteristic />`

Используется для отображения и выбора различных вариантов товара (цвет, размер, материал и т.д.).

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
characteristic	`GroupingCharacteristicModel`	Модель характеристики товара с доступными значениями и текущим выбором.
is-сollapsable	`boolean`	Определяет, можно ли свернуть список опций.
on-сhange	`(id: string, value: string) => void`	Callback-функция, вызываемая при изменении выбранного значения характеристики.

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

<ya-kit-product-detail-controller as="controller">
    {{#each controller.model.groupingCharacteristics as |characteristic|}}
        <ya-kit-grouping-characteristic characteristic={{characteristic}} on-change={{controller.onVariantSelect}} />
    {{/each}}
</ya-kit-product-detail-controller>

Пример внешнего вида

`<ya-kit-link />`

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

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
to	`string`	Указывает ссылку: либо URL, либо якорь.
size	`xs \ sm \ md \ lg \ xl \ 2xl \ 3xl \ 4xl \ 5xl`	Размер текста.
align	`left \ center \ right`	Выравнивание текста.
weight	`normal \ medium \ semibold \ bold`	Толщина текста.
decoration	`line-through \ underline`	Декоративные линии для текста.
lines	`number`	Количество строк текст.

`<ya-kit-markdown />`

Элемент типографики подходит для шаблонов, где Rich контент необходимо задавать и настраивать из конструктора.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
markup	`string`	Rich контент в формате MD разметки.

`<ya-kit-media-gallery />`

Галерея для отображения медиа-контента (изображений и видео) с различными режимами отображения, настройками внешнего вида и интерактивными возможностями.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
is-loading	`boolean`	Включение скелетона.
items	`MediaModel[]`	Массив медиа-элементов для отображения в галерее (изображения и видео).
layout	`grid \ thumbnail`	Режим отображения галереи. По-умолчанию `grid`.
background-color	`none \ primary \ secondary \ neutral`	Цвет фона под изображением. Применятся для изображений с прозрачным фоном.
aspect-ratio	`3:4 \ 1:1 \ 4:3 \ 2:1 \ 5:2 \ 5:1`	Соотношение сторон для контейнера. По-умолчанию `1:1`.
fit	`contain \ cover \ auto`	Определяет, как содержимое должно заполнять контейнер относительно его высоты и ширины: `auto` В автоматическом режиме выбирает один из двух вариантов в зависимости от изображения. `contain` Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально `cover` Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока
gap	`0 \ 25 \ 50 \ 100`	Расстояние между элементами галереи.
initial-grid-count	`number`	Начальное количество отображаемых элементов в сеточном layout (остальные скрываются с кнопкой "Показать еще"). По-умолчанию `4`.
enable-paranja	`boolean`	Затемнение фотографий. По-умолчанию `true`.
enable-fullscreen	`boolean`	Включение/отключение полноэкранного просмотра. По-умолчанию `true`.
autoplay	`boolean`	Автоматическое воспроизведение видео. По-умолчанию `true`.
priority	`boolean`	Включение/отключение приоритетной загрузки изображений. По-умолчанию `false`.
loop	`boolean`	Зацикливание видео.

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

<ya-kit-product-detail-controller as="controller">
    <ya-kit-media-gallery class="gallery" items={{controller.model.variant.mediaItems}} aspect-ratio="1:1" layout="thumbnail" />
</ya-kit-product-detail-controller>

Пример внешнего вида

Связанные типы: MediaModel.

`<ya-kit-pagination />`

Компонент для навигации по страницам.

Свойства элемента

Название	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
current	`number`	Номер текущей активной страницы.
total	`number`	Общее количество страниц.
on-page-change	`(page: number) => void`	Callback-функция, вызываемая при изменении страницы.

Пример внешнего вида

`<ya-kit-prices />`

Элемент типографики для отображения цен и скидок.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
price	`number \ string`	Цена до скидки.
final-price	`number \ string`	Цена после скидки.
quantity	`number`	Количество товара.
size	`sm \ md \ lg \ xl \ 2xl`	Размер текста.
weight	`normal \ medium \ semibold \ bold`	Толщина текста.
enable-discount	`boolean`	Отображать/скрывать скидку. По-умолчанию `true`.

Пример внешнего вида

Ошибка на вики 404

`<ya-kit-text />`

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

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
as	`string`	Элемент для отображения. По-умолчанию `<p />`.
color	`inherit \ primary \ secondary \ brand`	Цвет текста.
size	`xs \ sm \ md \ lg \ xl \ 2xl \ 3xl \ 4xl \ 5xl`	Размер текста.
align	`left \ center \ right`	Выравнивание текста.
weight	`normal \ medium \ semibold \ bold`	Толщина текста.
decoration	`line-through \ underline`	Декоративные линии для текста.
lines	`number`	Количество строк текста.

`<yandex-pay-badge-split />`

Элемент для отображения BNPL бейджа Яндекс Пэй.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
price	`number \ string`	Цена до скидки.
size	`s \ m \ l`	Размер бейджа.
color	`primary \ green \ grey \ transparent`	Цвет бейджа.
variant	`simple \ detailed`	Вариант отображения бейджа.

Пример внешнего вида

`<yandex-pay-badge-discount />`

Элемент для отображения бейджа скидки/кэшбека Яндекс Пэй.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
price	`number \ string`	Цена до скидки.
size	`s \ m \ l`	Размер бейджа.

Пример внешнего вида

`<ya-kit-products-filters />`

Данные для ваших секций могут быть доступны не сразу. Вы можете улучшить восприятие быстродействия страницы, используя <ya-kit-skeleton>.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
schema	`ProductsFiltersSchemaModel`	Схема фильтров.
value	`Record<string, unknown>`	Значения фильтров.
category	`CategoryModel`	Выбранная категория.
categories	`CategoryModel[]`	Список всех категорий.
on‑submit	`(value: Record<string, unknown>) => void`	Метод обновления значений фильтров.

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


<ya-kit-products-listing-controller as="controller">
    <ya-kit-products-filters
        class="custom-class"
        schema={{controller.model.filters.schema}}
        values={{controller.model.filters.values}}
        values={{controller.model.filters.values}}
        category={{controller.model.categories.selected}}
        categories={{controller.model.categories.items}}
        on-submit={{controller.onFiltersChange}}
    />
</ya-kit-products-listing-controller>

Пример внешнего вида

Связанные типы: ProductsListingModel, CategoryModel.

Связанные контроллеры: ya-kit-products-listing-controller.

`<ya-kit-product-snippet />`

Компонент для отображения стандартного сниппета товара.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
product	`ProductVariantModel`	Модель варианта товара.
quantity	`number`	Количество товара в корзине.
enable‑button	`boolean`	Включение/отключение кнопки «В корзину».
enable‑carousel	`boolean`	Включение/отключение смены фотографий при наведении.
enable‑rounding	`boolean`	Включение/отключение скруглений.
enable‑badges	`boolean`	Включение/отключение отображения бейджей.
on‑toggle‑favourite	`() => void`	Обработчик добавления/удаления товара из избранного.
on‑update‑quantity	`(quantity: number) => void`	Обработчик обновления количества товара в корзине.

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


<ya-kit-product-snippet-controller product={{model}} as="controller">
    <ya-kit-product-snippet
        class="custom-class"
        product={{model}}
        quantity={{controller.quantity}}
        on-toggle-favourite={{controller.onToggleFavourite}}
        on-update-quantity={{controller.onUpdateQuantity}}
    />
</ya-kit-product-snippet-controller>

Пример внешнего вида

Связанные типы: ProductVariantModel.

Связанные контроллеры: ya-kit-product-snippet-controller.

Обратиться в службу поддержки

Написать в чат

Написать письмо

Была ли статья полезна?

Разметка

Управление и ввод