morph-overlay

Overlay that morphs for current mobile OS

The morph components is currently moving to use lit-element as base class. Most of the components in the master branch are already doing this and the old version using the polymer base class are found in the polymer-3.0 branch.

Getting Started

For the information about how to clone the desired repository, running the local server and testing, please refer to Polymorph elements getting started docs at the end of this repository.

Demo

<h4>Android morph-overlay interactive demo. Click the button to see overlay.</h4>
<morph-overlay id="androidOverlay" platform="android" onclick="closeAndroidOverlay()"></morph-overlay>
<morph-button platform="android" filled onclick="openAndroidOverlay()">Show Overlay</morph-button>

• Here is a quick demo of the morph-overlay element

  <template>
    <h4>Android morph-overlay demo</h4>
    <morph-overlay id="androidOverlay" platform="android" onclick="closeAndroidOverlay()"></morph-overlay>
    <morph-button filled onclick="openAndroidOverlay()">Show Overlay</morph-button>
  </template>

Attributes

| Custom Attribute | Type | Description | Default | |:--------------------------:|:-------:|:------------------------------------------------------------------------------:|:---------------------------------:| | platform | String | Name of the platform, get assigned automatically by the morph element. | Either andorid or ios | | open | Boolean | Shows the state of the element, if it is open or not. | false |

Styling

-For Android platform;

Custom property | Description | Default ---------------------------------|----------------------------------------|-------------------- --android-background-color | Background color of overlay | rgba(0,0,0,0.2)

-For IOS platform;

Custom property | Description | Default ---------------------------------|----------------------------------------|-------------------- --ios-background-color | Background color of overlay | rgba(0,0,0,0)

Further help

For more information on how to install and run test please go here - Polymorph elements getting started