Ripple
A ripple effect based on Material Design.
Ripple effects can be used to give more feedback to clickable areas.
Demo
Tap elements to trigger the ripple effect!
Heading
Text paragraph in one sentence displayed across two lines
Heading
Text paragraph in one sentence displayed across two lines
Components
-
ripple
Wrapper component to set up ripple effects. Add content as children.
[Insert slotted content]Attributes
centred Should the ripple effect always emit from the center (true) or from the clicked position (default/false)
Style variables
| --ripple-highlight-color | Overlay color when hovering the component. Set to "transparent" to disable hover effect. |
| --ripple-pressed-color | The base color of the ripple effect itself. |