@advanced-rest-client/bottom-sheet

Bottom sheets slide up from the bottom of the screen to reveal more content.

Usage no npm install needed!

<script type="module">
  import advancedRestClientBottomSheet from 'https://cdn.skypack.dev/@advanced-rest-client/bottom-sheet';
</script>

README

bottom-sheet element

Bottom sheets slide up from the bottom of the screen to reveal more content.

Example

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

Published on NPM

Tests and publishing

Usage

Installation

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

In an html file

<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>

In a 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);

In a Polymer 3 element

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);

Development

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

Running the demo locally

npm start

Running the tests

polymer test