Angular PrimeNG Form MultiSelect Styling Component

Опубликовано: 24 Февраля, 2023

Angular PrimeNG — это библиотека компонентов AngularJS, разработанная PrimeFaces. Он предоставляет разработчикам возможность выбора из широкого спектра уже реализованных тем и компонентов пользовательского интерфейса для своих приложений. В этой статье мы увидим компонент стилизации Angular PrimeNG Form MultiSelect.

Компонент MultiSelect позволяет пользователям выбирать несколько параметров из набора предоставленных параметров. Существует 9 классов структурного стиля компонента Multiselect, которые можно использовать для настройки стиля в соответствии с вашими потребностями.

Angular PrimeNG Form MultiSelect Styling CSS-классы:

p-multiselect: это контейнер компонента множественного выбора.
p-multiselect-label-container: это контейнер метки для отображения выбранных элементов.
p-multiselect-label: это метка для отображения выбранных элементов.
p-multiselect-trigger: этот класс применяется к кнопке раскрывающегося списка.
p-multiselect-filter-container: это контейнер входных данных фильтра компонента MultiSelect.
p-multiselect-panel: это класс, применяемый к панели для отображения элементов MultiSelect.
p-multiselect-items: это контейнер списка элементов.
p-multiselect-item: этот класс применяется к элементам компонента MultiSelect.
p-multiselect-open: это контейнер компонента множественного выбора, когда его панель видна.

Есть несколько атрибутов, которые можно использовать с формой MultiSelect, которые описаны ниже:

options: принимает массив объектов, которые будут использоваться для отображения опций множественного выбора.
optionLabel: это свойство принимает свойство объектов параметров, которое будет использоваться в качестве метки для параметров.
showToggleAll: это свойство используется для включения/отключения флажка переключения всех элементов для множественного выбора.
заполнитель: это свойство используется для передачи строки, которая будет использоваться в качестве заполнителя для множественного выбора.

Синтаксис:

// In app.cpomponent.html
<p-multiSelect

    [options]="..." 
    [(ngModel)]="..."
    optionLabel="..."
    defaultLabel="...">
</p-multiSelect>

// In Styles
:host ::ng-deep .Structural-Styling-Class {
    // Custom Styles
}

Создание приложения и установка необходимых модулей:

Шаг 1: Создайте приложение Angular с помощью следующей команды.

ng new my_app

Шаг 2: После создания приложения перейдите в папку проекта с помощью приведенной ниже команды.

cd new_app

Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.

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

Структура проекта: Структура проекта будет показана на рисунке ниже:

Пример 1. В этом примере мы устанавливаем зеленый цвет метки с множественным выбором и полужирный шрифт метки.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Styling Component
</h5>
  
<p-multiSelect class="custom-ms" 
               [options]="brands" 
               [(ngModel)]="selectedBrands" 
               optionLabel="name" 
               optionValue="id" 
               defaultLabel="Select Brand(s)">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
interface Brand {
    name: string;
    id: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms 
            .p-multiselect-label {
            width: 300px !important;
            color: green;
            font-weight: bold;
        }
        `
    ]
})
  
export class AppComponent {
    brands: Brand[] = [];
    selectedBrands: Brand[] = [];
    ngOnInit() {
        this.brands = [
            {
                name: "Adidas",
                id: "sports_1"
            },
            {
                name: "Puma",
                id: "sports_2"
            },
            {
                name: "Nike",
                id: "sports_3"
            },
            {
                name: "HRX",
                id: "sports_4"
            },
  
            {
                name: "Delhivery",
                id: "trans_1"
            },
            {
                name: "DHL",
                id: "trans_2"
            },
            {
                name: "FedEx",
                id: "trans_3"
            }
        ];
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { MultiSelectModule } 
    from "primeng/multiselect";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2. В этом примере мы изменили цвет кнопки раскрывающегося списка на зеленый, а цвет элемента множественного выбора на красный и выделили их жирным шрифтом.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form MultiSelect 
    Styling Component
</h3>
  
<h4>
    Multiselect with <i>red & bold 
    dropdown trigger and item labels</i> 
</h4>
  
<p-multiSelect
    class="mSelect"
    placeholder="Select Players"
    [options]="people" 
    [showToggleAll]="false"
    [(ngModel)]="selected"
    optionLabel="name"
    optionValue="ranking">
</p-multiSelect>

app.component.css

CSS

:host ::ng-deep .mSelect .p-multiselect-label {
    width: 300px !important;
}
  
:host ::ng-deep .mSelect .p-multiselect-item {
    color: red;
    font-weight: bold;
}
  
:host ::ng-deep .mSelect .p-multiselect-trigger {
    color: red;
    font-weight: bold;
}

app.component.ts

Javascript

import { Component } from "@angular/core";
  
interface Person {
    ranking: number;
    name: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["app.component.css"]
})
  
export class AppComponent {
    people: Person[] = [];
    selected: Person[] = [];
  
    ngOnInit() {
        this.people = [
            {
                name: "Alex",
                ranking: 1
            },
            {
                name: "Smith",
                ranking: 2
            },
            {
                name: "Krishna",
                ranking: 3
            },
            {
                name: "Shane",
                ranking: 4
            },
            {
                name: "Tom",
                ranking: 5
            },
            {
                name: "Sebastian",
                ranking: 6
            },
            {
                name: "Tushar",
                ranking: 7
            }
        ];
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { MultiSelectModule } 
    from "primeng/multiselect";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MultiSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Ссылка: https://www.primefaces.org/primeng/multiselect

Technical Scripter Picked AngularJS

Angular PrimeNG Form MultiSelect Styling Component

HTML

Javascript

Javascript

HTML

CSS

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ