---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/components/data-display.md
  - href: https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/components/data-display.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010



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

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

## `<ya-kit-grouping-characteristic />` {#characteristic}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример использования" %}

```handlebars
<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>
```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/harakteristika-1.png =500x)

![](../../../../_images/harakteristika-2.png =500x)

![](../../../../_images/harakteristika-3.png =500x)

{% endcut %}

Связанные модели: [ProductSizeTableModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#table-model), [GroupingCharacteristicModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#CharacteristicModel).


## `<ya-kit-gift-slots />` {#gift-slots}

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

{% cut "Свойства элемента" %}

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

Обязательное: Привяжите к обработчику, который активирует слот — `updateGift` контроллера корзины (по умолчанию при открытии дровера выбора).

{% note info %}

Не путайте с `onSelectGift(variantId)` — эта функция выбирает вариант внутри активного подарка.

{% endnote %} 
||
|#

{% endcut %}

{% cut "Пример использования" %}

```handlebars
<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>
```

{% endcut %}

Связанные модели: [GiftSlot](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#giftslot).

## `<ya-kit-gift-progress-bar />` {#gift-progress-bar}

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

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

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

{% note info %}

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

{% endnote %}

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример использования" %}

```handlebars
<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>
```
{% endcut %}

Связанные модели: [GiftSlot](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#giftslot).

Связанные контроллеры: [ya-kit-gift-slot-controller](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/controllers.md#gift-slot-controller), [ya-kit-shopping-cart-controller](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/controllers.md#cart-controller).


## `<ya-kit-markdown />` {#markdown}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

## `<ya-kit-prices />` {#prices}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример внешнего вида" %}

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

{% endcut %}

## `<ya-kit-product-feedback-overview />` {#feedback-overview}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример использования" %}

```handlebars
<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>
```

{% endcut %}

Связанные модели: [FeedbackShortMetaModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#feedback-short-meta-model).

Связанные контроллеры: [ya-kit-product-feedback-listing-controller](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/controllers.md#feedback-listing-controller).


## `<ya-kit-product-feedback-summary />` {#feedback-summary}

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

{% cut "Свойства элемента" %}

#|
||

**Свойство**

|

**Тип**

|

**Описание**

||
||

**title**

|

`string`

|

Заголовок блока.

||
||

**summary**

|

`string`

|

Текст саммари отзывов.

||
||

**class**

|

`string`

|

Дополнительные CSS-классы для стилизации.

||
||

**url**

|

`string`

|

URL страницы всех отзывов. Если значение передано, отображается кнопка перехода.

||
||

**is-collapsible**

|

`boolean`

|

Сворачивать длинное саммари до пяти строк. По умолчанию: `true`.

||
|#

{% endcut %}

{% cut "Пример использования" %}

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

{% endcut %}

Связанные модели: [FeedbackShortMetaModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#feedback-short-meta-model).

## `<ya-kit-products-filters />` {#filters}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример использования" %}

```handlebars

<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>

```

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/products_filters.png =x500)

{% endcut %}

Связанные модели: [ProductsListingModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#products-listing), [CategoryModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#category).

Связанные контроллеры: [ya-kit-products-listing-controller](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/controllers.md#listing-controller).

## `<ya-kit-product-snippet />` {#snippet}

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

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **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` | Обработчик обновления количества товара в корзине. ||
|#

{% endcut %}

{% cut "Пример использования" %}

```handlebars

<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>

```
{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/product-snippet.png =x300) 
![](../../../../_images/product-snippet-1.png =x300) 
![](../../../../_images/product-snippet-2.png =x300) 
![](../../../../_images/product-snippet-3.png =x300)

{% endcut %}

Связанные модели: [ProductVariantModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#product-variant).

Связанные контроллеры: [ya-kit-product-snippet-controller](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/controllers.md#snippet-controller).


## `<ya-kit-products-sorting />` {#products-sorting}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример использования" %}

```Handlebars 
<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>

```
{% endcut %}

Связанные модели: [ProductSortingOptionModel](https://yandex.ru/support/kit/ru/site-editor/custom-sections/utilities/data.md#sorting-model).

Связанные контроллеры: [ya-kit-products-listing-controller](https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/controllers.md#listing-controller).

## `<ya-kit-rating-stars />` {#rating-stars}

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

{% cut "Свойства элемента" %}

#|
||

**Свойство**

|

**Тип**

|

**Описание**

||
||

**value**

|

`number`

|

Значение рейтинга от 0 до 5

||
||

**class**

|

`string`

|

Дополнительные CSS-классы для стилизации

||
|#


{% endcut %}

{% cut "Пример использования" %}

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

{% endcut %}

## `<yandex-pay-badge-discount />` {#discount}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/yandex-pay-badge-discount.png =x25)

{% endcut %}

## `<yandex-pay-badge-split />` {#split}

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

{% cut "Свойства элемента" %}

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

{% endcut %}

{% cut "Пример внешнего вида" %}

![](../../../../_images/yandex-pay-badge-split.png =x150)

{% endcut %}


## `<ya-kit-text />` {#text}

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

{% cut "Свойства элемента" %}

#|
|| **Свойство** | **Тип** | **Описание** ||
|| **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` | Количество строк текста. ||
|#

{% endcut %}

<!-- source: ru/_includes/support.md -->


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


[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}

[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}

[Яндекс KITᵝ в Telegram](https://t.me/kityandex_support_bot){.button}

[Яндекс KITᵝ в МАКС](https://max.ru/yandex_kit_bot){.button}
<!-- endsource: ru/_includes/support.md -->