menu

介绍

波纹效果是一个外部库,主要用于实现Material Design中的点击效果。

波纹效果

应用波纹效果

给按钮添加波纹效果,你只要将waves-effect类放到按钮中。如果你想这个波纹效果更白,增加waves-effect waves-light作为按钮的类。


  <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      

自定义

这里有一些方法可以自定义波纹效果,您可以使用预创建的类,也可以通过创建一个新类来定义自己的颜色

可用的颜色

要使用这些,只需添加相应的类到您的按钮。玩转按钮背景颜色的改变和波纹效果的应用来创建更酷的东西。


    <a href="#!" class="btn waves-effect waves-teal">Send</a>
          
Default发送
waves-light发送
waves-red发送
waves-yellow发送
waves-orange发送
waves-purple发送
waves-green发送
waves-teal发送
自定义颜色

如果你想要的颜色已经不可用,您可以轻松地创建自己的波纹效果通过创建一个自定义的CSS类,看看下面的例子,我们添加了一个波浪棕色效果。


    /*
    When creating your CSS selector,
    change "brown" to something of your choosing
    */
    .waves-effect.waves-brown .waves-ripple {
     /* The alpha value allows the text and background color
     of the button to still show through. */
      background-color: rgba(121, 85, 72, 0.65);
    }
          

圆形

如果你想应用一个波纹效果到非矩形的元素中,这里一个选项是关于圆形波纹效果的。除了要增加waves-effect类,还要增加waves-circle类。

HTML 标记

  <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
    <i class="material-icons">add</i>
  </a>
          
Defaultadd
waves-lightadd