极客教程Angular PrimeNG Galleria造型
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG Galleria的风格设计。
Galleria是一个先进的内容库组件。它用于以一种有吸引力的方式显示图片。Galleria组件允许我们使用几个预定义的类对其进行自定义样式设计。这些类可以用来为Galleria组件设置页眉、页脚、标题等。
Angular PrimeNG Galleria造型：
- p-galleria。它是一个元素的容器。
- p-galleria-header。它用于定义页眉部分。
- p-galleria-footer。它用于定义页脚部分。
- p-galleria-item-wrapper。它用于显示内容元素的预览，它包含预览和指示器容器。
- p-galleria-item-container。它用于定义预览内容的容器，它包含导航按钮、预览项目和标题内容。
- p-galleria-indicators。它用于定义指标的容器，其中包含指标项目。
- p-galleria-thumbnail-wrapper。它用于定义内容元素的缩略图。
- p-galleria-thumbnail-container。它用于定义缩略图内容的容器，它包含导航按钮和缩略图项目。
- p-galleria-caption。它定义了预览标题的内容。
创建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：本示例通过实现Galleria的页眉、页脚和指示器，说明了Angular PrimeNG中Galleria样式的基本用法。
- app.component.html:
<div id="GFG">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Angular PrimeNG Galleria Styling</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: 'Description for Image 1',
title: 'Title 1'
},
{
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: 'Description for Image 2',
title: 'Title 2'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
alt: 'Description for Image 3',
title: 'Title 3'
},
{
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: 'Description for Image 4',
title: 'Title 4'
},
];
}
- 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：这个例子描述了Angular PrimeNG中的Galleria样式，我们将利用Galleria的标题和标题。
- app.component.html:
<div id="GFG">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Angular PrimeNG Galleria Styling</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: 'my-app',
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 Sheets',
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 { }
输出:
