Angular PrimeNG PickList Отзывчивый
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов.
Angular PrimeNG PickList используется для изменения порядка элементов в разных списках, а в адаптивном режиме список выбора настраивает свои элементы управления в зависимости от размера экрана. Чтобы активировать этот режим, установите для него значение true.
Синтаксис:
<p-pickList [responsive]="true">
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save npm install @angular/cdk --save
Структура проекта: Это будет выглядеть следующим образом:
Пример 1: В этом примере мы увидим набор адаптивных имущество
продукт.ts
Javascript
export interface Product { id?: string; code?: string; name?: string; description?: string; price?: number; quantity?: number; inventoryStatus?: string; category?: string; image?: string; rating?: number;} |
app.component.html
HTML
<div style="width:80%"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Angular PrimeNG PickList Responsive</h2> <p-pickList ="sourceProducts" [target]="targetProducts" [dragdrop]="true" [responsive]="true" [sourceStyle]="{"height":"300px"}" [targetStyle]="{"height":"300px"}" style="width:50%"> <ng-template let-product pTemplate="item"> <div class="product-item"> <div class="product-list-detail"> <h5 class="mb-2">{{product.name}}</h5> <img [src]="product.image" s style="display:inline-block; margin:2px 0 2px 2px" width="48"> <span class="product-category"> {{product.category}} </span> </div> <div class="product-list-action"> <h6 class="mb-2"> Rs {{product.price}} </h6> </div> </div> </ng-template> </p-pickList></div> |
app.component.css
CSS
.product-item { display: flex; align-items: center; padding: .5rem; width: 100%; color:white; background-color: green;}img { width: 75px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); margin-right: 1rem;} .product-list-detail { flex: 1 1 0;} .product-list-action { display: flex; flex-direction: column; align-items: flex-end;} |
app.component.ts
Javascript
import { Component } from "@angular/core";import { Product } from "./product"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"]}) export class AppComponent { data: Product[] = [ { "id": "1000", "code": "GFG111", "name": "JAVA", "description": "Programming language", "image": "price": 6500, }, { "id": "1001", "code": "GFG555", "name": "Angular JS", "description": "Front End Development", "image": "price": 700, }, { "id": "1002", "code": "GFG777", "name": "CSS", "description": "Style Sheet", "image": "price": 2900, }, { "id": "1003", "code": "GFG999", "name": "HTML", "description": "HTML Development", "image": "price": 3100, }, ] sourceProducts: Product[] = this.data; targetProducts: Product[] = [];} |
app.module.ts
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { AppComponent } from "./app.component";import { PickListModule } from "primeng/picklist"; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, PickListModule, ], providers: [], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Пример 2. В этом примере мы увидим, как отзывчивость работает с такими свойствами, как «Заголовки» и «Фильтр».
продукт.ts
Javascript
export interface Product { id?: string; code?: string; name?: string; description?: string; price?: number; quantity?: number; inventoryStatus?: string; category?: string; image?: string; rating?: number;} |
app.component.html
HTML
<div style="width:80%"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Angular PrimeNG PickList Responsive</h2> <p-pickList ="sourceProducts" [target]="targetProducts" targetHeader="Target List" [dragdrop]="true" [responsive]="true" [sourceStyle]="{"height":"300px"}" [metaKeySelection]="true" sourceHeader="Source List" filterBy="name" sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" [targetStyle]="{"height":"300px"}" style="width:50%"> <ng-template let-product pTemplate="item"> <div class="product-item"> <div class="product-list-detail"> <h5 class="mb-2">{{product.name}}</h5> <img [src]="product.image" style="display:inline-block; margin:2px 0 2px 2px" width="48"> <span class="product-category"> {{product.category}} </span> </div> <div class="product-list-action"> <h6 class="mb-2"> Rs {{product.price}} </h6> </div> </div> </ng-template> </p-pickList></div> |
app.component.css
CSS
.product-item { display: flex; align-items: center; padding: 0.5rem; width: 100%; color: white; background-color: green;}img { width: 75px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); margin-right: 1rem;} .product-list-detail { flex: 1 1 0;} .product-list-action { display: flex; flex-direction: column; align-items: flex-end;} |
app.component.ts