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+

props 参数

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

Slots

Slot NameScopedDescription
overlay Custom content to replace the default overlay spinner
default NoThe content to be overlayed. The default slot is ignored if the prop `no-wrap` is set

Events

EventArgumentsDescription
click v0.6.7+
  1. 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>NlyOverlaynly-adminlte-vue

例子

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

导出作为插件

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

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

例子

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