---
title:
  zh-CN: 基本用法
  en-US: Basic Usage
order: 0
---

简单用法

```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[] = [
    {
      title: 'Group 1',
      icon: 'user',
      selected: true,
      link:'./',
      matchRouterExact:true
    },
    {
      title: 'Group 2',
      icon: 'user',
      children: [
        {
          title: 'Group 2-1',
          icon: 'bars',
          open: false,
          link:'/',
          matchRouterExact:true
        },
        {
          title: 'Group 2-2',
          icon: 'bars',
          open: false,
          link:'/',
          matchRouterExact:true
        },
        {
          title: 'Group 2-3',
          icon: 'bars',
          link:'/',
          open: false,
          matchRouterExact:true
        }
      ]
    }
  ];
}
```