@polymer/paper-ripple NPM

<paper-ripple>

paper-ripple provides a visual effect that other paper elements can use to simulate a rippling effect emanating from the point of contact. The effect can be visualized as a concentric circle with motion.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-ripple

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-ripple/paper-ripple.js';
    </script>
  </head>
  <body>
    <div style="position: relative">
      <paper-ripple>Click here</paper-ripple>
    </div>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-ripple/paper-ripple.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <div style="position: relative">
        <paper-ripple>Click here</paper-ripple>
      </div>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-ripple
cd paper-ripple
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

web-components polymer ripple

@polymer/iron-a11y-keys-behavior @polymer/polymer

@api-modeling/modeling-project-ui zagen-zagen @infinitebrahmanuniverse/nolb-_pol @everything-registry/sub-chunk-731 globular-mvc homeassistant-frontend-raceland intervention-pages live-localizer material-icon-component paper-autocomplete paper-behaviors paper-chip @advanced-rest-client/paper-autocomplete @advanced-rest-client/paper-chip-input @advanced-rest-client/projects-menu @adzadzadz/paper-autocomplete @advanced-rest-client/auth-methods @advanced-rest-client/anypoint-signin @aspen-elements/paper-bottom-sheet @aspen-elements/paper-chip @anviltech/wuf-poly-paper-elements @api-components/anypoint-signin @api-components/authorization-panel @arkihillel/paper-chip @things-factory/modeller-ui @things-real/shell @cromwellian/granite-qrcode-scanner @cwmr/paper-autocomplete @cwmr/paper-search @google-web-components/google-signin @casper2020/casper-wizard @elifent/paper-avatar @elifent/paper-datepicker @firefly-elements/firefly-tags @hillelarki/paper-chip @hatiolab/things-shell @neovici/paper-autocomplete @neovici/paper-autocomplete-chips @neogrup/nc-items-grid @neogrup/nc-network-status @neogrup/nc-search @kubex/cube-action @longlost/app-account @longlost/app-camera @longlost/app-carousel @longlost/app-carousels @longlost/app-inputs @lrnwebcomponents/paper-audio-player @lrnwebcomponents/paper-contact @lrnwebcomponents/paper-search @lrnwebcomponents/lrndesign-audio-player @lrnwebcomponents/eco-json-schema-form @longlost/app-shell @longlost/cms-events @longlost/cms-images @longlost/edit-input @lucentray/pine-web-components @rpapeters/paper-autocomplete @operato/color-picker @polymer/paper-behaviors @polymer/paper-checkbox @polymer/paper-dropdown-menu @polymer/paper-elements @spriteful/app-account @spriteful/app-carousel @spriteful/spriteful-account @spriteful/spriteful-carousel @spriteful/asg-search @spriteful/asg-shop-card-details @spriteful/asg-shop-card-item @spriteful/spriteful-edit-input @spriteful/cms-events @spriteful/cms-images @spriteful/edit-input @spriteful/meta-waves-elements @smyd/app-imgs @smyd/app-inputs @smyd/app-shell @smyd/asg-search @smyd/asg-shop-card-details @smyd/asg-shop-card-item @smyd/cms-elements @smyd/cms-events cl-polymer-button cl-polymer-dropdown-trigger cl-polymer-icon-button ct-polymer-text-dropdown-trigger

4 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago