Свойства Angular PrimeNG Galleria

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент Angular PrimeNG Galleria.

Angular PrimeNG Galleria — это расширенный компонент галереи контента. Он используется для отображения изображений в привлекательной форме. Давайте узнаем об этом на нескольких примерах.

Свойства компонента Angular PrimeNG Galleria:

• id: это уникальный идентификатор элемента. Это строка типа, а значение по умолчанию равно null.
• value: это массив отображаемых объектов. Значение по умолчанию равно нулю.
• activeIndex: это индекс первого отображаемого элемента. Он имеет числовой тип и значение по умолчанию равно 0.
• fullScreen: это логическое свойство, которое указывает, отображать ли компонент в полноэкранном режиме. Значение по умолчанию неверно.
• visible: это логическое свойство, которое указывает, отображать ли маску, когда компонент находится в полноэкранном режиме. Значение по умолчанию неверно.
• numVisible: указывает количество видимых элементов на странице. Это номер типа, и значение по умолчанию равно 3.
• ResponseOptions: это массив частей для компонента галереи, чтобы сделать его отзывчивым.
• showItemNavigators: это логическое свойство указывает, следует ли отображать кнопки навигации в контейнере предварительного просмотра. Значение по умолчанию неверно.
• showThumbnailNavigators: это логическое свойство указывает, следует ли отображать кнопки навигации в контейнере эскизов. Значение по умолчанию верно.
• showItemNavigatorsOnHover: это логическое свойство указывает, следует ли отображать кнопки навигации, когда контейнер предварительного просмотра находится в состоянии наведения. Значение по умолчанию неверно
• changeItemOnIndicatorHover: если для этого свойства задано значение true, элемент предварительного просмотра изменяется, когда пользователь наводит указатель мыши на элемент индикатора. Значение по умолчанию неверно.
• круговой: это свойство определяет, будет ли прокрутка в компоненте галереи бесконечной. Значение по умолчанию неверно.
• autoPlay: если для этого свойства установлено значение true, элементы галереи будут отображаться в виде слайд-шоу. Значение по умолчанию неверно.
• transitionInterval: Время в миллисекундах для прокрутки элемента. Это номер типа, значение по умолчанию — 4000.
• showThumbnails: это свойство определяет, показывать ли контейнер эскизов компонента галереи. Значение по умолчанию верно.
• thumbnailsPosition: это свойство указывает место для отображения контейнера миниатюр. Допустимые значения: «нижний», «верхний», «левый» и «правый», а значение по умолчанию — «нижний».
• verticalThumbnailViewPortHeight: указывает высоту области просмотра в вертикальной миниатюре. Он принимает строковые значения, а значение по умолчанию — 300 пикселей.
• showIndicators: это логическое свойство определяет, показывать ли контейнер индикатора. Значение по умолчанию неверно.
• showIndicatorsOnItem: если для этого свойства задано значение true, контейнер индикатора отображается в контейнере предварительного просмотра. Значение по умолчанию неверно.
• IndicatorPosition: это свойство определяет положение контейнера индикатора. Допустимые значения: «нижний», «верхний», «левый» и «правый». Значение по умолчанию — «внизу».
• baseZIndex: это базовое значение свойства zIndex, используемого в многоуровневом режиме. Он имеет числовой тип и значение по умолчанию равно 0.
• maskClass: это класс Style маски в полноэкранном режиме. Значение по умолчанию равно нулю.
• containerStyle: встроенный стиль компонента в полноэкранном режиме. Значение по умолчанию равно нулю.
• galleriaClass: это класс Style компонента в полноэкранном режиме. Значение по умолчанию равно нулю.
• showTransitionOptions: параметры перехода анимации шоу. Это строковый тип, а значение по умолчанию — 150 мс кубического безье (0, 0, 0,2, 1).
• hideTransitionOptions: параметры перехода анимации скрытия. Это строковый тип, а значение по умолчанию — 150 мс кубического безье (0, 0, 0,2, 1).

Синтаксис:

<p-galleria [numVisible]="..." [value]="...">
   <ng-template pTemplate="item" let-item>
       <img [src]="..." [alt]="..." [title]="..." 
           style="width: 50%;" />
   </ng-template>
   <ng-template pTemplate="thumbnail" let-item width="50%">
       <div class="grid grid-nogutter justify-content-center">
           <img [src]="..." [alt]="..." [title]="..." width=80% />
       </div>
   </ng-template>
</p-galleria>

Создание приложения Angular и установка модуля:

Шаг 1: Установите Angular CLI

npm install - g @angular/cli

Шаг 2 : Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 3: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 4: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта будет выглядеть следующим образом:

Пример 1. В этом примере мы узнаем о свойствах Galleria, таких как значения, numVisible, автовоспроизведение, круговой, showThumbnails.

app.component.html

app.component.ts

app.module.ts

Выход:

Пример 2. В этом примере мы узнаем о свойствах Galleria, таких как значения, showIndicators, IndicatorPosition, autoplay, circular, thumbnailsPosition, IndicatorPosition.

app.component.html

app.component.ts

app.module.ts

Выход:

Ссылка: http://primefaces.org/primeng/galleria