Overlay

NlyAdminlteVue 自定义的罩层组件 nly-overlay 用来在视觉上挡住和遮住组件或元素，用来展示组件或者元素的一种状态，比如创建，更新，加载，警告等等。

v0.5.6 版本以上 nly-adminlte-vue 才有此组件

Overview

设置 sidebar prop 的时候，罩层会渲染成一个左侧导航栏的罩层，在小屏的时候，展开左侧导航栏会自动显示罩层。且会给罩层传递一个 atrrs id = 'sidebar-overlay'，请注意不要给其他组件传递同样的 id 这时候其他 prop 都不会生效，因为 adminlte3 布局的原因，这个罩层不会带有任何 css 类，除了 nly-overlay
设置 custom prop 的时候, 会渲染成一个 adminlte3 自带罩层，用于 adminlte 的其他组件 loading 状态, 这时候只有 prop dark 会生效，其他 prop 都会失效, 比如 Card，又比如 InFoBox

<nly-overlay> 差不多可以用在任何元素上. 使用 demo 比如表单(forms)，表格(tables),警告弹窗(modal)。在任何需要显示警告，加载，更新等状态的组件和元素，用提在视觉上显示组件当前不可用状态

<nly-overlay> 可以包裹覆盖元素组件，也可以渲染成一个具有属性 position: relative 的子元素(non-wrapping mode).

<nly-overlay> 的可见状态是由 prop show 控制的，默认是不会显示的

此组件仅仅是在视觉上覆盖 视觉上覆盖 他所包裹的内容. 请查看下面 Accessibility section 了解更多的信息

Default wrapping mode example:

<template>
  <div>
    <nly-overlay :show="show" rounded="sm" variant="gradient-pink">
      <nly-card :aria-hidden="show ? 'true' : null">
        <nly-card-body>
          <nly-card-text>作者帅比，查看罩层</nly-card-text>
          <nly-card-text>点击按钮显示罩层</nly-card-text>
          <nly-button :disabled="show" variant="primary" @click="show = true">
            显示 overlay
          </nly-button>
        </nly-card-body>
      </nly-card>
    </nly-overlay>
    <nly-button class="mt-3" @click="show = !show">切换 overlay</nly-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      };
    }
  };
</script>

<!-- nly-overlay.vue -->

组件参数

查看源码

`<nly-overlay>`

v0.6.5+

<nly-overlay> props 参数
<nly-overlay> Slots
<nly-overlay> Events

props 参数

props (Click to sort Ascending)	类型	默认值	描述
`sidebar`	`Boolean`	`false`	设置为true,作为左侧菜单的罩层，会自动添加一个 id=sidebar-overlay 属性，当绑定指令 v-nly-sidebar-collapse之后，点击罩层会关闭左侧导航
`custom`	`Boolean`	`false`	作为其他组件的自带背景罩层
`dark`	`Boolean`	`false`	作为其他组件的自带背景罩层时罩层颜色
`show`	`Boolean`	`false`	设置 true 显示罩层
`variant`	`String`	`'light'`	罩层背景颜色, 可以是 `bg-` 类和 `bg-gradient-` 类，比如 variant='pink', varaint='gradient-pink' 。可选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-color`	`String`		罩层背景色， css 属性，会覆盖 `variant` prop
`opacity`	`Number` or `String`	`0.85`	透明度，可以设置 `0` 到 `1`
`blur`	`String`	`'2px'`	背景模糊度值
`rounded`	`Boolean` or `String`	`false`	是的罩层自适应包裹元素的形状，大小.可选 `true`, `'sm'`, `lg`, `circle`, `pill`, `top`, `right`, `bottom`, `left`
`no-center`	`Boolean`	`false`	设置true, 使罩层中 spinner 等元素不居中显示
`no-fade`	`Boolean`	`false`	禁用罩层动画
`spinner-type`	`String`	`'border'`	spinner 类型，可选 'border' and 'grow'
`spinner-variant`	`String`		spinner 主题颜色. 详情请查看 `nly-spinner` 组件
`spinner-small`	`Boolean`	`false`	设置 true, spinner 会渲染成小型 spinner
`overlay-tag`	`String`	`'div'`	罩层标签
`wrap-tag`	`String`	`'div'`	渲染成 wrapper 容器元素，即罩层会包裹其他元素和组件，也就是会渲染默认插槽中的元素和组件，如果设置了 `no-wrap` prop 为 true 会失效
`no-wrap`	`Boolean`	`false`	不渲染成 wrapper 容器元素，即罩层不会包裹其他元素和组件，也就是不会渲染默认插槽中的元素和组件 , `<nly-overlay>` 会渲染成 position relative 元素
`fixed`	`Boolean`	`false`	如果设置了 `no-wrap` prop 为 true, 设置 `fixed` 为 true, 会渲染成 fixed positioning 元素
`z-index`	`Number` or `String`	`10`	Z-index 属性

Slots

Slot Name	Scoped	Description
`overlay`		Custom content to replace the default overlay spinner
`default`	No	The content to be overlayed. The default slot is ignored if the prop `no-wrap` is set

Events

Event	Arguments	Description
`click` v0.6.7+	`event` - Native click event object	Emitted when overlay is clicked
`shown`		Emitted when the overlay has been shown
`hidden`		Emitted when the overlay has been hidden

单个组件导入

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

组件	导出名称	导出路径
`<nly-overlay>`	`NlyOverlay`	`nly-adminlte-vue`

例子

import { NlyOverlay } from 'nly-adminlte-vue'
Vue.component('nly-overlay', NlyOverlay)

导出作为插件

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

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

例子

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