भौतिकवाद - लहरें
सामग्री डिजाइन में उल्लिखित स्याही के प्रभाव को बनाने के लिए मटीरियल एक बाहरी पुस्तकालय का उपयोग करता है। निम्न तालिका में उपलब्ध वर्गों और उनके प्रभावों का उल्लेख है।
| अनु क्रमांक। | कक्षा का नाम और विवरण |
|---|---|
| 1 | waves-effect नियंत्रण पर एक लहर प्रभाव लागू होता है। |
| 2 | waves-light एक सफेद रंग की लहर प्रभाव लागू होता है। |
| 3 | waves-red एक लाल रंग की लहर प्रभाव लागू करता है। |
| 4 | waves-green हरे रंग की लहर प्रभाव लागू करता है। |
| 5 | waves-yellow एक पीले रंग की लहर प्रभाव लागू करता है। |
| 6 | waves-orange एक नारंगी रंग की लहर प्रभाव लागू करता है। |
| 7 | waves-purple एक बैंगनी रंग की लहर प्रभाव लागू करता है। |
| 8 | waves-teal एक चैती रंग की लहर प्रभाव लागू करता है। |
उदाहरण
निम्नलिखित बटन पर तरंग प्रभाव का उपयोग करने का एक उदाहरण है।
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>परिणाम
परिणाम सत्यापित करें।