Пульсация плохой работы в кнопке значка в веб-компоненте материала - PullRequest
Новая
       77

Пульсация плохой работы в кнопке значка в веб-компоненте материала

0 голосов
/ 11 февраля 2020

Я создаю панель приложения с Material.io 

<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;

enter image description here

Как я могу решить эту проблему?

1 Ответ

1 голос
/ 12 февраля 2020

Используйте следующие коды: 

<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);
...