极客教程Angular PrimeNG Galleria Documentaion
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG Galleria组件。
Angular PrimeNG中的Galleria是一个先进的内容库组件，可用于以一种有吸引力的方式显示图片。
导入：为了使用Galleria，我们需要在模块文件中导入以下语句。
import {GalleriaModule} from 'primeng/galleria';
语法:
<p-galleria [value]="images">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
[alt]="item.alt" />
</ng-template>
</p-galleria>
Galleria有以下组件，帮助开发内容库。
- Items per page。每页的项目数是用numVisible属性定义的。
- Responsive。这是用来根据屏幕大小来设置缩略图中可见的图片数量。我们需要在galleria中传递responsiveOptions。
- Templates。它是用来为Galleria创建不同的模板/设计的。它可以为Galleria提供页眉、页脚、标题和指标。
- Header 和Footer。Galleria组件允许我们做一个自定义的页眉和页脚属性。页眉用于在Galleria的顶部设置一些文本/属性，而页脚则用于在Galleria的底部设置文本/属性。
- Galleria Indicators。指示器允许在项目之间快速导航。设置showIndicators属性为true以显示指标。它可以通过changeItemOnIndicatorHover、showIndicatorsOnItem和indicatorsPosition属性进一步定制。
- Styling。Galleria组件允许我们使用几个预定义的类对其进行自定义样式设计。这些类可用于为Galleria组件设置页眉、页脚、标题等。
- Properties。Angular PrimeNG Galleria提供了各种属性，可以利用这些属性来制作具有更好用户体验的增强型和有吸引力的内容库。
创建Angular应用程序和模块安装。
- 安装Angular CLI
npm install - g @angular/cli
- 使用以下命令创建一个Angular应用程序。
ng new appname
- 在创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
- 在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将看起来像以下图片。
例子1：这个例子描述了Angular PrimeNG中Galleria的页眉、页脚和指标。
- app.component.html:
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Documentation</h2>
<div style="background-color: black;
width:50%;
display:block">
<p-galleria [value]="images"
[showThumbnails]="false"
[showIndicators]="true"
[circular]="true">
<ng-template pTemplate="header">
<h1 style="color:white;
text-align: center;">
GeeksforGeeks
</h1>
</ng-template>
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;
display:block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="item.thumbnailImageSrc"
style="width: 80%" />
</div>
</ng-template>
<ng-template pTemplate="footer">
<h1 style="color:white;
text-align: center;">
Anugular Footer
</h1>
</ng-template>
</p-galleria>
</div>
</div>
- app.component.ts:
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:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
alt: 'Cascading Style Sheet',
title: 'CSS',
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
alt: 'Angular for Front end',
title: 'Angular',
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
alt: 'Java Programming Language',
title: 'Java',
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
alt: 'HyperText Markup Language',
title: 'HTML',
},
];
}
- app.module.ts
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的标题和标题来描述Angular PrimeNG的Galleria文档。
- app.component.html:
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Documentation</h2>
<div style="background-color: black;
width:50%;
display:block">
<p-galleria [value]="images"
[circular]="true">
<ng-template pTemplate="header">
<h1 style="color:white;
text-align: center;">
Angular Header
</h1>
</ng-template>
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 100%;
display:block" />
</ng-template>
<br /><br />
<ng-template pTemplate="caption" let-item>
<h4 style="color: #ffffff;">
{{ item.title }}
</h4>
<p>{{ item.alt }}</p>
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="item.thumbnailImageSrc"
style="width: 80%" />
</div>
</ng-template>
</p-galleria>
</div>
</div>
- app.component.ts:
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:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
alt: 'Cascading Style Sheet',
title: 'CSS',
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
alt: 'Angular for Front end',
title: 'Angular',
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
alt: 'Java Programming Language',
title: 'Java',
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
alt: 'HyperText Markup Language',
title: 'HTML',
},
];
}
- app.module.ts
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 { }
输出:
