Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@material/mwc-ripple

Package Overview
Dependencies
Maintainers
21
Versions
723
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/mwc-ripple

Material Design ripple web component

  • 0.23.0-canary.c6e3060c.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18K
increased by13.42%
Maintainers
21
Weekly downloads
 
Created
Source

<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

<mwc-ripple></mwc-ripple>

Unbounded

<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-color #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.

Keywords

FAQs

Package last updated on 19 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc