@moduware/morph-button

morph-button

A lighting fast custom web component button made with LitElement base class that looks native and morphs automatically depending on current auto-detected mobile OS whether IOS or Android.

Morph Components are now changing from polymer base class to lit-element base class. Most of the components master branch are now using lit-element. Most of the publish Morph Components on the npm registry are also using lit-element as base class.

morph-button changes its look based on when it is either IOS device or Android device.

<morph-button platform="android" filled big color="green">button android</morph-button>
<br>
<morph-button platform="ios" filled big color="green">button ios</morph-button>

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

Here is a quick demo of morph button

<template>
  <p><morph-button platform="ios" filled big color="green">Button iOS</morph-button></p>
  <p><morph-button platform="android" filled big color="green">Button Android</morph-button></p>
</template>

Attributes

Custom Attribute	Type	Description	Default
big	Boolean	Identifies if the button is big.	False
filled	Boolean	Identifies if the button is filled.	False
flat	Boolean	Identifies if the button has no rounded corners.	False
color	String	Identifies the color of the button	'blue'
active IOS only	Boolean	Shows if the button is in active state.	False
rounded IOS only	Boolean	Identifies if the button is rounded.	False
raised Android only	Boolean	Identifies if the button is raised.	False

• To use default colors, include morph-shared-colors in the morph-button

Styling

-For Android platform;

Custom property	Description	Default
--color	Color of the button	#0076FF
--ripple-color	Color of the ripple effect on button	var(--color)
--active-color--background	Background color of active button	#0D82DF
--filled-text-color	Text color of the filled button	white
--font-size	Font size of the button	14px

-For IOS platform;

Custom property	Description	Default
--color	Color of the button	#007aff
--active-color--background	Background color of active button	rgba(0, 122, 255, 0.15)
--filled-text-color	Text color of the filled button	white
--font-size	Font size of the button	14px

Further help

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