Разметка
<ya-kit-accordion />
Элемент для отображения аккордеона.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
default-expanded |
|
Первоначальное состояние. По-умолчанию |
Пример использования
<ya-kit-accordion>
<ya-kit-accordion-header>
<ya-kit-text size="md" weight="bold">Заголовок</ya-kit-text>
</ya-kit-accordion-header>
<ya-kit-accordion-body>
<ya-kit-text as="p">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</ya-kit-text>
</ya-kit-accordion-body>
</ya-kit-accordion>
Пример внешнего вида
<ya-kit-carousel />
Элемент для отображения каруселей.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
count |
|
Количество элементов. |
|
columns |
|
Количество элементов в ряду. По умолчанию — |
|
columns-touch |
|
Количество карточек в ряду на мобильных устройствах. По умолчанию — |
|
h-gap |
|
Отступ между столбцами. |
|
autoplay |
|
Включение/отключение автопролистывания. По умолчанию — |
|
autoplay-delay |
|
Интервал автопролистывания в мс. По умолчанию — |
|
controls-alignment |
|
Расположение элементов управления. |
|
controls-size |
|
Размер элементов управления. |
Пример внешнего вида
<ya-kit-h-stack /> / <ya-kit-v-stack />
Вспомогательный элемент для отображения горизонтальных/вертикальных списков элементов.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
flex-wrap |
|
Правило вывода элементов в одну или в несколько строк. |
|
justify-content |
|
Выравнивание элементов вдоль главной оси. |
|
align-items |
|
Выравнивание элементов перпендикулярно главной оси. |
|
gap |
|
Отступ между элементами. |
Пример внешнего вида
|
|
|
|
|
|
<ya-kit-grid />
Элемент подходит для шаблонов с известным количеством столбцов. Можно настроить разное количество столбцов для разных устройств.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
count |
|
Количество дочерних элементов. |
|
columns |
|
Количество элементов в ряду. По умолчанию — |
|
columns-touch |
|
Количество карточек в ряду на мобильных устройствах. По умолчанию — |
|
h-gap |
|
Отступ между столбцами. |
|
v-gap |
|
Отступ между рядами. |
Пример внешнего вида
<ya-kit-module />
Компонент-обертка для модулей Yandex KIT, предоставляющий контекст модуля для дочерних компонентов.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
module-id |
|
Уникальный идентификатор модуля. |
Пример использования
{{#each settings.modules as |module|}}
<ya-kit-module module-id={{module.id}}>
<div>Module content</div>
</ya-kit-module>
{{/each}}
<ya-kit-parallax />
Компонент для создания parallax-эффекта.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS‑классы для стилизации. |
|
speed |
|
Коэффициент скорости параллакс‑эффекта, который определяет, насколько быстро элемент движется относительно прокрутки страницы. |
<ya-kit-section-layout />
Элемент-обертка для секций. Управляет отступами секции и цветовой схемой.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизаци. |
|
background |
|
Цвет фона всей секции. |
|
palette |
|
Цветовая схема. |
|
is-fullscreen |
|
Растянуть секцию на весь экран. |
|
v-gap |
|
Отступ между строками. По умолчанию — |
|
h-padding-desktop |
|
Отступ по краям на десктопе. |
|
h-padding-mobile |
|
Отступ по краям на мобильных устройствах. |
|
padding-top |
|
Отступ над секцией. Модификатор значения берется из глобальных настроек. |
|
padding-bottom |
|
Отступ под секцией. Модификатор значения берется из глобальных настроек. |
<ya-kit-section-layout-row />
Базовый элемент-обертка для строк внутри секций. Управляет отступами по краям в зависимости от выставленных атрибутов в <ya-kit-section-layout />.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
is-sticky |
|
Включение/отключение залипания элемента. |
Пример использования
<ya-kit-section-layout background="none" is-fullscreen>
<ya-kit-section-layout-row>
<ya-kit-section-title text="{{settings.sectionTitle}}" />
</ya-kit-section-layout-row>
<ya-kit-section-layout-row>
<!-- Шаблон секции здесь -->
</ya-kit-section-layout-row>
</ya-kit-section-layout>
<ya-kit-section-title />
Базовый элемент для отображения заголовка секции. В отличие от <ya-kit-text /> выставляет значения в зависимости от выставленных атрибутов в <ya-kit-section-layout /> и глобальных настроек.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
as |
|
Тег секции |
|
text |
|
Заголовок секции. |
|
to |
|
Ссылка. |
Пример использования
<ya-kit-section-layout background="none" is-fullscreen>
<ya-kit-section-layout-row>
<ya-kit-section-title text="{{settings.sectionTitle}}" />
</ya-kit-section-layout-row>
<ya-kit-section-layout-row>
<!-- Шаблон секции здесь -->
</ya-kit-section-layout-row>
</ya-kit-section-layout>
<ya-kit-sticky />
Вспомогательный элемент для отображения плавающих элементов.
Важно
Для корректной работы плавающих элементов внутри <ya-kit-section-layout /> необходимо переопределить свойство overflow-x, которое по умолчанию установлено в значение hidden, чтобы отключить горизонтально переполнение.
Свойства элемента
|
Свойство |
Тип |
Описание |
|
class |
|
Дополнительные CSS-классы для стилизации. |
|
scope |
|
Определяет область в рамках которой активен плавающий элемент:
|
|
is-sticky |
|
Включение/отключению залипания элемента. |