bixi/packages/core/layout/index.zh-CN.md

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

---
type: Common
title: Layout
subtitle: 布局
cols: 1
order: 5
---

```ts
import { BixiLayoutModule } from '@bixi/core/layout';
```


## API

#### bixi-layout-header

| 属性 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[logoSmall]` | 折叠时图片地址 | `string` | - |
| `[logoLarge]` | 展开时图片地址 | `string` | - |
| `[breadcrumbs]` | header 面包屑位置，默认通过路由配置自动生成 | `string | TemplateRef<void>` | - |
| `[tools]` | header 工具栏位置 | `string | TemplateRef<void>` | - |

#### bixi-layout-menu

| 属性 | 说明 | 类型 | 默认值  |
|----|----|----|-----|
| `[menus]` | 菜单数据 | `IMenu[]` | `[]` |
| `[singleOpen]` | 菜单是否只展开当前父级 | `boolean` |`false`|
| `(menuClick)` | 点击 menu 的回调函数 | `EventEmitter<IMenu>` | - |


#### BixiLayoutService

| 成员 | 说明 | 类型 |
|----|----|----|-----|
| `setBreadcrumbs` | 设置面包屑                | `(breads: IBreadcrumb[]) => IBreadcrumb[]` |
| `setPageTitle`   | 设置页面标题              | `(breads: IBreadcrumb[]) => string`        |
| `toggleHeader`   | 设置 header 面包屑显示/隐藏| `boolean | undefined`                      | 
| `toggleMenu`   | 设置 menu 收起/展开| `boolean | undefined`                      | 
| `openChange`     | 监听菜单栏展开/收起        | `Observable<boolean>`                      | 



## 类型

#### IMenu
``` typescript
interface IMenu {
  open?: boolean;
  title?: string;
  group?: boolean;
  titleI18n?: string;
  icon?: string;
  link?: string;
  children?: IMenu[];
  selected?: boolean;
  matchRouterExact?: boolean; // 是否精确匹配路由
}
```


#### IBreadcrumb 
``` typescript
interface IBreadcrumb {
  name: string;
  link?: string;
}
```


## 常见问题
### 如何生成面包屑？

##### 1. 通过路由配置的 `title` 自动生成 

``` typescript
{
  path: '/a',
  component: AComponent,
  data: {
    title: 'Abc'
    // 或者是国际化的 Key
    // titleI18n: 'menu.abc'
  }
}
```

##### 2. 通过 route 配置的 `breadcrumbs` 自动生成
```typescript
{
  path: '/a',
  component: AComponent,
  data: {
    breadcrumbs(route: ActivatedRoute): IBreadcurmb[] {
      return [{
        // titleI18n: 'menu.abc', //支持国际化
        name: 'Abc',
        link: 'a/b/c'
      }];
    },
    // 也可以是数组
    // breadcrumbs: [{
    //   name: '面包屑名称',
    //   link: 'a/b/c'
    // }]
  }
}
```

##### 3. 通过 BixiLayoutService 编程式修改