极客教程Angular PrimeNG Galleria响应式
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常容易。在这篇文章中，我们将看到Angular PrimeNG Galleria Responsive.。
Galleria在Angular PrimeNG是一个先进的内容库组件。它用于以一种有吸引力的方式显示图片。Responsive是用来根据屏幕大小来设置缩略图中可见的图片数量。我们需要在galleria中传递responsiveOptions。
语法:
<p-galleria [responsiveOptions]="..."
[numVisible]="..."
[value]="...">
<ng-template pTemplate="item" let-item>
<img [src]="..." />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="..." />
</div>
</ng-template>
</p-galleria>
- 制作响应式选项的语法。
responsiveOptions:any[] = [
{
breakpoint: '...',
numVisible: *
}
]
创建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响应式。我们将制作一些responsiveOptions，并将其传递给Galleria组件。这个例子中只添加了一个断点。我们将看到，当屏幕较大时，3个缩略图将是可见的，而当屏幕大小变化时，缩略图的数量将根据responsiveoptions而变化。
- app.component.html:
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Responsive</h2>
<div>
<p-galleria [value]="images"
[numVisible]="3"
[responsiveOptions]="responsiveOptions">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="item.thumbnailImageSrc"
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: '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'
},
];
responsiveOptions: any[] = [
{
breakpoint: '768px',
numVisible: 2
},
];
}
- 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：在这个例子中，我们将制作一些更多的responsiveOptions，这些选项将被传递给Galleria组件。在这里，我们加入了多个断点。
- app.component.html:
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Responsive</h2>
<div>
<p-galleria [value]="images"
[numVisible]="3"
[responsiveOptions]="responsiveOptions">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="item.thumbnailImageSrc"
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: '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'
},
];
responsiveOptions: any[] = [
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
];
}
- 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 { }
输出:
