实例化多个 Material 设计组件

Question

实例化单个 Material 设计组件非常简单。例如，

import { MDCRipple } from "@material/ripple";
const iconButtonRipple = new MDCRipple(document.querySelector(".mdc-icon-button"));
iconButtonRipple.unbounded = true;

当有多个组件时，MDC 文档建议这样使用 querySelectorAll：

const iconButtonRipple = [].map.call(
    document.querySelectorAll(".mdc-icon-button"),
    function (el) {
        return new MDCRipple(el);
    }
);

但是，上面的实例化不起作用，我不知道在哪里使用iconButtonRipple.unbounded = true行。我唯一的解决方法是为每个图标按钮分配一个特殊的 class 并将其一一实例化。

有人可以帮我像文档中提到的那样实例化吗？

Answer 1

我会尝试运行这个：

const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => {
  const ripple = new MDCRipple(el);
  ripple.unbounded = true;
});

或

const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => new MDCRipple(el));
ripples.forEach(ripple => {
  ripple.unbounded = true;
});

实例化多个 Material 设计组件

Instantiating Multiple Material Design Components

javascript

material-components-web