Свойства 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
HTML
< div id = "GFG" > < h1 style = "color:green;" >GeeksforGeeks</ h1 > < h2 >Angular PrimeNG Galleria Properties</ h2 > < div style = "width:60%; " > < p-galleria [value]="images" [numVisible]="3" [showThumbnails]="true" [circular]="true" [autoPlay]="true"> < ng-template pTemplate = "item" let-item> < img [src]="item.previewImageSrc" style = "width: 80%;" /> </ ng-template > < ng-template pTemplate = "thumbnail" let-item> < div class="grid grid-nogutter justify-content-center"> < img [src]="item.thumbnailImageSrc" width = 80 % /> </ div > </ ng-template > </ p-galleria > </ div > </ div > |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ] }) export class AppComponent { title = "GFG" ; images: any[] = [ { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 1" , title: "Title 1" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 2" , title: "Title 2" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 3" , title: "Title 3" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 4" , title: "Title 4" }, ]; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { GalleriaModule } from "primeng/galleria" ; import { AppComponent } from "./app.component" ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, GalleriaModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Пример 2. В этом примере мы узнаем о свойствах Galleria, таких как значения, showIndicators, IndicatorPosition, autoplay, circular, thumbnailsPosition, IndicatorPosition.
app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >Angular PrimeNG Galleria Properties</ h2 > < div style = "width:60%; " > < p-galleria [value]="images" [numVisible]="3" [showThumbnails]="true" [circular]="true" [autoPlay]="true" thumbnailsPosition = "top" [showIndicators]="true" indicatorsPosition = "top" > < ng-template pTemplate = "item" let-item> < img [src]="item.previewImageSrc" style = "width: 80%;" /> </ ng-template > < ng-template pTemplate = "thumbnail" let-item> < div class = "grid grid-nogutter justify-content-center" > < img [src]="item.thumbnailImageSrc" width = 80 % /> </ div > </ ng-template > </ p-galleria > </ div > </ div > |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ] }) export class AppComponent { title = "GFG" ; images: any[] = [ { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 1" , title: "Title 1" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 2" , title: "Title 2" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 3" , title: "Title 3" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 4" , title: "Title 4" }, ]; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { GalleriaModule } from "primeng/galleria" ; import { AppComponent } from "./app.component" ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, GalleriaModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: http://primefaces.org/primeng/galleria