Отображение данных

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

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

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

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

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
characteristic	`GroupingCharacteristicModel`	Модель характеристики товара с доступными значениями и текущим выбором.
is-сollapsable	`boolean`	Определяет, можно ли свернуть список опций.
size-table	`ProductSizeTableModel`	Модель с таблицей размеров.
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>

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

Связанные модели: ProductSizeTableModel, GroupingCharacteristicModel.

`<ya-kit-gift-slots />`

Готовый блок для отображения прогресс‑баров подарков <ya-kit-gift-progress-bar />. Анимирует появление, удаление и переупорядочивание слотов. Достаточно передать массив слотов — собирать цикл вручную не требуется. Если массив пуст, компонент ничего не отобразит.

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

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
slots	`GiftSlot[]`	Массив слотов подарков (например, `giftSlots` контроллера корзины). По умолчанию — пустой массив.
on‑select‑gift‑slot	`(giftId: string) => void`	Callback‑функция, вызываемая при нажатии Выбрать на разблокированном слоте. Получает `giftId` слота. Обязательное: Привяжите к обработчику, который активирует слот — `updateGift` контроллера корзины (по умолчанию при открытии дровера выбора). Примечание Не путайте с `onSelectGift(variantId)` — эта функция выбирает вариант внутри активного подарка.

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

<ya-kit-shopping-cart-controller as="controller">
	<ya-kit-toggle-controller as="toggleController">
		<ya-kit-gift-slots
			slots={{controller.giftSlots}}
			on-select-gift-slot={{compo	se controller.updateGift toggleController.onSetTruthy}}
		/>

      	<ya-kit-drawer is-open="{{toggleController.isOpen}}" on-close={{toggleController.onSetFalsy}}>
          	<ya-kit-gifts-controller as="giftsController">
              	{{! ...список вариантов выбранного подарка... }}
          	</ya-kit-gifts-controller>
      	</ya-kit-drawer>
  	</ya-kit-toggle-controller>
</ya-kit-shopping-cart-controller>

Связанные модели: GiftSlot.

`<ya-kit-gift-progress-bar />`

Презентационный компонент одного прогресс‑бара подарка. Включает в себя:

иконку‑бейдж со счетчиком;
подпись (остаток до подарка или приглашение выбрать);
полосу заполнения.

Готовое отображение для одного слота — по умолчанию данные берутся из giftSlots контроллера корзины.

Примечание

При переходе свойства is‑available из false в true компонент проигрывает короткую анимацию «салют» (около 2 секунд).

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

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
progress	`number`	Заполненность бара, доля от 0 до 1. Обязательное свойство. Если используете `GiftSlot.progress` (диапазон 0–100), разделите значение на 100.
remaining	`number`	Остаток стоимости корзины до разблокировки подарка (в рублях). Обязательное свойство.
is‑available	`boolean`	Указывает, разблокирован ли подарок (достигнут порог). При `true` показывается приглашение и кнопка Выбрать. По умолчанию — `false`.
current	`number`	Позиция текущего подарка в счетчике (например, 2/3).
total	`number`	Общее число подарков. Счетчик отображается только при `total > 1` (в противном случае скрыт).
on‑select	`() => void`	Обработчик нажатия на кнопку Выбрать. Кнопка отображается только при `is‑available` и заданном `on‑select`.

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

<ya-kit-shopping-cart-controller as="controller">
	{{#each controller.giftSlots as |slot|}}
		<ya-kit-gift-slot-controller slot={{slot}} as="giftSlot">
			<ya-kit-gift-progress-bar
				progress={{divide giftSlot.model.progress 100}}
				remaining={{giftSlot.model.remainingCartPrice}}
				is-available={{giftSlot.model.isAvailable}}
				current={{giftSlot.model.current}}
				total={{giftSlot.model.total}}
				on-select={{giftSlot.onSelect}}
			/>
		/ya-kit-gift-slot-controller>
	{{/each}}
</ya-kit-shopping-cart-controller>

Связанные модели: GiftSlot.

Связанные контроллеры: ya-kit-gift-slot-controller, ya-kit-shopping-cart-controller.

`<ya-kit-markdown />`

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

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

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

`<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-product-feedback-overview />`

Компонент сводной информации о рейтинге товара с распределением оценок по количеству звезд.

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

Свойство	Тип	Описание
meta	`FeedbackShortMetaModel`	Сводная информация об отзывах и рейтинге.
class	`string`	Дополнительные CSS‑классы для стилизации.

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

<ya-kit-product-feedback-listing-controller as="feedbacks">
    {{#if feedbacks.meta}}
        <ya-kit-product-feedback-overview meta={{feedbacks.meta}} />
    {{/if}}
</ya-kit-product-feedback-listing-controller>

Связанные модели: FeedbackShortMetaModel.

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

`<ya-kit-product-feedback-summary />`

Компонент нейросетевого саммари отзывов с возможностью раскрыть длинный текст и перейти на страницу всех отзывов.

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

Свойство	Тип	Описание
title	`string`	Заголовок блока.
summary	`string`	Текст саммари отзывов.
class	`string`	Дополнительные CSS-классы для стилизации.
url	`string`	URL страницы всех отзывов. Если значение передано, отображается кнопка перехода.
is-collapsible	`boolean`	Сворачивать длинное саммари до пяти строк. По умолчанию: `true`.

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

<ya-kit-product-feedback-summary
    title="Коротко об отзывах"
    summary={{feedbacks.meta.neuroSummary}}
    url={{feedbacks.meta.url}}
/>

Связанные модели: FeedbackShortMetaModel.

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

Компонент для фильтрации каталога товаров. Позволяет настраивать фильтрацию по различным параметрам (цена, бренд, характеристики и т. д.) и отправлять сформированные фильтры для обновления списка товаров.

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

Свойство	Тип	Описание
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.

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

Компонент выбора способа сортировки списка товаров. Управляет отображением доступных опций и уведомляет родительский компонент об изменении выбора.

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

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
value	`string`	Текущее значение сортировки.
options	`ProductSortingOptionModel[]`	Список доступных опций сортировки.
on‑change	`(sorting: string) => void`	Обработчик события изменения сортировки.

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

<ya-kit-products-listing-controller as="controller">
	<ya-kit-products-sorting
   value={{controller.model.sorting.option.value}}
   options={{controller.model.sorting.options}} 
   on-change={{controller.onSortingChange}}
	>
   <ya-kit-text>{{controller.model.sorting.option.displayText}}</ya-kit-text>
	</ya-kit-products-sorting>
</ya-kit-products-listing-controller>

Связанные модели: ProductSortingOptionModel.

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

`<ya-kit-rating-stars />`

Компонент для отображения числовой оценки и рейтинга в виде звезд.

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

Свойство	Тип	Описание
value	`number`	Значение рейтинга от 0 до 5
class	`string`	Дополнительные CSS-классы для стилизации

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

<ya-kit-rating-stars value={{feedbacks.meta.rating}} />

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

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

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

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

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

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

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

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

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

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

`<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`	Количество строк текста.

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

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

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

Яндекс KITᵝ в Telegram

Яндекс KITᵝ в МАКС

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

Навигация

Обратная связь и взаимодействие