提交 issue修改本页

Control Sidebar

Control Sidebar 是一个可收缩的右侧滑板，浮动在右侧，自适应布局 header 和 footer 距离

使用方法

Control Sidebar 的收起和展开以及浮动在右侧并自适应上下距离都是由指令 v-nly-control-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 作用是相同的，请保证不要同时出现这两个组件
<nly-control-sidebar>
  <nly-control-sidebar-container> </nly-control-sidebar-container>
</nly-control-sidebar>
<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 来设置主题颜色

组件参数

查看源码

<nly-control-sidebar>

函数式组件（Functional component）

props 参数

props类型默认值描述
light
Booleanfalse默认背景色，默认为false，背景色为dark，设置true，背景色为light
bg-variant
String背景色，会覆盖prop light， 可选背景色， 默认无背景， 可选 primary， secondary， success， info， warning， danger， light， dark， lightblue， navy， olive， lime， fuchsia， maroon， blue， indigo， purple， pink， red， orange， yellow， green， teal， cyan， white， gray， graydark
bg-gradient-variant
String渐变背景色， 会覆盖prop light 和 prop bg-variant， 可选 primary， secondary， success， info， warning， danger， light， dark， lightblue， navy， olive， lime， fuchsia， maroon， blue， indigo， purple， pink， red， orange， yellow， green， teal， cyan， white， gray， graydark
size
String字体大小，可选xs，sm，md，lg，xl
control-sidebar-class
String自定义css
tag
String'aside'标签
查看源码

<nly-control-sidebar-container>

函数式组件（Functional component）
查看源码

<nly-control-sidebar-button>

函数式组件（Functional component）

props 参数

props类型默认值描述
bg-variant
String背景色，会覆盖prop light， 可选背景色， 默认无背景， 可选 primary， secondary， success， info， warning， danger， light， dark， lightblue， navy， olive， lime， fuchsia， maroon， blue， indigo， purple， pink， red， orange， yellow， green， teal， cyan， white， gray， graydark
bg-gradient-variant
String渐变背景色， 会覆盖prop light 和 prop bg-variant， 可选 primary， secondary， success， info， warning， danger， light， dark， lightblue， navy， olive， lime， fuchsia， maroon， blue， indigo， purple， pink， red， orange， yellow， green， teal， cyan， white， gray， graydark
tag
String'div'标签
role
String'button'role属性
control-button-class
String自定义css
id
必传 		String or Number设置id

Events

EventArgumentsDescription
click
  1. 原生点击事件
点击按钮触发事件

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-control-sidebar>NlyControlSidebarnly-adminlte-vue
<nly-control-sidebar-container>NlyControlSidebarContainernly-adminlte-vue
<nly-control-sidebar-button>NlyControlSidebarButtonnly-adminlte-vue

例子

import { NlyControlSidebar } from 'nly-adminlte-vue'
Vue.component('nly-control-sidebar', NlyControlSidebar)

单个指令导出

你可以从下表给出的导出路径和导出名称导入单个指令包

指令导出名称导出路径
v-nly-control-sidebar-collapseVNlyControlSidebarCollapsenly-adminlte-vue

例子

import { VNlyControlSidebarCollapse } from 'nly-adminlte-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('nly-control-sidebar-collapse', VNlyControlSidebarCollapse)

导出作为插件

导出的插件包括上表中列出的组件 和指令. 插件同样包含上表中所有组件的简称.

导出名称导出路径
ControlSidebarPluginnly-adminlte-vue

例子

import { ControlSidebarPlugin } from 'nly-adminlte-vue'
Vue.use(ControlSidebarPlugin)