极客教程Angular PrimeNG Galleria组件
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架可用于制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Galleria组件。
Angular PrimeNG Galleria是一个先进的内容库组件。它用于以一种有吸引力的方式显示图片。让我们通过一些例子来了解一下。
Angular PrimeNG Galleria组件属性：
- id。它是该元素的唯一ID。它的类型是字符串，默认值是空。
- value。它是要显示的对象的数组。默认值为空
- activeIndex。它是第一个要显示的项目的索引。它的类型是数字，默认值是0。
- fullScreen。这是一个布尔属性，告诉人们是否在全屏上显示该组件。默认值是false。
- visible。这是一个布尔属性，指定在组件全屏时是否显示遮罩。默认值是false。
- numVisible。它告诉每页可见的项目数量。它的类型是数字，默认值是3。
- responsiveOptions。它是一个数组，用于使galleria组件响应的部分。
- showItemNavigators:这个布尔属性告诉我们是否要在预览容器中显示导航按钮。默认值是false。
- showThumbnailNavigators:这个布尔属性告诉我们是否要在缩略图容器中显示导航按钮。默认值为true。
- showItemNavigatorsOnHover:这个布尔属性告诉我们当预览容器处于悬停状态时是否显示导航按钮。默认值为false。
- changeItemOnIndicatorHover。当这个属性被设置为 “true “时，当用户悬停指示器元素时，预览项目会被改变。默认值是false。
- circular。这个属性定义了在galleria组件中的滚动是否会是无限的。默认值是false。
- autoPlay: 如果这个属性被设置为 “true”，画廊的项目将以幻灯片形式显示。默认值是false。
- transitionInterval。它是滚动一个项目的时间，单位是毫秒。它的类型是数字，默认值是4000。
- showThumbnails:这个属性定义了是否显示galleria组件的缩略图容器。默认值为true。
- thumbnailsPosition。这个属性告诉显示缩略图容器的位置。接受的值是 “底部”、”顶部”、”左侧 “和 “右侧”，默认值是 “底部”。
- verticalThumbnailViewPortHeight。这告诉了垂直缩略图中视口的高度。它接受字符串值，默认值是300px。
- showIndicators:这个布尔属性定义了是否要显示指标容器。默认值为false。
- showIndicatorsOnItem。当此属性被设置为 “true “时，指标容器将显示在预览容器上。默认值为false。
- indicatorsPosition。该属性定义了指标容器的位置。接受的值是 “底部”、”顶部”、”左侧 “和 “右侧”。默认值是 “底部”。
- baseZIndex。它是用于分层的zIndex属性的基础值。它的类型是数字，默认值是0。
- maskClass。它是全屏模式下遮罩的样式类。默认值为空。
- containerStyle。它是全屏模式下组件的内嵌样式。默认值为空。
- galleriaClass : 它是全屏模式下组件的风格类。默认值为空。
- showTransitionOptions。显示动画的过渡选项。它的类型是字符串，默认值是150ms cubic-bezier(0, 0, 0.2, 1)。
- hideTransitionOptions。隐藏动画的过渡选项。类型为字符串，默认值为150ms cubic-bezier（0, 0, 0.2, 1）。
语法:
<p-galleria [numVisible]="..." [value]="...">
<ng-template pTemplate="item" let-item>
<img [src]="..." [alt]="..." [title]="..." style="width: 50%;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item width="50%">
<div class="grid grid-nogutter justify-content-center">
<img [src]="..." [alt]="..." [title]="..." width=80% />
</div>
</ng-template>
</p-galleria>
创建Angular应用程序和模块安装。
第1步：安装Angular CLI
npm install - g @angular/cli
第2步：使用以下命令创建一个Angular应用程序。
ng new appname
第3步：在创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第4步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将看起来像以下图片。
Project Structure
例子1：在这个例子中，我们将学习Galleria组件。我们将使用URL获取图片，并在galleria组件中显示它们。
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Component</h2>
<div style="width:80%; background-color: black; ">
<p-galleria
[numVisible]="3"
[value]="images">
<ng-template pTemplate="item" let-item>
<img
[src]="item.previewImageSrc"
[alt]="item.alt"
[title]="item.title"
style="width: 50%;"
/>
</ng-template>
<ng-template pTemplate="thumbnail" let-item width="50%">
<div class="grid grid-nogutter justify-content-center">
<img
[src]="item.thumbnailImageSrc"
[alt]="item.alt"
[title]="item.title"
width=80%
/>
</div>
</ng-template>
</p-galleria>
</div>
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'
},
];
}
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组件中可见的项目数量。
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Component</h2>
<div style="width:80%; background-color: black;">
<p-galleria [numVisible]="2" [value]="images">
<ng-template pTemplate="item" let-item>
<img
[src]="item.previewImageSrc"
[alt]="item.alt"
[title]="item.title"
style="width: 50%;"
/>
</ng-template>
<ng-template pTemplate="thumbnail" let-item width="50%">
<div class="grid grid-nogutter justify-content-center">
<img
[src]="item.thumbnailImageSrc"
[alt]="item.alt"
[title]="item.title"
width=80% />
</div>
</ng-template>
</p-galleria>
</div>
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'
},
];
}
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 { }
输出:
