You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 13, 2025. It is now read-only.
MDC Ripple provides the Javascript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
40
-
41
-
MDC Ripple also works without javascript, where it gracefully degrades to a simpler CSS-Only implementation.
12
+
MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
13
+
14
+
MDC Ripple also works without JavaScript, where it gracefully degrades to a simpler CSS-Only implementation.
For many components, providing a ripple interaction is straightforward.
54
+
### Adding Ripple styles
60
55
61
-
Let's say we have a `surface` element that represents a basic surface.
56
+
General notes:
62
57
63
-
```html
64
-
<divclass="surface"tabindex="0">
65
-
<p>A surface</p>
66
-
</div>
67
-
```
58
+
* Ripple mixins can be applied to a variety of elements representing interactive surfaces. These mixins are also used by other MDC Web components such as Button, FAB, Checkbox, Radio, etc.
59
+
* Surfaces for bounded ripples should have `overflow` set to `hidden`, while surfaces for unbounded ripples should have it set to `visible`
60
+
* When a ripple is successfully initialized on an element using JS, it dynamically adds a `mdc-ripple-upgraded` class to that element. If ripple JS is not initialized but Sass mixins are included on the surface, the ripple will still work, but it uses a simpler, CSS-only implementation which relies on `:hover`, `:focus`, and `:active`.
68
61
69
-
We also have some basic styles for our surface that
70
-
use [mdc-elevation](../mdc-elevation) to raise it up off of its background.
62
+
#### Sass API
71
63
72
-
```scss
73
-
@import"@material/elevation/mixins";
64
+
These APIs implicitly use pseudo-elements for the ripple effect: `::before` for the background, and `::after` for the foreground.
65
+
All three of the following mixins are mandatory in order to fully style the ripple effect; from that point, it is feasible to further override only the parts necessary (e.g. `mdc-ripple-color` specifically) for variants of a component.
74
66
75
-
.surface {
76
-
@includemdc-elevation(2);
77
-
78
-
position: relative;
79
-
border-radius: 2px;
80
-
text-align: center;
81
-
/* Indicate to user element is interactive. */
82
-
cursor: pointer;
83
-
```
67
+
Mixin | Description
68
+
--- | ---
69
+
`mdc-ripple-surface` | Adds base styles for a ripple surface
70
+
`mdc-ripple-color($color, $opacity)` | Adds styles for the color and opacity of the ripple effect
71
+
`mdc-ripple-radius($radius)` | Adds styles for the radius of the ripple effect,<br>for both bounded and unbounded ripples
0 commit comments