Angular PrimeNG Galleria字幕

Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中，我们将看到Angular PrimeNG Galleria Caption.

Galleria是一个高级组件，以吸引人的方式显示图片。标题用于显示galleria组件中某一项目的附加内容。一个项目的标题由瓦片和描述组成。

Angular PrimeNG Galleria的标题属性：

value。这个属性接受一个对象数组，以显示为galleria项目。默认值为空。
showThumbnail。该属性用于指定是否显示画廊的缩略图。
autoplay。这是一个布尔属性，当启用时，它可以将galleria组件的自动播放模式设置为真。
circular。这是一个布尔属性，使用户可以无限地滚动画廊的项目。
transitionInterval:此属性接受数字值，即一个项目在自动播放模式下显示的微秒数。

Angular PrimeNG Galleria的标题模板：

item。该模板用于定义一个单一项目在galleria组件中的结构方式。
thumbnail。该模板用于定义一个项目的缩略图在画廊组件中的结构。
caption:这个模板结构了galleria组件中项目的标题。

语法:

<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}">

    <ng-template pTemplate="item" let-img>
        ...
    </ng-template>

    <ng-template pTemplate="caption" let-img>
        ...
    </ng-template>
</p-galleria>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG Galleria字幕

例子1：这是一个基本的例子，说明如何使用加勒利亚的标题。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Caption</h3>
  
<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}" >
  
    <ng-template pTemplate="item" let-img>
        <img 
            [src]="img.URL" 
            style="width: 100%; display: block;" />
    </ng-template>
  
    <ng-template pTemplate="thumbnail" let-img>
        <img 
            [src]="img.URL" 
            style="width: 100px; display: block;" />
    </ng-template>
  
    <ng-template pTemplate="caption" let-img>
        <h4 
            style="color: #ffffff; margin-bottom: 0;">
            {{img.title}}
        </h4>
        <p style="margin-top: 0;">{{img.description}}</p>
    </ng-template>
</p-galleria>

app.component.ts:

import { Component } from '@angular/core';
  
interface GalleriaImage{
    URL: String,
    title: String,
    description: 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",
                title: "Cracking the Coding Interview",
                description: "Step up your interview preparation"
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png",
                title: "Interview Series #70",
                description: "Join at 7:00 PM "
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png",
                title: "Interview Series #68",
                description: "Join at 7:00 PM "
            },
            {
                URL: 
 "https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png",
                title: "Interview Series #66",
                description: "Join at 7:00 PM "
            },
            {
                URL: 
 "https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png",
                title: "Interview Series #65",
                description: "Join at 7:00 PM "
            }
        ];
    }
}

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 { }

输出:

Angular PrimeNG Galleria字幕

例子2：在这个例子中，我们使用了没有缩略图和自动播放的galleria标题。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Caption</h3>
  
<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}"
    [showThumbnails]="false"
    [autoPlay]="true"
    [circular]="true"
    [transitionInterval]="1500">
  
    <ng-template pTemplate="item" let-img>
        <img 
            [src]="img.URL" 
            style="width: 100%; display: block;" />
    </ng-template>
  
    <ng-template pTemplate="caption" let-img>
        <h4 
            style="color: #ffffff; margin-bottom: 0;">
            {{img.title}}
        </h4>
        <p style="margin-top: 0;">{{img.description}}</p>
    </ng-template>
</p-galleria>

app.component.ts:

import { Component } from '@angular/core';
  
interface GalleriaImage{
    URL: String,
    title: String,
    description: 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",
                title: "Cracking the Coding Interview",
                description: "Step up your interview preparation"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png",
                title: "Interview Series #70",
                description: "Join at 7:00 PM "
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png",
                title: "Interview Series #68",
                description: "Join at 7:00 PM "
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png",
                title: "Interview Series #66",
                description: "Join at 7:00 PM "
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png",
                title: "Interview Series #65",
                description: "Join at 7:00 PM "
            }
        ];
    }
}

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 { }

输出:

Angular PrimeNG Galleria字幕