极客教程Angular PrimeNG TieredMenu属性
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将学习如何在Angular PrimeNG中使用TieredMenu属性。我们还将学习这些属性，以及它们在代码中的语法。
TieredMenu组件允许用户以层级的形式来制作菜单。Angular PrimeNG提供了各种属性，下面将介绍这些属性。
Angular PrimeNG TieredMenu属性：
- model。它是一个菜单项的数组。它的数据类型是数组，默认值是空。
- popup。它定义了菜单是否会以弹出的方式显示。它是布尔数据类型，默认值是false。
- appendTo。它指定了覆盖的目标元素，有效值是 “body “或另一个元素的本地ng-template变量。它是数组数据类型，默认值为空。
- style。它设置组件的内联风格。它的数据类型为字符串，默认值为空。
- styleClass。它设置组件的风格类。它接受字符串数据类型，默认值为空。
- baseZIndex。它是一个用于分层的基础ZIndex值。它接受数字作为输入数据类型，默认值为0。
- autoZIndex。它指定了是否要自动管理分层。它是布尔数据类型，默认值为true。
- autoDisplay。它指定是否在鼠标移动时显示根子菜单。它是布尔数据类型，默认值为false。
- showTransitionOptions。它显示显示动画的过渡选项。它接受字符串数据类型，默认值是0.12s cubic-bezier(0, 0, 0.2, 1)。
- hideTransitionOptions。它显示隐藏动画的过渡选项。它接受字符串数据类型，默认值为0.1s线性。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成安装后，它将看起来像下面这样。
- 要运行上述文件，请运行以下命令。
ng serve --save
例子1：这是一个基本的例子，展示了如何使用Angular PrimeNG TieredMenu属性。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG TieredMenu Properties</h5>
<p-tieredMenu [model]="gfg"></p-tieredMenu>
- app.component.ts:
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: 'JavaScript',
items: [
{
label: 'JavaScript1',
items: [
{
label: 'JavaScript1.1',
},
{
label: 'JavaScript1.2',
},
],
},
{
label: 'JavaScript2',
},
{
label: 'JavaScript3',
},
],
},
{
label: 'HTML',
items: [
{
label: 'HTML 1',
},
{
label: 'HTML 2',
},
],
},
{
label: 'Angular',
items: [
{
label: 'Angular 1',
},
{
label: 'Angular 2',
},
],
},
];
}
}
- app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule }
from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TieredMenuModule } from "primeng/tieredmenu";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TieredMenuModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
例子2：这是另一个基本的例子，展示了如何使用Angular PrimeNG TieredMenu属性。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h5>
Angular PrimeNG TieredMenu Properties
</h5>
<button #btn type="button"
pButton label="GfG courses"
(click)="geeks.toggle($event)"
class="p-button-success"
icon="pi pi-code">
</button>
<p-tieredMenu #geeks [model]="gfg"
[popup]="true">
</p-tieredMenu>
- app.component.ts:
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: "Placement - Self Paced",
items: [
{
label: "Batch1",
items: [
{
label: "Batch1.1",
},
{
label: "Batch1.2",
},
],
},
{
label: "Batch2",
},
{
label: "Batch3",
},
],
},
{
label: "Gate Preparation",
items: [
{
label: "Batch1",
},
{
label: "Batch2",
},
],
},
{
label: "C++ STL",
items: [
{
label: "Batch1",
},
{
label: "Batch2",
},
],
},
];
}
}
- app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule }
from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TieredMenuModule } from "primeng/tieredmenu";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TieredMenuModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
