Свойства карусели Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим свойства карусели Angular PrimeNG.
Карусель — это компонент слайдера контента, в котором массив данных отображается последовательно либо вручную, либо автоматически. Карусель в Angular PrimeNG обеспечивает отличную настройку, которую можно использовать для создания динамических каруселей.
Существуют различные свойства, предоставляемые Angular PrimeNG, которые можно использовать для улучшения стиля карусели, которые описаны ниже.
Свойства карусели Angular PrimeNG:
- value : Массив объектов для отображения в карусели.
- страница: обозначает индекс первого элемента в карусели.
- style: определяет встроенный стиль компонента.
- styleClass: этот класс используется для стилизации контейнера окна просмотра.
- круговой: этот класс можно использовать для установки бесконечной прокрутки.
- showIndicators: этот класс используется для указания, отображать ли контейнеры индикаторов или нет.
- showNavigators: этот класс используется для указания, показывать ли кнопки навигации или нет.
- autoplayInterval: этот класс определяет время автоматической прокрутки элементов.
- numVisible: этот класс указывает количество элементов на странице.
- numScroll: этот класс указывает количество элементов для прокрутки.
- responsiveOptions: этот класс определяет параметры адаптивного дизайна.
- ориентация: этот класс используется для установки ориентации карусели
- verticalViewPortHeight: этот класс используется для указания высоты окна просмотра в вертикальном макете.
- contentClass: этот класс используется для указания класса стиля основного содержимого.
- индикаторыContentClass: этот класс используется для указания класса стиля элементов пагинатора.
- индикаторыContentStyle: этот класс используется для указания стиля элементов пагинатора.
- индикаторStyleClass: этот класс используется для указания класса стиля индикаторов.
- индикаторStyle: этот класс используется для указания стиля индикаторов.
Синтаксис:
<p-carousel [value]="..">
...
</p-carousel>Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. appname , перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом:
Пример 1: В этом примере мы увидим основное использование numVisible, numScroll, circle и значения свойств карусели в Angular PrimeNG.
- app.component.html
HTML
<div id="GFG"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>Carousel Properties</h2> <div style="width:50%; "> <p-carousel [value]="images" [numVisible]="1" [numScroll]="1" [circular]="true"> <ng-template let-item pTemplate="item"> <img [src]="item.previewImageSrc" alt="item.alt" width="500px"> </ng-template> </p-carousel> </div></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 { CarouselModule } from "primeng/carousel";import { AppComponent } from "./app.component";@NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, CarouselModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Пример 2: В этом примере мы увидим showIndicators, showNavigators, round и ориентацию в Angular PrimeNG.
- app.component.html
HTML
<div id="GFG"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>Carousel Properties</h2> <div style="width:50%; "> <p-carousel [value]="images" [numVisible]="1" [numScroll]="1" [circular]="true" [showIndicators]="true" [showNavigators]="true" orientation="vertical"> <ng-template let-item pTemplate="item"> <img [src]="item.previewImageSrc" alt="item.alt" width="500px"> </ng-template> </p-carousel> </div></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 { CarouselModule } from "primeng/carousel";import { AppComponent } from "./app.component";@NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, CarouselModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Ссылка: http://primefaces.org/primeng/carousel