bixi/packages/core/layout/demo/custom-header.md

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

---
title:
  zh-CN: 自定义模板
  en-US: 自定义模板
order: 3
---

自定义模板

```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"
        [breadcrumbs]="breadTemplate"
        [tools]="tools"
      > 
        <ng-template #breadTemplate>
          this is a customer breadcrumbs
        </ng-template>
        <ng-template #tools>
          <div>this is custom tools</div>
        </ng-template>
      </bixi-layout-header>
      <bixi-layout-menu [menus]="menus"></bixi-layout-menu>
      <bixi-layout-content>
        <section class="content">
          <div>hello world</div>
        </section>
      </bixi-layout-content>
    </bixi-layout>
  </div>`,
  styles: []
})
export class DemoComponent {
    logoSmall='./assets/img/layout-logo-large.svg';
    logoLarge='./assets/img/layout-logo-small.svg';

    menus: IMenu[] = [
    {
      title: 'Mail Group',
      icon: 'user',
      open: true,
      selected: false,
      children: [
        {
          title: 'Group 1',
          icon: 'bars',
          open: false,
          selected: false,
          link:'./',
          matchRouterExact:true
        },
        {
          title: 'Group 2',
          icon: 'bars',
          open: false,
          link:'/',
          selected: true,
          matchRouterExact:true
        },
        {
          title: 'Group 3',
          icon: 'bars',
          open: false,
          link:'/',
          selected: false,
          matchRouterExact:true
        }
      ]
    }
  ];
}
```