Angular PrimeNG Galleria FullScreen

Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中，我们将看到Angular PrimeNG Galleria FullScreen。

Galleria是一个先进的组件，以吸引人的方式显示图片。当galleria组件处于全屏模式时，一个淡黑色的遮罩覆盖整个页面，内容在该遮罩上显示。

Angular PrimeNG Galleria FullScreen属性：

value。这个属性接受一个用于显示画廊项目的对象数组。
autoPlay：如果这个属性被设置为 “true”，那么galleria组件的项目将以幻灯片形式显示。
transitionInterval。这是一个接受毫秒的属性，项目将在自动播放模式下显示。
showThumbnails:如果这个布尔属性被设置为 “true”，项目的缩略图将不会被显示。
visible。这个布尔属性指定galleria组件是否以全屏方式打开。
fullScreen。该属性用于启用galleria组件的全屏模式。

语法:

<p-galleria 
    [value]="..." 
    [fullScreen]="..."
    [(visible)]="...">

    <ng-template pTemplate="item" let-x>
        ...
    </ng-template>
</p-galleria>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步在你给定的目录中安装PrimeNG。

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG Galleria FullScreen

Project Structure

例子1：这是一个基本的例子，展示了如何在全屏下用缩略图显示galleria组件。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria FullScreen</h3>
  
<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}"
    [fullScreen]="true"
    [(visible)]="isVisible">
  
    <ng-template pTemplate="item" let-img>
        <img 
            [src]="img.URL" 
            style="width: 100%; display: block;" />
    </ng-template>
  
    <ng-template pTemplate="thumbnail" let-img>
        <img 
            [src]="img.URL" 
            style="width: 100px; display: block;" />
    </ng-template>
</p-galleria>
  
<p-button 
    label="Show FullScreen" 
    (click)="isVisible = true">
</p-button>

app.component.ts:

import { Component } from '@angular/core';
  
interface GalleriaImage {
    URL: String;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    img: GalleriaImage[] = [];
    isVisible = false;
  
    ngOnInit() {
        this.img = [
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png',
            },
        ];
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GalleriaModule } from 'primeng/galleria';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Galleria FullScreen

实例2：这是一个基本的例子，展示了如何在全屏下显示galleria组件，没有缩略图，并开启自动播放。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria FullScreen</h3>
  
<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}"
    [fullScreen]="true"
    [autoPlay]="true"
    [transitionInterval]="1500"
    [showThumbnails]="false"
    [(visible)]="isVisible">
  
    <ng-template pTemplate="item" let-img>
        <img 
            [src]="img.URL" 
            style="width: 100%; display: block;" />
    </ng-template>
</p-galleria>
  
<p-button 
    label="Show FullScreen" 
    (click)="isVisible = true">
</p-button>

app.component.ts:

import { Component } from '@angular/core';
  
interface GalleriaImage {
    URL: String;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {
    img: GalleriaImage[] = [];
    isVisible = false;
  
    ngOnInit() {
        this.img = [
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif"
            },
            {
                URL: 
 "https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png"
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png"
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png"
            }
        ];
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GalleriaModule } from 'primeng/galleria';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Galleria FullScreen