# Wrapper

> wrapper 布局，是 NlyadminlteVue 页面结构布局组件，支持 Top Navigation，Boxed， Fixed Navbar，Fixed Footer， Collapsed Sidebar 等布局

## 总览

左侧导航栏和右侧滑板的收起和展开都是由指令完成的。

右侧滑板组件 `nly-wrapper-control-sidebar` 对应的指令是 `v-nly-control-sidebar-collapse`

左侧导航栏组件 `nly-wrapper-sidebar` 对应的指令是 `v-nly-sidebar-collapse`

### `v-nly-control-sidebar-collapse` 右侧滑板指令

`nly-wrapper-control-sidebar` 的收起和展开以及浮动在右侧并自适应上下距离都是由指令 `v-nly-control-sidebar-collapse` 来实现的，单独使用并无效果。

详情请参考指令 **[文档](http://nly-adminlte-vue.nejinn.com/docs/directives/sidebar-collapse)**

**注意:**

- 请保证一个页面只有一个 `nly-wrapper-control-sidebar`，因为指令 `v-nly-control-sidebar-collapse` 无需传入任何参数，会同时控制 windows 中所有的 Control sidebar
- 请保证 `nly-wrapper-control-sidebar` 组件和指令 `v-nly-control-sidebar-collapse` 同时使用，否则组件 `nly-wrapper-control-sidebar` 会失效
- `v-nly-control-sidebar-collapse` 指令可以当定在任何组件上。请尽量不要在绑定指令的组件上 click 事件。
- `v-nly-control-sidebar-collapse`是修改 body class
- `nly-control-sidebar` 和 组件 `nly-wrapper-control-sidebar` 作用是相同的，请保证不要同时出现这两个组件

### `v-nly-sidebar-collapse` 左侧导航栏指令

`nly-sidebar-menu` 和 `nly-sidebar-container` 的收起和展开是由指令 `v-nly-sidebar-collapse` 来实现的，单独使用并无效果。

详情请参考指令 **[文档](http://nly-adminlte-vue.nejinn.com/docs/directives/sidebar-collapse)**

**注意:**

- 请保证一个页面只有一个 `nly-sidebar-menu` 或者只有一个 `nly-sidebar-container`, 因为指令 `v-nly-sidebar-collapse` 默认会控制 windows 中所有的 `nly-sidebar-menu` 和 `nly-sidebar-container`
- 请保证 `nly-sidebar-menu` 或者 `nly-sidebar-container` 组件和指令 `v-nly-sidebar-collapse` 同时使用，否则组件 `nly-sidebar-menu` 和 `nly-sidebar-container` 会无法收起
- `v-nly-sidebar-collapse` 指令 _通常_ 只能可以绑定在 `nly-nav-item` 组件和 `nly-overlay` 组件以及其他任何可点击组件上。请尽量不要在绑定指令的组件上 click 事件。绑定在其他组件可能会出现不可意料的 BUG
- `v-nly-sidebar-collapse` 可传入 modifiers。可选 `sidebar-collapse`， `overlay`，绑定在 `nly-nav-item` 和可点击组件上请传入 `sidebar-collapse` ， 绑定在 `nly-overlay` 上请传入 `overlay`
- `v-nly-sidebar-collapse`是修改 `body class`

### 使用

```html
<nly-wrapper layout="fixed">
  <nly-wrapper-header>
    <nly-nav-item v-nly-sidebar-collapse.sidebar-collapse>
      ...
    </nly-nav-item>
    ...
    <nly-nav-item v-nly-control-sidebar-collapse>
      ...
    </nly-nav-item>
  </nly-wrapper-header>
  <nly-sidebar-container side-mini> </nly-sidebar-container>
  <nly-wrapper-content> </nly-wrapper-content>
  <nly-wrapper-control-sidebar> </nly-wrapper-control-sidebar>
  <nly-wrapper-footer> </nly-wrapper-footer>
  <nly-overlay sidebar v-nly-sidebar-collapse.overlay />
</nly-wrapper>
```

## Top Navigation

top navigation 是一种正常的 navbar-content-footer 上中下布局，在线 **demo [Top Navigation](http://nly-adminlte-vue-demo.nejinn.com/#/top-nav)**

```html
<nly-wrapper top-nav>
  <nly-wrapper-header> </nly-wrapper-header>
  <nly-wrapper-content> </nly-wrapper-content>
  <nly-wrapper-footer> </nly-wrapper-footer>
</nly-wrapper>
```

## Boxed

Boxed 是一种非全屏的盒子容器 左右上中下布局，在线 **demo [Boxed](http://nly-adminlte-vue-demo.nejinn.com/#/boxed)**

左右上中下布局请注意添加罩层`<nly-overlay sidebar />`

```html
<nly-wrapper layout="boxed">
  <nly-wrapper-header>
  ...
  <nly-nav-item v-nly-sidebar-collapse.sidebar-collapse>
  ...
   </nly-wrapper-header>
  <nly-sidebar-container side-mini> </nly-sidebar-container>
  <nly-wrapper-content> </nly-wrapper-content>
  <nly-wrapper-control-sidebar> </nly-wrapper-control-sidebar>
  <nly-wrapper-footer> </nly-wrapper-footer>
  <nly-overlay sidebar />
</nly-wrapper>
```

## Fixed Sidebar

Fixed Sidebar 是一种固定左侧导航栏 左右上中下布局，在线 **demo [Fixed Sidebar](http://nly-adminlte-vue-demo.nejinn.com/#/fixed-sidebar)**

左右上中下布局请注意添加罩层`<nly-overlay sidebar />`

```html
<nly-wrapper layout="fixed">
  <nly-wrapper-header>
  ...
  <nly-nav-item v-nly-sidebar-collapse.sidebar-collapse>
  ...
   </nly-wrapper-header>
  <nly-sidebar-container side-mini> </nly-sidebar-container>
  <nly-wrapper-content> </nly-wrapper-content>
  <nly-wrapper-control-sidebar> </nly-wrapper-control-sidebar>
  <nly-wrapper-footer> </nly-wrapper-footer>
  <nly-overlay sidebar />
</nly-wrapper>
```

## Fixed Navbar

Fixed Navbar 是一种固定头部侧导航栏 左右上中下布局，在线 **demo [Fixed Navbar](http://nly-adminlte-vue-demo.nejinn.com/#/fixed-navbar)**

左右上中下布局请注意添加罩层`<nly-overlay sidebar />`

当左侧导航栏内容不够高的时候，左下角会出现一个白色方格，这是 adminlte3 自带 bug，请谨慎使用这种布局

```html
<nly-wrapper navbar-fixed>
  <nly-wrapper-header>
  ...
  <nly-nav-item v-nly-sidebar-collapse.sidebar-collapse>
  ...
   </nly-wrapper-header>
  <nly-sidebar-container side-mini> </nly-sidebar-container>
  <nly-wrapper-content> </nly-wrapper-content>
  <nly-wrapper-control-sidebar> </nly-wrapper-control-sidebar>
  <nly-wrapper-footer> </nly-wrapper-footer>
  <nly-overlay sidebar />
</nly-wrapper>
```

## Collapsed Sidebar

Collapsed Sidebar 是一种可收起展开左侧导航栏 左右上中下布局，在线 **demo [Collapsed Sidebar](http://nly-adminlte-vue-demo.nejinn.com/#/)**

左右上中下布局请注意添加罩层`<nly-overlay sidebar />`

这种布局下，fixed props 用来开启左侧导航栏 scrollbar 美化插件，如果不传入 `fixed`,请给 `nly-sidebar` 组件传入 `scrollbar=false`，否则滚动条失效。

```html
<nly-wrapper fixed>
  <nly-wrapper-header>
  ...
  <nly-nav-item v-nly-sidebar-collapse.sidebar-collapse>
  ...
   </nly-wrapper-header>
  <nly-sidebar-container side-mini> </nly-sidebar-container>
  <nly-wrapper-content> </nly-wrapper-content>
  <nly-wrapper-control-sidebar> </nly-wrapper-control-sidebar>
  <nly-wrapper-footer> </nly-wrapper-footer>
  <nly-overlay sidebar />
</nly-wrapper>
```