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

@material/ripple

Package Overview
Dependencies
Maintainers
15
Versions
1701
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/ripple

The Material Components for the web Ink Ripple effect for web element interactions

  • 14.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
967K
increased by4.48%
Maintainers
15
Weekly downloads
 
Created

What is @material/ripple?

@material/ripple is a package from the Material Design Components (MDC) library that provides a ripple effect for interactive elements. This effect is commonly used in Material Design to indicate the point of touch or click, giving users visual feedback.

What are @material/ripple's main functionalities?

Basic Ripple

This code initializes a basic ripple effect on a button element with the class 'mdc-button'.

const MDCRipple = require('@material/ripple').MDCRipple;
const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

Unbounded Ripple

This code initializes an unbounded ripple effect, which means the ripple effect will extend beyond the bounds of the element.

const MDCRipple = require('@material/ripple').MDCRipple;
const unboundedRipple = new MDCRipple(document.querySelector('.mdc-ripple-surface'));
unboundedRipple.unbounded = true;

Ripple with Custom Color

This code initializes a ripple effect with a custom color on a button element. The ripple color is set to a semi-transparent red.

const MDCRipple = require('@material/ripple').MDCRipple;
const customRipple = new MDCRipple(document.querySelector('.mdc-button'));
customRipple.root.style.setProperty('--mdc-ripple-color', 'rgba(255, 0, 0, 0.3)');

Other packages similar to @material/ripple

Keywords

FAQs

Package last updated on 28 Apr 2022

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