Документация

С чего начать

Подключите модуль:

import { GalleriaModule } from 'primeng/galleria';

Встройте компонент с помощью тегаp-galleria.

Полностью работоспособный пример смотрите ниже.

Пример

<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
  <ng-template pTemplate="item" let-item>
    <img [src]="item.previewImageSrc" style="width: 100%" />
  </ng-template>
  <ng-template pTemplate="thumbnail" let-item>
    <div class="p-grid p-nogutter p-justify-center">
      <img [src]="item.thumbnailImageSrc" />
    </div>
  </ng-template>
</p-galleria>

Количество элементов в галерее

Количество элементов на странице определяется с помощью свойстваnumVisible, например, в нашем случае:[numVisible]="5".

Адаптив

Для адаптивного отображения количества элементов в галерее его можно определить с помощью свойстваresponsiveOptions, которое должно представлять собой массив объектов, брейкпоинты которых определяют максимальную ширину для применения настроек.

responsiveOptions: any[] = [
  {
    breakpoint: '1024px',
    numVisible: 5,
  },
  {
    breakpoint: '768px',
    numVisible: 3,
  },
  {
    breakpoint: '560px',
    numVisible: 1,
  },
];

Header и Footer

Доступно добавление пользовательского контента с помощью свойств верхнего и нижнего колонтитулов.

Header

Footer

Индикаторы

Индикаторы позволяют быстро перемещаться между элементами. Установите параметрshowIndicatorsдля отображения индикаторов, которые можно дополнительно настроить с помощью свойствchangeItemOnIndicatorHover,showIndicatorsOnItemиindicatorsPosition.

Свойства

Шаблоны

Стилизация