bixi/packages/core/layout/demo/menu-group.md

企业级中后台前端解决方案

---
title:
  zh-CN: 菜单分组
  en-US: 菜单分组
order: 2
---

在配置 `menus` 加入 `group` 字段即可实现分组

```ts
import { Component } from '@angular/core';
import { IMenu } from '@bixi/core/layout';

@Component({
  selector: 'app-demo',
  template: `
  <div class="main-wrap">
   <bixi-layout>
      <bixi-layout-header
        [logoSmall]="logoSmall"
        [logoLarge]="logoLarge" > 
      </bixi-layout-header>
      <bixi-layout-menu [menus]="menus"></bixi-layout-menu>
      <bixi-layout-content>
        <section class="content">
          this is content
        </section>
      </bixi-layout-content>
    </bixi-layout>
  </div>`,
  styles: [
    `.content{
      padding: 20px;
      height:500px;
      background-color: #fff;
    }`
  ]
})
export class DemoComponent {
    logoSmall='./assets/img/layout-logo-large.svg';
    logoLarge='./assets/img/layout-logo-small.svg';
     menus: IMenu[] = [
      {
        "icon": "user",
        "title": "内容",
        "open": true,
      },
      {
        "group": true,
        "children": [
          {
            "icon": "user",
            "link": '/a',
            "title": "内容1-1",
          }
        ],
        "title": "分组1",
        "open": true,
      },
      {
        "group": true,
        "children": [
          {
            "icon": "user",
            "children": [
              {
                "title": "内容2-1-1",
                "link": '/b'
              },
              {
                "title": "内容2-1-2",
                "link": '/c'
              }
            ],
            "title": "内容2-1",
          },
          {
            "children": [
              {
                "title": "内容2-2-1",
                "link": '/d',
              },
              {
                "title": "内容2-2-2",
                "link": '/e',
              }
            ],
            "title": "内容2-2",
          }
        ],
        "title": "分组2",
      }
    ];
}
```