# @material/mwc-ripple

> Material Design ripple web component

Latest version **0.27.0** (published 2022-08-12) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @material/mwc-ripple
pnpm add @material/mwc-ripple
yarn add @material/mwc-ripple
bun add @material/mwc-ripple
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.27.0 |
| Published | 2022-08-12 |
| First published | 2018-05-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 74.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11240 |
| Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material design, web components, ripple |

## Links

- npm: https://www.npmjs.com/package/@material/mwc-ripple
- Repository: https://github.com/material-components/material-components-web-components
- Homepage: https://github.com/material-components/material-components-web-components#readme
- Issues: https://github.com/material-components/material-components-web-components/issues
- npm.io page: https://npm.io/package/@material/mwc-ripple

## Dependencies (5)

- [lit](https://npm.io/package/lit.md) ^2.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.1
- [@material/dom](https://npm.io/package/@material/dom.md) =14.0.0-canary.53b3cad2f.0
- [@material/ripple](https://npm.io/package/@material/ripple.md) =14.0.0-canary.53b3cad2f.0
- [@material/mwc-base](https://npm.io/package/@material/mwc-base.md) ^0.27.0

## Recent versions

- 0.27.0 (latest) — 2022-08-12
- 0.26.0-canary.0af8ade5.0 (canary) — 2022-02-07
- 0.26.1 — 2022-05-09
- 0.26.0 — 2022-05-03
- 0.26.0-canary.69ba13b7.0 — 2022-01-19
- 0.26.0-canary.893fc857.0 — 2022-01-07
- 0.26.0-canary.2afff08e.0 — 2022-01-06
- 0.26.0-canary.b9d35b69.0 — 2022-01-05
- 0.26.0-canary.e1bcf14e.0 — 2021-12-28
- 0.26.0-canary.cf7ba5a9.0 — 2021-12-10
- 0.26.0-canary.3b2452cc.0 — 2021-12-09
- 0.26.0-canary.0547aeeb.0 — 2021-12-06
- 0.26.0-canary.345c2bb9.0 — 2021-12-02
- 0.26.0-canary.8067ce28.0 — 2021-11-04
- 0.26.0-canary.448f6cb9.0 — 2021-11-04
- … 708 more at https://npm.io/package/@material/mwc-ripple/versions

## README

# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)

> 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](https://material.io/design/interaction/states.html)

[Demo](https://material-components.github.io/material-web/demos/ripple/)

## Installation

```sh
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](https://github.com/material-components/material-components-web-components#quick-start)
> for detailed instructions.

## Example Usage

### Standard

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/ripple/images/standard.gif)

```html
<mwc-ripple></mwc-ripple>
```

### Unbounded

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/ripple/images/unbound.gif)

```html
<mwc-ripple unbounded></mwc-ripple>
```

<!--
TODO(dfreedm): add examples when list-item has activated and selected states
### Selected

```html
<mwc-ripple selected></mwc-ripple>
```

### Activated

```html
<mwc-ripple activated></mwc-ripple>
```
-->

## API

### Properties/Attributes

Name | Type | Default | Description
---- | ---- | ------- | -----------
`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.
`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.
`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.
`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.
`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.
`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.

### Methods

| Name | Description
| ---- | -----------
| `startPress(event?: Event) => void` | Begin 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() => void` | End the `press` state of the ripple.
| `startFocus() => void` | Begin the `focus` state of the ripple.
| `endFocus() => void` | End the `focus` state of the ripple.
| `startHover() => void` | Begin the `hover` state of the ripple.
| `endHover() => void` | End the `hover` state of the ripple.


### CSS Custom Properties

Name                             | Default                                 | Description
-------------------------------- | --------------------------------------- | -----------
`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.
`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.
`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.
`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.
`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is "selected". This opacity is added to `press`, `hover`, and `focus` states.
`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is "activated". This opacity is added to `press`, `hover`, and `focus` states.
`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.

---
_Source: https://npm.io/package/@material/mwc-ripple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._