极客教程Angular PrimeNG Galleria指标
Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中，我们将看到Angular PrimeNG Galleria Indicator。
Galleria是一个先进的组件，以吸引人的方式显示图片。它需要一个名为item的模板和一个对象数组作为值。使用galleria组件可以提高应用程序的用户体验。Galleria指示器允许用户快速浏览galleria项目。
Angular PrimeNG Galleria指标属性：
- showIndicators:此属性用于启用/禁用指标。
- indicatorsPosition。此属性指定了指标的位置。有4个有效值。”底部”、”顶部”、”左侧 “和 “右侧”。
- showIndicatorsOnItem :此属性指定是否在项目的顶部显示指标。
- changeItemOnIndicatorHover。当该选项为真时，当用户在指标上悬停时，画廊的项目将发生变化。
- value : 此属性接受一个对象数组，以显示为galleria项目。
- numVisible : 这个属性定义了在一个页面上显示的缩略图的数量。
- showThumbnails :当这个选项为假时，将不显示画廊的缩略图。
Angular PrimeNG Galleria指标模板：
- item。项目模板用于指定一个单一的项目galleria项目的结构方式。
- indicator：该模板讲述了一个单一的指标将如何结构化。
语法:
<p-galleria [value]="img"
[showIndicators]="true"
indicatorsPosition="top">
...
</p-galleria>
创建Angular应用程序并安装模块：。
- 使用以下命令创建一个Angular应用程序。
ng new myapp
- 创建你的项目文件夹（即myapp）后，使用以下命令移动到它。
cd myapp
- 在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成上述步骤后，其结构将如下所示。
Project Structure
例子1：在这个例子中，我们将showIndicators属性设置为true，默认情况下，指标将显示在内容之外，当我们点击指标时，画廊的当前项目将改变。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Indicators</h3>
<h4>
Indicators with Click Event
and Outside the content
</h4>
<p-galleria [value]="img"
[containerStyle]="{'max-width': '500px'}"
[numVisible]="3"
[showIndicators]="true"
[showThumbnails]="false">
<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：在这个例子中，changeItemOnIndicatorHover属性被设置为true，以便当我们将鼠标悬停在指标上时，改变galleria项目，showIndicatorsOnItem属性也被设置为true，以便在内容顶部显示指标。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Indicators</h3>
<h4>
Indicators with Hover Event
and Inside the content
</h4>
<p-galleria [value]="img"
[containerStyle]="{'max-width': '500px'}"
[numVisible]="3"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
[showIndicators]="true"
[showThumbnails]="false">
<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 { }
输出:
例子3：在这个例子中，我们把indicatorsPosition属性设置为左边，以便在内容的左边显示指标，并使用指标模板来显示自定义指标。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Indicators</h3>
<h4>
Indicators with Hover Event
and on the Left of the content
</h4>
<p-galleria [value]="img"
[containerStyle]="{'max-width': '500px'}"
[numVisible]="3"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
[showIndicators]="true"
indicatorsPosition="left"
[showThumbnails]="false">
<ng-template pTemplate="item" let-img>
<img [src]="img.URL"
style="width: 100%;
display: block;" />
</ng-template>
<ng-template pTemplate="indicator" let-i>
<div style="background: white;
padding: 5px;
border-radius: 10px">
<span style="color: green;
cursor: pointer">
{{i + 1}}
</span>
</div>
</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/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 { }
输出:
