Компонент Angular PrimeNG Form TreeSelect
Angular PrimeNG — это библиотека с открытым исходным кодом, состоящая из собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и эта структура используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент Angular PrimeNG Form TreeSelect.
Компонент TreeSelect позволяет пользователям выбирать элементы из иерархических данных. Он принимает массив TreeNodes в качестве свойства options для отображения данных.
В режиме одиночного выбора TreeSelect можно выбрать один элемент из иерархии.
В режиме множественного выбора TreeSelect можно выбрать более одного элемента, и по умолчанию выбранный элемент будет разделен запятой и будет дополнен многоточием, когда выбранные элементы выходят за пределы компонента TreeSelect.
В режиме выбора флажка TreeSelect рядом с каждым элементом отображается флажок, который можно использовать для выбора элемента и всех элементов, подпадающих под него в иерархии.
В качестве альтернативы поведению выбора, заданному параметром selectionMode, TreeSelects предоставляет параметры «один», «много» и «флажок».
По умолчанию выбранные элементы отображаются в виде списков, разделенных запятыми, однако доступен альтернативный режим чипа , который использует свойство display для отображения элементов в виде токенов.
Синтаксис:
<p-treeSelect [(ngModel)]="..." selectionMode="..." disaply="..." [options]="..." placeholder="...> </p-treeSelect>
Свойства компонента Angular PrimeNG Form TreeSelect:
- options: это свойство принимает массив TreeNodes в качестве значения для отображения компонента TreeSelect.
- scrollHeight: если высота списка больше высоты области просмотра, определяется полоса прокрутки. Он имеет строковый тип и значение по умолчанию — 400 пикселей.
- заполнитель: Свойство заполнителя используется для настройки отображения заполнителя, когда элементы не выбраны.
- disabled: указывает, что компонент должен быть деактивирован, если он присутствует. Он имеет логический тип и значение по умолчанию — false.
- tabindex: это индекс элемента в порядке табуляции. Он имеет строковый тип и значение по умолчанию равно null.
- inputId: Это идентификатор базового элемента ввода. Он имеет строковый тип и значение по умолчанию равно null.
- ariaLabelledBy: создает соединения между компонентом и меткой(ями), при этом значением атрибута является один или несколько идентификаторов элемента. Он имеет строковый тип и значение по умолчанию равно null.
- selectionMode: это свойство используется для установки режима выбора компонента TreeSelect. Допустимые значения: «один», «несколько» и «флажок». Значение по умолчанию — «один».
- panelClass: относится к классу стиля панели наложения. Он имеет строковый тип и значение по умолчанию равно null.
- appendTo: используется для указания места применения наложения и предоставления допустимого селектора запроса или HTMLElement. «Body» обозначает тело документа, а «self» — сам элемент.
- emptyMessage: используется, когда нет выбора, будет отображаться текст. Значение из настройки локали PrimeVue используется по умолчанию.
- display: это свойство определяет, как будут отображаться выбранные элементы. Допустимые значения: «запятая» и «чип». Значение по умолчанию — «чип».
- propagateSelectionUp: используется для проверки того, передаются ли выборы, сделанные в флажках, узлам-предкам. Это логический тип, и значение по умолчанию — true.
- propagateSelectionDown: используется для проверки того, передаются ли варианты флажков дочерним узлам. Это логический тип, и значение по умолчанию — true.
- metaKeySelection: указывает, как можно выбрать несколько элементов. При значении true необходимо нажать metaKey, чтобы выбрать или отменить выбор элемента, в то время как false позволяет независимо выбирать каждый элемент. MetaKeySelection автоматически отключается на сенсорных устройствах.
- фильтр: предоставляет область ввода для фильтрации элементов, если они указаны. Он имеет логический тип и значение по умолчанию — false.
- filterBy: выбирает поле или поля (разделенные запятыми) для поиска, когда включена фильтрация. Он имеет строковый тип и значением по умолчанию является метка.
- filterMode: для допустимых значений доступны «снисходительный» и «строгий» режимы фильтрации. Это строковый тип, а значение по умолчанию — мягкое.
- filterPlaceholder: если поле ввода фильтра пусто, будет отображаться текст-заполнитель. Он имеет строковый тип и значение по умолчанию равно null.
- filterLocale: используемая локаль фильтрации. Текущая локаль среды хоста служит локалью по умолчанию.
- resetFilterOnHide: Это удаляет значение фильтра, когда раскрывающийся список скрыт. Это логический тип, и значение по умолчанию — true.
- showClear: отображается значок очистки, чтобы очистить значение, когда оно включено. Он имеет логический тип и значение по умолчанию — false.
События компонента Angular PrimeNG Form TreeSelect:
- onShow: при отображении наложения запускается обратный вызов.
- onHide: когда оверлей скрыт, запускается обратный вызов.
- onFilter: когда данные фильтруются, запускается обратный вызов.
- onNodeSelect: при выборе узла запускается обратный вызов.
- onNodeUnselect: когда узел не выбран, запускается обратный вызов.
- onNodeExpand: когда узел расширяется, запускается обратный вызов.
- onNodeCollapse: когда узел сворачивается, запускается обратный вызов.
- onClear: когда поле ввода очищается, запускается обратный вызов.
Angular PrimeNG Form TreeSelect Шаблоны компонентов:
- значение: это значение компонента.
- заголовок: это значение компонента. Опции являются опциями TreeNode.
- нижний колонтитул: это значение компонента. Опции являются опциями TreeNode.
Angular PrimeNG Form TreeSelect Стили компонентов:
- p-treeselect: это элемент-контейнер.
- p-treeselect-label-container: контейнер меток, используемый для отображения определенных товаров.
- p-treeselect-label: это метка для отображения выбранных элементов.
- p-treeselect-trigger: это кнопка раскрывающегося списка.
- p-treeselect-panel: это панель наложения элементов.
- p-treeselect-items-wrapper: это список вещей.
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:
Шаги для запуска приложения: Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1: Ниже приведен пример, иллюстрирующий использование компонента Angular PrimeNG Form TreeSelect.
- приложение.component.html:
HTML
< h2 style = "color: green" >GeeksforGeeks</ h2 > < h3 > Angular PrimeNG Form TreeSelect Single Component </ h3 > < p-treeSelect [(ngModel)]="selected" selectionMode = "single" [options]="nodes" placeholder = "Select a Node" > </ p-treeSelect > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { TreeNode } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { nodes: TreeNode[] = []; selected: any; ngOnInit() { this .nodes = [ { "label" : "Work" , "icon" : "pi pi-folder" , "children" : [ { "label" : "data.json" , "icon" : "pi pi-file" }, { "label" : "sales.docx" , "icon" : "pi pi-file" }, { "label" : "presentation.pptx" , "icon" : "pi pi-file" } ] }, { "label" : "Home" , "icon" : "pi pi-folder" , "children" : [ { "label" : "grocery.word" , "icon" : "pi pi-file" }, { "label" : "picture.jpeg" , "icon" : "pi pi-file" }, { "label" : "homeplan.png" , "icon" : "pi pi-file" } ] }, { "label" : "Multimedia" , "icon" : "pi pi-folder" , "children" : [ { "label" : "infinity-war.mp4" , "icon" : "pi pi-file" }, { "label" : "you.mp3" , "icon" : "pi pi-file" }, { "label" : "endgame.mp4" , "icon" : "pi pi-file" }, { "label" : "MI.mp4" , "icon" : "pi pi-file" } ] } ]; } } |
- 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 { FormsModule } from "@angular/forms" ; import { TreeSelectModule } from "primeng/treeselect" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, TreeSelectModule, FormsModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 2. Ниже приведен еще один пример, иллюстрирующий использование компонента Angular PrimeNG Form TreeSelect.
- приложение.component.html:
HTML
< h2 style = "color: green" >GeeksforGeeks</ h2 > < h3 > Angular PrimeNG Form TreeSelect Single Component </ h3 > < p-treeSelect [(ngModel)]="selected" [filter]="true" [options]="nodes" placeholder = "Select a Node" > </ p-treeSelect > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { TreeNode } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { nodes: TreeNode[] = []; selected: any; ngOnInit() { this .nodes = [ { "label" : "Work" , "icon" : "pi pi-folder" , "children" : [ { "label" : "data.json" , "icon" : "pi pi-file" }, { "label" : "sales.docx" , "icon" : "pi pi-file" }, { "label" : "presentation.pptx" , "icon" : "pi pi-file" } ] }, { "label" : "Home" , "icon" : "pi pi-folder" , "children" : [ { "label" : "grocery.word" , "icon" : "pi pi-file" }, { "label" : "picture.jpeg" , "icon" : "pi pi-file" }, { "label" : "homeplan.png" , "icon" : "pi pi-file" } ] }, { "label" : "Multimedia" , "icon" : "pi pi-folder" , "children" : [ { "label" : "infinity-war.mp4" , "icon" : "pi pi-file" }, { "label" : "you.mp3" , "icon" : "pi pi-file" }, { "label" : "endgame.mp4" , "icon" : "pi pi-file" }, { "label" : "MI.mp4" , "icon" : "pi pi-file" РЕКОМЕНДУЕМЫЕ СТАТЬИ |