mirror of
https://github.com/material-components/material-web.git
synced 2024-09-21 10:38:19 +03:00
6746d0f685
This directive encapsulates the event listeners necessary to drive the ripple component inside of an ElementPart directive, instead of relying on ActionController and ActionElement.
The ripple directive can take a Promise from `queryAsync`, or a function that returns a Ripple or a Promise that resolves to a ripple
Before:
```ts
// event listeners inherited from ActionElement
html`
<md-button
@pointerdown=${this.handlePointerDown}
@pointerleave=${this.handlePointerLeave}
@focus=${this.handleFocus}
...
>`
```
After:
```ts
html`
<md-button ${ripple(this.rippleElementPromise)}>
`
```
or
```
<md-button ${ripple(() => this.rippleElement)
```
or
```
<md-button ${ripple(() => {this.renderRipple = true; return this.rippleElementPromise})
```
PiperOrigin-RevId: 492300868
|
||
|---|---|---|
| .. | ||
| lib | ||
| _ripple-theme.scss | ||
| directive.ts | ||
| ripple.ts | ||