Шаблоны Angular PrimeNG Galleria
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим шаблоны Angular PrimeNG Galleria.
Компонент Galleria — это расширенный компонент галереи контента. Он используется для отображения изображений в привлекательной форме. Шаблоны Galleria можно использовать для дополнительной настройки и добавления дополнительных компонентов, таких как заголовок, подпись и т. д.
Шаблоны галереи Angular PrimeNG:
- header : это компонент заголовка, который используется для включения заголовка в шаблон.
- индикатор : это индикаторный компонент, который будет отображать изменения в шаблонах Галереи с помощью сплошного маленького круга. Это также помогает указать текущий активный шаблон с помощью сплошного маленького кружка.
- caption : используется для добавления подписи к изображению.
- нижний колонтитул : это компонент нижнего колонтитула, который используется для включения содержимого в нижний колонтитул шаблона.
Синтаксис : добавьте шаблон следующим образом.
<p-galleria [numVisible]="3" [value]="images">
<ng-template pTemplate="item" let-item>
...
</ng-template>
<ng-template pTemplate="header" let-item>
...
</ng-template>
</p-galleria>Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new geeks_angular
Шаг 2: После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.
cd geeks_angular
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом:
Пример 1. В следующем примере у нас есть компонент галереи с верхним и нижним колонтитулами.
- app.component.html
HTML
<h1 style="color:green">GeeksforGeeks</h1><h2>Angular PrimeNG Galleria Template</h2><div style="width:100%; 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> <ng-template pTemplate="header" let-item> <h1 style="color:white; text-align:center; padding:24px;"> Images </h1> </ng-template> <ng-template pTemplate="footer" let-item> <h3 style="color:white; text-align:center; padding:24px;"> There are {{ images.length }} images </h3> </ng-template> </p-galleria></div> |
- app.component.ts
Javascript
import { Component } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html",})export class AppComponent { title = "GFG"; images: any[] = [ { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 1", title: "Title 1", }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 2", title: "Title 2", }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 3", title: "Title 3", }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 4", title: "Title 4", }, ];} |
- app.module.ts
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { AppComponent } from "./app.component";import { CarouselModule } from "primeng/carousel";import { GalleriaModule } from "primeng/galleria"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CarouselModule, GalleriaModule, ], declarations: [AppComponent], bootstrap: [AppComponent], })export class AppModule { } |
Выход:
Пример 2. В следующем примере мы добавили заголовок к компоненту галереи с индикаторами.
- app.component.html
HTML
<h1 style="color:green">GeeksforGeeks</h1><h2>Angular PrimeNG Galleria Template</h2><div style="width:100%; background-color: black; "> <p-galleria [numVisible]="3" [value]="images" [showIndicators]="true"> <ng-template pTemplate="item" let-item> <img [src]="item.previewImageSrc" [alt]="item.alt" [title]="item.title" style="width: 50%;"> </ng-template> <ng-template pTemplate="caption" let-item> <p style="color:white;text-align:center;"> {{ item.title }} </p> </ng-template> </p-galleria></div> |
- app.component.ts
Javascript
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html",})export class AppComponent { title = "GFG"; images: any[] = [ { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 1", title: "Title 1", }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 2", title: "Title 2", }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 3", title: "Title 3", }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 4", title: "Title 4", }, ];} |
- app.module.ts
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { AppComponent } from "./app.component";import { CarouselModule } from "primeng/carousel";import { GalleriaModule } from "primeng/galleria"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CarouselModule, GalleriaModule, ], declarations: [AppComponent], bootstrap: [AppComponent], })export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/galleria