极客教程Angular PrimeNG PanelMenu属性
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常方便。在这篇文章中，我们将学习如何在Angular PrimeNG中使用PanelMenu属性。我们还将了解这些属性，以及它们在代码中的语法。
PanelMenu组件用于制作一个面板形式的菜单。它可以被认为是手风琴和树形组件的组合。
Angular PrimeNG PanelMenu属性：
- model。它是一个菜单项的数组。它接受数组数据类型作为输入，默认值为空。
- style。它用于设置组件的内联样式。它的数据类型为字符串，默认值为空。
- styleClass。它用于设置组件的风格类别。它的数据类型为字符串，默认值为空。
- multiple: 它用于指定是否可以同时激活多个标签。它是布尔数据类型，默认值为真。
- transitionOptions。用来设置动画的过渡选项。它是字符串数据类型，默认值是400ms cubic-bezier（0.86, 0, 0.07, 1）。
创建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 PanelMenu属性。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG PanelMenu Properties</h5>
<p-panelMenu [model]="gfg"></p-panelMenu>
- 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: '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 { PanelMenuModule } from 'primeng/panelmenu';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
PanelMenuModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
输出:
例子2：这是另一个基本的例子，说明了如何使用Angular PrimeNG PanelMenu属性使用m ultiple=”false”。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG PanelMenu Properties</h5>
<p-panelMenu [multiple]='false' [model]="gfg"></p-panelMenu>
- 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: 'Courses',
icon: 'pi pi-pencil',
items: [
{
label: 'DSA-Self Paced',
},
{
label: 'System Design',
},
],
},
{
label: 'Tutorials',
icon: 'pi pi-youtube',
items: [
{
label: 'Angular Js',
},
{
label: 'React Js',
},
],
},
{
label: 'Jobs',
icon: 'pi pi-id-card',
items: [
{
label: 'GfG Jobathon',
},
{
label: 'Post a Job',
},
],
},
{
label: 'Practice',
icon: 'pi pi-code',
items: [
{
label: 'Problem of the day',
},
{
label: 'SDE Sheet',
},
],
},
];
}
}
- 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 { PanelMenuModule } from 'primeng/panelmenu';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
PanelMenuModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
输出:
