Angular PrimeNG Galleria Navigator

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

Galleria是一个先进的组件，以一种有吸引力的方式显示图片。导航器用于导航到galleria组件的其他项目。通过将导航器与缩略图和项目指示器相结合，我们可以为galleria组件实现许多不同的布局。

Angular PrimeNG Galleria Navigator属性：

showItemNavigators :该属性用于启用/禁用galleria组件中的项目导航器。
showItemNavigatorsOnHover : 如果这个属性被设置为 “true”，那么只有当我们在项目上悬停时才会显示项目导航器。
numVisible。它用于告诉一个页面上可见的缩略图的数量。
showIndicators:该属性用于启用/禁用galleria组件的指标。
showIndicatorsOnItem：如果这个布尔属性被设置为 “true”，指标将被显示在内容中。

还有一些其他的导航仪模板可以与Galleria一起使用，下面将介绍这些模板。

item。项目模板是用来定义一个单一的galleria项目的结构。
thumbnail。缩略图模板用于定义一个画廊项目的缩略图的结构。

语法:

<p-galleria [value]="img" 
            [numVisible]="3" 
            [showItemNavigators]="true">
    <ng-template pTemplate="item" let-img>
        ...
    </ng-template>
    <ng-template pTemplate="thumbnail" let-img>
        ...
    </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 Navigator

Project Structure

例子1：这个例子说明了使用带有项目导航器的galleria组件，没有缩略图，通过设置showItemNavigatorsOnHover属性为true，导航器只有在我们悬停在内容上时才会显示。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Navigator</h3>
  
<h4>
    Item Navigator with thumbnail
    and Visible on Hover
</h4>
  
<p-galleria [value]="img" 
            [containerStyle]="{'max-width': '500px'}" 
            [numVisible]="3" 
            [showItemNavigators]="true"
    [showItemNavigatorsOnHover]="true">
  
    <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>

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[] = [];
  
    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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Galleria Navigator

例子2：在这个例子中，showItemNavigators属性被设置为true以显示导航器。此外，我们将showIndicators属性设置为true以显示指示器，将showThumbnail属性设置为false以隐藏缩略图。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Navigator</h3>
  
<h4>
    Item Navigator without thumbnail
    and With Indicators
</h4>
  
<p-galleria [value]="img" 
            [containerStyle]="{'max-width': '500px'}" 
            [numVisible]="3" 
            [showIndicators]="true"
            [showIndicatorsOnItem]="true" 
            [showThumbnails]="false" 
            [showItemNavigators]="true">
  
    <ng-template pTemplate="item" let-img>
        <img [src]="img.URL" 
             style="width: 100%; 
                    display: block;" />
    </ng-template>
</p-galleria>

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[] = [];
  
    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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Galleria Navigator