Медиа

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

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

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

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

Свойство

Тип

Описание

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

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

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

Свойство

Тип

Описание

class

string

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

src

string, VideoModel

URL или модель видео.

fit

contain, cover, auto

Определяет, как содержимое вписывается в контейнер по ширине и высоте:

contain — содержимое уменьшается и увеличивается так, чтобы поместиться внутри блока пропорционально;

cover — содержимое растягивается, чтобы заполнить весь блок целиком, сохраняя пропорции (часть может обрезаться);

auto — автоматически выбирает подходящий вариант в зависимости от изображения.

aspect-ratio

3:4, 1:1, 4:3, 2:1, 5:2, 5:1

Соотношение сторон для контейнера.

volume

number

Громкость.

is-autoplay

boolean

Автоматическое воспроизведение. По умолчанию — false.

is-muted

boolean

Отключение звука. По умолчанию — true.

is-loop

boolean

Зацикливание видео. По умолчанию — false.

is-skinless

boolean

Отключение скина плеера. По умолчанию — false.

<ya-kit-parallax />

Компонент для создания parallax-эффекта.

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

Свойство

Тип

Описание

class

string

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

speed

number

Коэффициент скорости параллакс‑эффекта, который определяет, насколько быстро элемент движется относительно прокрутки страницы.

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

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

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

Предыдущая
Макет
Следующая
Навигация