0

波及効果のあるマテリアル デザイン FABを Web 上に実装しようとしています。

次のダミー 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'));

クリックしたときに最初のボタンに波紋効果が適切に表示されるようにしましたが、何らかの理由で、後続のボタンのいずれにも波紋が表示されません。

言い換えれば、波及効果は最初の要素に対してのみ機能し、それ以降の要素には機能しないようです。私が間違っていることを誰かが知っていますか？

4

2 に答える 2