PrimeNG菜单栏角度样式

npm install primeng --save
npm install primeicons --save

import 'primeng/resources/primeng.min.css';
import 'primeicons/primeicons.css';

<p-menu [model]="items"></p-menu>

import { MenuItem } from 'primeng/api';

export class YourComponent {
  items: MenuItem[];

  constructor() {
    this.items = [
      {
        label: 'Home',
        icon: 'pi pi-fw pi-home',
        routerLink: '/'
      },
      {
        label: 'About',
        icon: 'pi pi-fw pi-info',
        routerLink: '/about'
      }
      // ...其他菜单项
    ];
  }
}

/* 自定义 PrimeNG 菜单栏样式 */
.ui-menu {
  /* 添加你的自定义样式 */
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ui-menu .ui-menuitem-link {
  /* 修改菜单项链接的样式 */
  color: #333;
  font-size: 16px;
}

.ui-menu .ui-menuitem-link:hover {
  /* 修改菜单项链接的悬停样式 */
  background-color: #e0e0e0;
}