弧形覆盖密克逊

此混音符为 铁管行为 和LitElement合作过.

使用 ArcOverlayMixin 以执行可隐藏的元素 或显示,并在其他内容上显示。 包括可选 背景,可用于实施各种UI控制,包括: 对话与下放. 多个覆盖可以同时显示.

见 演示源代码 举个例子.

使用量

安装

npm i @advanced-rest-client/arc-overlay-mixin

示例

import { LitElement } from 'lit-element';
import { ArcOverlayMixin } from '@advanced-rest-client/arc-overlay-mixin';

class ArcOverlayImpl extends ArcOverlayMixin(LitElement) {
  static get properties() {
    return {
      myProp: { type: String }
    };
  }
}

关闭和取消

叠加可以通过关闭或取消来隐藏. 接近的区别 并取消是用户意图。 关闭一般意味着用户 承认了上面的内容。 默认情况下,它随时取消 或按出逃键。 这种行为是 与 nocancelonesckey 编辑 nocancelonoutsideclick 属性. close() 应明确称呼 当用户与覆盖中的控件交互时, 由执行者执行 键。 当对话框被取消时, 覆盖点火 "铁-覆被"事件. 打电话 preventDefault 用于防止 从关闭的覆盖.

定位

默认情况下,该元素的大小和位置将适合并位于 窗口。 您可以使用 CSS 手动定位和大小 。 见 ArcFitMixin。 。 。 .

后投弃

设定 withbackdrop 属性以显示覆盖后的背景. 本文附有背景 <body> 类型 <iron-overlay-backdrop>。 。 。 . 请参看其文件页的样式选项 . 还有, with-backdrop 将把焦点置于 轻度DOM。 覆盖 _focusableNodes 更能实现不同的行为.

限制

元素的样式是,通过设置其 z-index 属性。 您必须确保没有元素有堆叠上下文 较高 z-index 而非其母堆栈上下文。 你应该放这个 作为孩子的元素 <body> 只要可能,就应该.

发展

测试

npm run test

演示

npm start