Материал дизайн CSS рябь не применяет волновой эффект - PullRequest
Новая
       11

Материал дизайн CSS рябь не применяет волновой эффект

0 голосов
/ 24 сентября 2019

Я пытаюсь применить волновой эффект дизайна материала к кнопке, но в браузере не вижу никакого примененного к кнопке волнового эффекта,

Код, использующий пульсацию, 

btn_ripple = document.querySelector('.mdc-button');
       mdc.ripple.MDCRipple.attachTo(btn_ripple);

Я пробовал приведенное ниже, но ни один из них не работает, 

mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));

Я не использую узел для связывания. 

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="masterCSS.css" rel="stylesheet" type="text/css">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
      <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">

       btn_ripple = document.querySelector('.mdc-button');
       mdc.ripple.MDCRipple.attachTo(btn_ripple);

       mdc.autoInit();

      MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work

      const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
       </script>

    </head>
    <body>

    <div class="header">

    </div>
    <button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>

    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 24 сентября 2019

Кнопка не существует во время выполнения сценария.

Оборачивание сценария в window.addEventListener('load', function(){ [...] }) - это первый шаг для его исправления.

Во-вторых, у вас есть<script> с атрибутом src, а затем с кодом.
Вы не можете смешивать оба.
Просто напишите <script src="..."></script> и затем откройте новый <script> со встроенным кодом.

Примечание : в этом ответе предполагается, что все файлы загружены правильно.

0 голосов
/ 24 сентября 2019

Добавить matRipple в тег кнопки и импортировать MatRippleModule. Вы также можете изменить MatRippleColor

, например: 

<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...