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