被否决

使用 @anypoint-web-components/awc 模块.

底片从屏幕下方滑出以揭示更多内容.

示例

<bottom-sheet nopadding>
  <paper-item>Action #1</paper-item>
  <paper-item>Action #2</paper-item>
  <paper-item>Action #3</paper-item>
</bottom-sheet>

使用量

安装

npm install --save @advanced-rest-client/bottom-sheet

在 html 文件内

<html>
  <head>
    <script type="module">
      import './node_modules/@advanced-rest-client/bottom-sheet/bottom-sheet.js';
    </script>
  </head>
  <body>
    <bottom-sheet>
      <paper-item>Action #1</paper-item>
      <paper-item>Action #2</paper-item>
      <paper-item>Action #3</paper-item>
    </bottom-sheet>
    <paper-button>Open menu</paper-button>
    <script>
    {
      document.querySelector('paper-button').addEventListener('click', () => {
        document.querySelector('bottom-sheet').opened = true;
      });
    }
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/bottom-sheet/bottom-sheet.js';

class SampleElement extends LitElement {
  static get properties() {
    return {
      menuOpened: { type: Boolean }
    }
  }
  render() {
    return html`
    <bottom-sheet .opened="${this.menuOpened}">
      <paper-item>Action #1</paper-item>
      <paper-item>Action #2</paper-item>
      <paper-item>Action #3</paper-item>
    </bottom-sheet>
    `;
  }
}
customElements.define('sample-element', SampleElement);

在多聚体3元素中

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@advanced-rest-client/bottom-sheet/bottom-sheet.js';

class SampleElement extends PolymerElement {
  static get properties() {
    return {
      menuOpened: { type: Boolean, value: false }
    }
  }
  static get template() {
    return html`
    <bottom-sheet opened?="{{menuOpened}}">
      <paper-item>Action #1</paper-item>
      <paper-item>Action #2</paper-item>
      <paper-item>Action #3</paper-item>
    </bottom-sheet>
    `;
  }
}
customElements.define('sample-element', SampleElement);

发展

git clone https://github.com/advanced-rest-client/bottom-sheet
cd bottom-sheet
npm install

本地运行演示

npm start

运行测试

polymer test