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 : . 5 rem; 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 : 1 rem; } .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.5 rem; 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 : 1 rem; } .product-list-detail { flex: 1 1 0 ; } .product-list-action { display : flex; flex- direction : column; align-items: flex-end; } |
app.component.ts