材质设计图标按钮无法正常工作

Question

我正在使用Material Design的Web组件创建一个应用栏。这是我的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);