bixi
Version:
企业级中后台前端解决方案
80 lines (76 loc) • 1.55 kB
Markdown
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
}
]
}
];
}
```