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 来实现的,单独使用并无效果。

详情请参考指令 文档

注意:

  • 请保证一个页面只有一个 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-menunly-sidebar-container 的收起和展开是由指令 v-nly-sidebar-collapse 来实现的,单独使用并无效果。

详情请参考指令 文档

注意:

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

使用

<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

<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

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

<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

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

<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

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

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

<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

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

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

<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>

组件参数

<nly-wrapper>

props 参数

props类型默认值描述
layout
String页面布局,可选fixed和boxed
navbar-fixed
Booleanfalse头部菜单fixed布局,头部菜单固定在顶部,跟随滚动条一起滚动
footer-fixed
Booleanfalsefooter fixed布局,footer固定在底部,跟随滚动条一起滚动
top-nav
Booleanfalse顶部菜单布局,会覆盖所有与sidebar有关的props,设置为true时,sidebar会消失,不会出现在窗口
wrapper-class
Stringwrapper自定义css
container-class
Stringbody自定义css

props 参数

props类型默认值描述
expand
Stringnav props 设置为true时有效。折叠导航栏的断点,可选sm,md,lg,xl,no,expand。设置no的时候,navbar垂直布局,设置expand时候,不会出现折叠
variant
String'white'nav props 设置为true时有效。主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark
dark
Booleanfalsenav props 设置为true时有效。导航栏字体颜色
size
String''nav props 设置为true时有效。导航栏字体大小
border
Booleantruenav props 设置为true时有效。navbar底边框
wrapper-header-class
String自定义css
tag
String'header'标签
nav
Booleanfalse设置为true时,变成navbar容器
props类型默认值描述
size
String大小,可选xs,sm,md,lg,xl
bg-variant
String背景色, 可选 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渐变背景色, 可选 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
wrapper-footer-class
String自定义css
tag
String'footer'标签

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
wrapper-control-sidebar-class
String自定义css
tag
String'aside'标签

props 参数

props类型默认值描述
tag
String'section'标签

单个组件导入

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

组件导出名称导出路径
<nly-wrapper>NlyWrappernly-adminlte-vue
<nly-wrapper-header>NlyWrapperHeadernly-adminlte-vue
<nly-wrapper-footer>NlyWrapperFooternly-adminlte-vue
<nly-wrapper-control-sidebar>NlyWrapperControlSidebarnly-adminlte-vue
<nly-wrapper-content>NlyWrapperContentnly-adminlte-vue

例子

import { NlyWrapper } from 'nly-adminlte-vue'
Vue.component('nly-wrapper', NlyWrapper)

单个指令导出

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

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

例子

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

导出作为插件

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

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

例子

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