2.0.0 • Published 6 years ago

@moduware/morph-button v2.0.0

Weekly downloads
1
License
Apache-2.0
Repository
github
Last release
6 years ago

morph-button

License Published on webcomponents.org

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 AttributeTypeDescriptionDefault
bigBooleanIdentifies if the button is big.False
filledBooleanIdentifies if the button is filled.False
flatBooleanIdentifies if the button has no rounded corners.False
colorStringIdentifies the color of the button'blue'
active IOS onlyBooleanShows if the button is in active state.False
rounded IOS onlyBooleanIdentifies if the button is rounded.False
raised Android onlyBooleanIdentifies if the button is raised.False
  • To use default colors, include morph-shared-colors in the morph-button

Styling

-For Android platform;

Custom propertyDescriptionDefault
--colorColor of the button#0076FF
--ripple-colorColor of the ripple effect on buttonvar(--color)
--active-color--backgroundBackground color of active button#0D82DF
--filled-text-colorText color of the filled buttonwhite
--font-sizeFont size of the button14px

-For IOS platform;

Custom propertyDescriptionDefault
--colorColor of the button#007aff
--active-color--backgroundBackground color of active buttonrgba(0, 122, 255, 0.15)
--filled-text-colorText color of the filled buttonwhite
--font-sizeFont size of the button14px

Further help

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