极客教程Angular PrimeNG树的风格
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将学习Angular PrimeNG Tree 风格。
Angular PrimeNG Tree用于将分层数据显示为一棵树。样式类允许修改树的样式。这些样式允许访问每一个元素。
风格 。这里是树形组件的风格类。
- p-tree。它是主要的容器元素。
- p-treehorizontal：它是水平模式下的主要容器元素。
- p-tree-container。它是树节点的容器。
- p-treenode。它是一个单一的treenode元素。
- p-treenode-content。它是树节点的内容。
- p-treenode-toggler：它是显示/隐藏内容的Toggle图标。
- p-treenode-icon。它是一个树节点的图标。
- p-treenode-label。它是一个树节点的标签。
- p-reenode-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
项目结构：项目结构将看起来像如下。
Project Structure
使用以下命令运行该应用程序。
ng serve --open
例子1：在下面的例子中，我们有简单的TreeNodes，字体为黑体。
<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>
:host ::ng-deep .p-treenode {
font-weight: 900;
}
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;
}
}
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：在下面的例子中，我们将有绿色边框的图标。
<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>
:host ::ng-deep .p-treenode-icon {
border-width: 2px;
border-color: green;
border-style: solid;
}
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;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
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 { }
输出:
