任意点对话框

一个材料设计对话框,同样为Anypoint平台所取名.

任意点网络组件是允许在开源项目中构建任意点启用的UI的组件集.

对话框将一项任务告知用户,可以包含关键信息,需要决策,或者涉及多个任务.

使用量

安装

npm install @anypoint-web-components/anypoint-dialog --save

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
      import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
      import '@anypoint-web-components/anypoint-button/anypoint-button.js';
    </script>
  </head>
  <body>
    <anypoint-dialog>
      <h2>Dialog title</h2>
      <anypoint-dialog-scrollable>
        <p>Long content...</p>
      </anypoint-dialog-scrollable>
      <div class="buttons">
        <anypoint-button data-dialog-dismiss>Cancel</anypoint-button>
        <anypoint-button data-dialog-confirm autofocus>OK</anypoint-button>
      </div>
    </anypoint-dialog>
    <script>
    {
      document.querySelector('anypoint-dialog').addEventListener('overlay-closed', (e) => {
        console.log(e.detail.canceled); // only when outside click or ESC key press
        console.log(e.detail.confirmed); // true when "dialog-confirm" was pressed
      });
    }
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
import '@anypoint-web-components/anypoint-button/anypoint-button.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <anypoint-dialog @overlay-closed="${this._dialogCloseHandler}">
      <h2>Dialog title</h2>
      <anypoint-dialog-scrollable>
        <p>Long content...</p>
      </anypoint-dialog-scrollable>
      <div class="buttons">
        <anypoint-button data-dialog-dismiss>Cancel</anypoint-button>
        <anypoint-button data-dialog-confirm autofocus>OK</anypoint-button>
      </div>
    </anypoint-dialog>
    `;
  }

  _dialogCloseHandler(e) {
    if (e.detail.confirmed) {
      // ...
    }
  }
}
customElements.define('sample-element', SampleElement);

动作按钮

带有"dialog-dispission"属性的按钮会解除被设定为虚假的"overlay-closed"事件的详细对象上带有"确认"属性的对话框.

有"dialog-confirm"属性的按钮会关闭对话框,在设定为真实的"overlay-closed"事件的详细对象上使用"confirmed"属性.

可滚动内容

如果对话框的内容可能超过窗口大小,则使用 anypoint-dialog-scrollable 作为内容包装. 它有额外的逻辑来保留内容. 否则则使用正版分录或段落.

模块对话框

设定“ 模式” 属性为 True 以在 scrim 上渲染对话框, ESC 按钮处理器和鼠标点击被禁用 . 用户只能使用对话框动作来解析对话框 .

发展

git clone https://github.com/anypoint-web-components/anypoint-dialog
cd anypoint-dialog
npm install

本地运行演示

npm start

运行测试

npm test