Свойства Angular PrimeNG Galleria

Опубликовано: 23 Февраля, 2023

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