The Materialize uses Waves, an external library to create ink effect outlined in Material Design. The below table mentions the available classes and their effects.
Following are the examples of using a wave effects on buttons.
S.N. | Class Name & Description |
---|---|
1 | waves-effect Put the wave effect on the control. |
2 | waves-light Put the wave effect as white colored. |
3 | waves-red Put the wave effect as red colored. |
4 | waves-green Put the wave effect as green colored. |
5 | waves-yellow Put the wave effect as yellow colored. |
6 | waves-orange Put the wave effect as orange colored. |
7 | waves-purple Put the wave effect as purple colored. |
8 | waves-teal Put the wave effect as teal colored. |
Example
materialize_waves.htm<!DOCTYPE html> <html> <head> <title>The Materialize Waves Effects Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h3>Waves Effects Demo</h3> <div class="collection waves-color-demo"> <div class="collection-item"> <code class=" language-markup">Default</code> <a href="#!" class="waves-effect btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-light</code> <a href="#!" class="waves-effect waves-light btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-red</code> <a href="#!" class="waves-effect waves-red btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-yellow</code> <a href="#!" class="waves-effect waves-yellow btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-orange</code> <a href="#!" class="waves-effect waves-orange btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-purple</code> <a href="#!" class="waves-effect waves-purple btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-green</code> <a href="#!" class="waves-effect waves-green btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-teal</code> <a href="#!" class="waves-effect waves-teal btn secondary-content">Click Me!</a> </div> </div> </body> </html>
Result
Verify the result.Waves Effects Demo
Default
waves-light
waves-red
waves-yellow
waves-orange
waves-purple
waves-green
waves-teal
No comments:
Post a Comment