morph-ripple

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 property | Description | Default ---------------------------------|----------------------------------------|-------------------- --ripple-color | Color of the ripple | #2196f3

Further help

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