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

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 作用是相同的，请保证不要同时出现这两个组件

nly-sidebar-menu 和 nly-sidebar-container 的收起和展开是由指令 v-nly-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

使用

<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 是一种正常的 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 是一种固定左侧导航栏左右上中下布局，在线 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 是一种固定头部侧导航栏左右上中下布局，在线 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 是一种可收起展开左侧导航栏左右上中下布局，在线 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>`

<nly-wrapper> props 参数

props 参数

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

查看源码

函数式组件（Functional component）

<nly-wrapper-header> props 参数

props	类型	默认值	描述
`expand`	`String`		nav 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`	`Boolean`	`false`	nav props 设置为true时有效。导航栏字体颜色
`size`	`String`	`''`	nav props 设置为true时有效。导航栏字体大小
`border`	`Boolean`	`true`	nav props 设置为true时有效。navbar底边框
`wrapper-header-class`	`String`		自定义css
`tag`	`String`	`'header'`	标签
`nav`	`Boolean`	`false`	设置为true时，变成navbar容器

查看源码

函数式组件（Functional component）

<nly-wrapper-footer> props 参数

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'`	标签

查看源码

函数式组件（Functional component）

<nly-wrapper-control-sidebar> props 参数

props	类型	默认值	描述
`light`	`Boolean`	`false`	默认背景色，默认为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'`	标签

查看源码

`<nly-wrapper-content>`

函数式组件（Functional component）

<nly-wrapper-content> props 参数

props 参数

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

单个组件导入

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

组件	导出名称	导出路径
`<nly-wrapper>`	`NlyWrapper`	`nly-adminlte-vue`
`<nly-wrapper-header>`	`NlyWrapperHeader`	`nly-adminlte-vue`
`<nly-wrapper-footer>`	`NlyWrapperFooter`	`nly-adminlte-vue`
`<nly-wrapper-control-sidebar>`	`NlyWrapperControlSidebar`	`nly-adminlte-vue`
`<nly-wrapper-content>`	`NlyWrapperContent`	`nly-adminlte-vue`

例子

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

单个指令导出

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

指令	导出名称	导出路径
`v-nly-control-sidebar-collapse`	`VNlyControlSidebarCollapse`	`nly-adminlte-vue`
`v-nly-sidebar-collapse`	`VNlySidebarCollapse`	`nly-adminlte-vue`

例子

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

导出作为插件

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

导出名称	导出路径
`WrapperPlugin`	`nly-adminlte-vue`

例子

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

Wrapper

总览

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

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

使用

Top Navigation

Boxed

Fixed Sidebar

Fixed Navbar

Collapsed Sidebar

组件参数

`<nly-wrapper>`

props 参数

`<nly-wrapper-header>`

props 参数

`<nly-wrapper-footer>`

props 参数

`<nly-wrapper-control-sidebar>`

props 参数

`<nly-wrapper-content>`

props 参数

单个组件导入

单个指令导出

导出作为插件

总览

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

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

使用

Top Navigation

Boxed

Fixed Sidebar

Fixed Navbar

Collapsed Sidebar

组件参数

<nly-wrapper>

props 参数

<nly-wrapper-header>

props 参数

<nly-wrapper-footer>

props 参数

<nly-wrapper-control-sidebar>

props 参数

<nly-wrapper-content>

props 参数

单个组件导入

单个指令导出

导出作为插件

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

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

`<nly-wrapper>`

`<nly-wrapper-header>`

`<nly-wrapper-footer>`

`<nly-wrapper-control-sidebar>`

`<nly-wrapper-content>`