极客教程Angular PrimeNG Galleria 缩略图
Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的Angular应用程序。在这篇文章中，我们将看到Angular PrimeNG Galleria Thumbnail。
Galleria是一个先进的组件，以吸引人的方式显示图片。它需要一个名为item的模板和一个对象数组作为值。使用galleria组件可以提高应用程序的用户体验。缩略图代表了galleria项目的最小化预览。缩略图在galleria组件中可以被放置在顶部、底部、左侧或右侧，并且默认为启用。
Angular PrimeNG Galleria的缩略图属性：
- value。galleria的value属性用于提供一个对象数组，作为项目显示。默认值为空。
- showItemNavigators:该属性用于启用/禁用项目指示器的可见性。
- showThumbnails:此属性用于定义是否应显示缩略图。
- numVisible:该属性用于设置一次可见的缩略图的数量。
- thumbnailsPosition : 这个属性用来设置galleria组件的缩略图的位置。接受的值是“底部”、”顶部”、”左侧 “和 “右侧”。
语法:
<p-galleria
[value]="img"
[numVisible]="3">
<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
项目结构：完成上述步骤后，其结构将如下所示。
例子1：可以通过设置showThumbnails属性为false来禁用缩略图。这个例子显示了一个没有缩略图的galleria组件。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Thumbnail</h3>
<p-galleria
[value]="img"
[showThumbnails]="false"
[showItemNavigators]="true"
[containerStyle]="{'max-width': '500px'}">
<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 { }
输出:
实例2：本例使用galleria组件的thumbnailsPosition属性，将缩略图的位置设置为顶部**。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Thumbnail</h3>
<div class="flex gap-4">
<div>
<h3>Thumbnails at Top</h3>
<p-galleria
[value]="img"
[showItemNavigators]="true"
thumbnailsPosition="top"
[containerStyle]="{'max-width': '500px'}">
<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: 80%; display: block;"
/>
</ng-template>
</p-galleria>
</div>
<div>
<h3>Thumbnails at Bottom</h3>
<p-galleria
[value]="img"
[showItemNavigators]="true"
thumbnailsPosition="bottom"
[containerStyle]="{'max-width': '500px'}">
<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: 80%; display: block;"
/>
</ng-template>
</p-galleria>
</div>
</div>
- 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 { }
输出:
例子3：这是另一个例子，显示galleria组件的缩略图位置。它显示了画廊在右边的缩略图。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Thumbnail</h3>
<div>
<h3>Thumbnails on Right</h3>
<p-galleria
[value]="img"
[verticalThumbnailViewPortHeight]="'250px'"
[numVisible]="3"
[showItemNavigators]="true"
thumbnailsPosition="right"
style="height: 300px;">
<ng-template pTemplate="item" let-img>
<img
[src]="img.URL"
style="display: block; height: 400px"
width="400px" />
</ng-template>
<ng-template pTemplate="thumbnail" let-img>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="img.URL" height="70px"/>
</div>
</ng-template>
</p-galleria>
</div>
- 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 { }
输出:
