Material design CSS 波纹不应用波纹效果答案

【问题标题】：Material design CSS ripple does not apply ripple effectMaterial design CSS 波纹不应用波纹效果
【发布时间】：2019-09-24 10:12:47
【问题描述】：

我正在尝试将 Material Design 涟漪效果应用到按钮，但在浏览器上我没有看到按钮应用涟漪效果，

使用波纹的代码是，

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>

【问题讨论】：

标签： html css material-design

【解决方案1】：

该按钮在脚本运行时不存在。

将脚本封装在 window.addEventListener('load', function(){ [...] }) 上是修复它的第一步。

其次，您有一个 <script> 和 src 属性，然后是代码。
两者不能混用。
只需写一个<script src="..."></script>，然后使用内联代码打开一个新的<script>。

注意：此答案假定所有文件都已正确加载。

【讨论】：

【解决方案2】：

在按钮标签中添加matRipple并导入MatRippleModule，您还可以更改 MatRippleColor

例如：

<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>

【讨论】：