Components / Library version 3.13.0

Installation

To use the component library, you need to get the files (currently only available as a Node package), make them available in your app (copying them to your build directory), then load the entry file. The library also relies on the Material Design icons, so you need to load these as well.

Installing Core Library

  1. Add the package:

    npm i @watermarkinsights/ripple
  2. Include the icons: 
    <link href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css" rel="stylesheet">

  3. Import the loader and polyfill functions:

    import { applyPolyfills, defineCustomElements } from '@watermarkinsights/ripple/dist/loader';

  4. Call them to load the components:

    applyPolyfills().then(() => {
  defineCustomElements();
});

Installing React Wrappers

If your project uses React, install this instead of the core library to use the Ripple component the React way. The components' names and props will be CamelCased rather than hyphenated, and you will be able to hook to events directly on the component (e.g. onWmEventTriggered=...), rather than .addEventListener("wmEventTriggered", ...).

  1. Add the package:

    npm i @watermarkinsights/ripple-react
  2. Include the icons: 
    <link href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css" rel="stylesheet">

  3. Import the components at the top of your file:

    import { WmButton, WmSelect, WmOption } from '@watermarkinsights/ripple-react';

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.