nly-adminlte-vue
Version:
nly adminlte3 components
35 lines (25 loc) • 1.55 kB
Markdown
# Control Sidebar
> Control Sidebar 是一个可收缩的右侧滑板,浮动在右侧,自适应布局 header 和 footer 距离
## 使用方法
Control Sidebar 的收起和展开以及浮动在右侧并自适应上下距离都是由指令 `v-nly-control-sidebar-collapse` 来实现的,单独使用并无效果
详情请参考指令 **[文档](http://nly-adminlte-vue.nejinn.com/docs/directives/sidebar-collapse)**
**注意:**
- 请保证一个页面只有一个 Control Sidebar,因为指令 `v-nly-control-sidebar-collapse` 无需传入任何参数,会同时控制 windows 中所有的 Control sidebar
- 请保证 `nly-control-sidebar` 组件和指令 `v-nly-control-sidebar-collapse` 同时使用,否则组件 `nly-control-sidebar` 会失效
- `v-nly-control-sidebar-collapse` 指令可以当定在任何组件上。请尽量不要在绑定指令的组件上 click 事件。
- `v-nly-control-sidebar-collapse`是修改 body class
- `nly-control-sidebar` 和 组件 `nly-wrapper-control-sidebar` 作用是相同的,请保证不要同时出现这两个组件
```html
<nly-control-sidebar>
<nly-control-sidebar-container> </nly-control-sidebar-container>
</nly-control-sidebar>
```
```html
<nly-nav-item v-nly-control-sidebar-collapse>
...
</nly-nav-item>
<nly-control-sidebar>
<nly-control-sidebar-container> </nly-control-sidebar-container>
</nly-control-sidebar>
```
`nly-control-sidebar` 支持设置 `light`、 `bg-varaint-*`、 `bg-gradient-variant-*` props 来设置主题颜色