Instantiating a single Material Design Component is straightforward. For example,
import { MDCRipple } from "@material/ripple";
const iconButtonRipple = new MDCRipple(document.querySelector(".mdc-icon-button"));
iconButtonRipple.unbounded = true;
When there are multiple components, MDC documentation recommends using querySelectorAll like this:
const iconButtonRipple = [].map.call(
document.querySelectorAll(".mdc-icon-button"),
function (el) {
return new MDCRipple(el);
}
);
However, the above instantiation does not work, and I don't know where to use the iconButtonRipple.unbounded = true line in this. The only workaround I have is to assign a special class to every icon button and instantiate it all one by one.
Can someone please help me instantiate this like the one mentioned in the documentation?
I would try running this:
const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => {
const ripple = new MDCRipple(el);
ripple.unbounded = true;
});
or
const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => new MDCRipple(el));
ripples.forEach(ripple => {
ripple.unbounded = true;
});