@moduware/morph-overlay NPM

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

@polymer/lit-element @moduware/lit-utils

@infinitebrahmanuniverse/nolb-_mod @everything-registry/sub-chunk-613 @zalastax/nolb-_mod

1.1.1

5 years ago