0.27.0 • Published 2 years ago

@material/mwc-ripple v0.27.0

Weekly downloads
10,927
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-ripple> Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect.

Material Design Guidelines: States

Demo

Installation

npm install @material/mwc-ripple

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example Usage

Standard

npm.io

<mwc-ripple></mwc-ripple>

Unbounded

npm.io

<mwc-ripple unbounded></mwc-ripple>

API

Properties/Attributes

NameTypeDefaultDescription
primarybooleanfalseWhen true, sets the ripple color to --mdc-theme-primary. Will be overridden by --mdc-ripple-color if set.
accentbooleanfalseWhen true, sets the ripple color to --mdc-theme-secondary. Will be overridden by --mdc-ripple-color if set.
unboundedbooleanfalseWhen true, the ripple will flow outside the component in a circle.
activatedbooleanfalseSet true when the container of the ripple should be in an activated state.
selectedbooleanfalseSet true when the container of the ripple should be in a selected state.
disabledbooleanfalseSet true to disable the ripple when the container of the ripple is disabled.

Methods

NameDescription
startPress(event?: Event) => voidBegin the press state of the ripple. Optional Event will be used to determine the beginning coordinates of the ripple animation when unbounded is false.
endPress() => voidEnd the press state of the ripple.
startFocus() => voidBegin the focus state of the ripple.
endFocus() => voidEnd the focus state of the ripple.
startHover() => voidBegin the hover state of the ripple.
endHover() => voidEnd the hover state of the ripple.

CSS Custom Properties

NameDefaultDescription
--mdc-ripple-colornpm.io #000Color of the ripple will have when activated.
--mdc-ripple-press-opacity0.12Opacity of the ripple when pressed.
--mdc-ripple-hover-opacity0.04Opacity of the ripple when hovered.
--mdc-ripple-focus-opacity0.12Opacity of the ripple when focused.
--mdc-ripple-selected-opacity0.08Opacity of the ripple when the host component is "selected". This opacity is added to press, hover, and focus states.
--mdc-ripple-activated-opacity0.12Opacity of the ripple when the host component is "activated". This opacity is added to press, hover, and focus states.
--mdc-ripple-z-index0Z-index of the ripple.
0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

2 years ago

0.25.2

2 years ago

0.25.1

3 years ago

0.25.0

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

3 years ago

0.19.0

3 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.1

4 years ago

0.11.0

4 years ago

0.10.0

4 years ago

0.9.1

4 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago