Question

我正在尝试将材质设计的波纹效果应用于按钮，但是在浏览器上我没有看到对按钮应用波纹效果，

正在使用涟漪的代码是

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>

Answer 1

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

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

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

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

Answer 2

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

例如：

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

材质设计CSS波纹不会应用波纹效果

2 个答案: