Стилизация дерева Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы собираемся изучить Angular PrimeNG Tree Styling .
Angular PrimeNG Tree используется для отображения иерархических данных в виде дерева. Классы стилей позволяют модифицировать стиль дерева. Стили позволяют получить доступ к каждому элементу.
Styling : Вот классы стилей компонента дерева:
- p-tree: это основной элемент контейнера.
- p-tree-horizontal: это основной элемент контейнера в горизонтальном режиме.
- p-tree-container: это контейнер узлов дерева.
- p-treenode: это одиночный элемент treenode.
- p-treenode-content: это содержимое узла дерева.
- p-treenode-toggler: это значок переключения для отображения/скрытия контента.
- p-treenode-icon: это значок узла дерева.
- p-treenode-label: это метка узла дерева.
- p-treenode-children: это элемент-контейнер для дочерних узлов.
Синтаксис: Примените пользовательский CSS к классам.
:host ::ng-deep .p-treenode {
// CSS Styles
}Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new geeks_angular
Шаг 2: После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.
cd geeks_angular
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом.
Запустите приложение, используя приведенную ниже команду
ng serve --open
Пример 1: В следующем примере у нас есть простые TreeNodes с полужирным шрифтом.
app.component.html
<h1 style="color:green;text-align:center;"> GeeksforGeeks</h1><h3>Angular PrimeNG Tree Styling</h3><h5>Basic</h5> <p-tree [value]="files1" selectionMode="single"></p-tree> |
app.component.css
:host ::ng-deep .p-treenode { font-weight: 900;} |
app.component.ts
import { Component } from "@angular/core";import { TreeNode } from "primeng/api"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"],})export class AppComponent { files1: TreeNode[] = []; files2: TreeNode[] = []; ngOnInit() { this.files1 = [ { label: "Data Structures", icon: "pi pi-folder", children: [ { label: "List", icon: "pi pi-folder", children: [ { label: "Singly List", icon: "pi pi-code", }, { label: "Doubly List", icon: "pi pi-code", }, { label: "Circularly List", icon: "pi pi-code", }, ], }, { label: "Queue", icon: "pi pi-folder", children: [ { label: "Simple Queue", icon: "pi pi-code", }, { label: "Doubly ended Queue", icon: "pi pi-code", }, ], }, ], }, { label: "Algorithms", icon: "pi pi-folder", children: [ { label: "Greedy ", icon: "pi pi-code", }, { label: "BFS ", icon: "pi pi-code", }, { label: "Dynamic Programming", icon: "pi pi-code", }, ], }, ]; this.files2 = this.files1; }} |
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { HttpClientModule } from "@angular/common/http";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { RouterModule } from "@angular/router";import { AppComponent } from "./app.component"; import { FormsModule } from "@angular/forms";import { TreeModule } from "primeng/tree";import { ButtonModule } from "primeng/button"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, TreeModule, ButtonModule, HttpClientModule, FormsModule, RouterModule.forRoot ([{ path: "", component: AppComponent }]), ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Пример 2: В следующем примере у нас будут значки с зеленой рамкой.
app.component.html
<h1 style="color:green;text-align:center;"> GeeksforGeeks</h1><h3>Angular PrimeNG Tree Styling</h3><h5>Basic</h5> <p-tree [value]="files1" selectionMode="single"></p-tree> |
app.component.css
:host ::ng-deep .p-treenode-icon { border-width: 2px; border-color: green; border-style: solid;} |
app.component.ts
import { Component } from "@angular/core";import { TreeNode } from "primeng/api"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"],})export class AppComponent { files1: TreeNode[] = []; files2: TreeNode[] = []; ngOnInit() { this.files1 = [ { label: "Data Structures", icon: "pi pi-folder", children: [ { label: "List", icon: "pi pi-folder", children: [ { label: "Singly List", icon: "pi pi-code", }, { label: "Doubly List", icon: "pi pi-code", }, { label: "Circularly List", icon: "pi pi-code", }, ], }, { label: "Queue", icon: "pi pi-folder", children: [ { label: "Simple Queue", icon: "pi pi-code", }, { label: "Doubly ended Queue", icon: "pi pi-code", }, ], }, ], }, { label: "Algorithms", icon: "pi pi-folder", children: [ { label: "Greedy ", icon: "pi pi-code", }, { label: "BFS ", icon: "pi pi-code", }, { label: "Dynamic Programming", icon: "pi pi-code", }, ], }, ]; this.files2 = this.files1; }} |