javascript - Material Design 图标按钮无法正常工作

Question

我正在创建一个应用程序栏 Material Design使用他们的网络组件。这是我的 HTML:

<header class=" mdc-top-app-bar material-icons">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__navigation-icon--unbounded">menu</button><span class="mdc-top-app-bar__title">San Francisco, CA</span> </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item--unbounded" aria-label="Download">file_download</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item--unbounded" aria-label="Print this page">print</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item--unbounded" aria-label="Bookmark this page">bookmark</button>
        </section>
    </div>
</header>

我的 JS 文件是:

 const topAppBarElement = document.querySelector('.mdc-top-app-bar');
 const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);
 const iconButtonRipples = [].map.call(document.querySelectorAll('.mdc-icon-button'), function(el) {
     return new mdc.ripple.MDCRipple.attachTo(el);
 });
 iconButtonRipples.unbounded = true;

如何解决这个问题？

Answer 1

使用此代码:

<header class=" mdc-top-app-bar material-icons">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item">menu</button><span class="mdc-top-app-bar__title">San Francisco, CA</span> </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</button>
        </section>
    </div>
</header>

还有:

const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);