Angular PrimeNG PanelMenu 是一种菜单组件,在左侧或顶部展示菜单项,支持多级嵌套菜单和自定义组件内容。
PanelMenu 组件的关键特点包括:
下面是一个简单的 PanelMenu 示例:
对应的组件代码:
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-menu',
template: `
`
})
export class MenuComponent {
items: MenuItem[];
constructor() {
this.items = [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{ label: 'New', icon: 'pi pi-fw pi-plus' },
{ label: 'Open', icon: 'pi pi-fw pi-folder-open' },
{ label: 'Save', icon: 'pi pi-fw pi-save' }
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{ label: 'Undo', icon: 'pi pi-fw pi-undo' },
{ label: 'Redo', icon: 'pi pi-fw pi-redo' }
]
}
];
}
}
PanelMenu 的 model 属性是 MenuItem 对象数组,一个 MenuItem 包含 label(菜单项名称)、icon(菜单项图标)、items(子菜单项数组)等属性。可以根据需要修改属性值来自定义菜单项内容。 免责声明:本文内容通过AI工具匹配关键字智能整合而成,仅供参考,火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见,您可以通过联系service@volcengine.com进行反馈,火山引擎收到您的反馈后将及时答复和处理。