Пульсация Material Design появляется только на первом элементе HTML

Я пытаюсь реализовать FAB Material Design в Интернете. с волновым эффектом.

У меня есть следующий фиктивный 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>

Вот СКС:

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

А вот и JS:

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

У меня есть эффект пульсации, который правильно отображается на первой кнопке при нажатии, но по какой-то причине пульсация не появляется ни для одной из следующих кнопок.

Другими словами, кажется, что волновой эффект работает только для первого элемента, но не для последующих. Кто-нибудь знает, что я делаю неправильно?


javascript material-design floating-action-button material-components material-components-web
person Carson    schedule 23.07.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Документы для document.querySelector:

Метод Document querySelector() возвращает первый Element внутри документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null.

Если вы хотите выбрать несколько элементов, используйте document.querySelectorAll вместо.

Но конструктор MDCRipple, похоже, принимает только один элемент. Следовательно, вы можете использовать цикл или map< /a> чтобы активировать их все:

// 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
person blex    schedule 23.07.2020

arrow_upward
1
arrow_downward

Понятно! Я думаю, полезно также прочитать документацию. ????‍♂️????

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