2.0.0 • Published 6 years ago

@moduware/morph-ripple v2.0.0

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

morph-ripple

License Published on webcomponents.org

General ripple animation element for Polymorph Components using LitElement base class.

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

<div class="ripple-wrapper">
  <h3>Click me!</h3>
  <morph-ripple></morph-ripple>
</div>
<p>
  You can click on the button below to see the ripple
</p>
<morph-button platform="android" filled big>android button</morph-button>
  • Morph-ripple demo on other elements.

    <template>
      <h3>Android morph-tabbar demo</h3>
      <morph-tabbar platform="android" selected="play">
        <morph-tabbar-item platform="android" name="play" not-selected-image="../img/play_android.svg" selected-image="../img/play_android_selected.svg"></morph-tabbar-item>
        <morph-tabbar-item platform="android" name="favorite" not-selected-image="../img/favorite_android.svg" selected-image="../img/favorite_android_selected.svg"></morph-tabbar-item>
        <morph-tabbar-item platform="android" name="mic" not-selected-image="../img/mic_android.svg" selected-image="../img/mic_android_selected.svg"></morph-tabbar-item>
      </morph-tabbar>
    </template>
  • The code below shows how we use it inside the elements.

<a href$="[[link]]" target$="[[target]]" rel$="[[relation]]">
  <slot></slot>
  <morph-ripple></morph-ripple>
</a>

Styling

Custom propertyDescriptionDefault
--ripple-colorColor of the ripple#2196f3

Further help

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