Material 设计波纹仅出现在第一个 HTML 元素上

Question

我正尝试在 Web 上实施 Material Design FABs 连锁反应。

我有以下假人 HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="bundle.css">
    </head>
    <body>
        <button class="mdc-fab" id="first" aria-label="First">
            <div class="mdc-fab__ripple"></div>
        </button>
        <button class="mdc-fab" id="second" aria-label="Second">
            <div class="mdc-fab__ripple"></div>
        </button>
        <button class="mdc-fab" id="third" aria-label="Third">
            <div class="mdc-fab__ripple"></div>
        </button>
        <script src="bundle.js" async></script>
    </body>
</html>

这是 SCSS：

@use "@material/fab/mdc-fab";
@use "@material/fab";

这是 JS：

import {MDCRipple} from '@material/ripple';
const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));

当我点击第一个按钮时，涟漪效果可以正确显示，但出于某种原因，涟漪效果不会出现在任何后续按钮上。

换句话说，涟漪效应似乎只对第一个元素起作用，对后面的元素不起作用。有谁知道我做错了什么？

Answer 1

document.querySelector 的文档：

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

如果您想 select 多个元素，请改用 document.querySelectorAll。

但是 MDCRipple 构造函数似乎只接受一个元素。因此，您可以使用循环或 map 来激活它们：

// Transform the NodeList to an Array using the ES6 spread syntax (...)
const buttons = [...document.querySelectorAll('.mdc-fab')]; 
const fabRipples = buttons.map(btn => new MDCRipple(btn)); // An Array of Ripple objects

Answer 2

知道了！我想阅读 documentation 也有帮助。 ‍♂️

const fabRipple = [].map.call(document.querySelectorAll('.mdc-fab'), function(el) {
    return new MDCRipple(el);
});

Material 设计波纹仅出现在第一个 HTML 元素上

Material Design ripple only appearing on first HTML element

javascript

material-design

floating-action-button

material-components

material-components-web