भौतिककृत - बंधनेवाला
विभिन्न प्रकार के समझौते प्रदर्शित करने के लिए विभिन्न पूर्वनिर्धारित दृश्य और व्यवहारिक वृद्धि को लागू करने के लिए मटेरियल विभिन्न सीएसएस कक्षाएं प्रदान करता है। निम्न तालिका में उपलब्ध वर्गों और उनके प्रभावों का उल्लेख है।
| अनु क्रमांक। | कक्षा का नाम और विवरण |
|---|---|
| 1 | collapsible एक तत्व को संक्षिप्त भौतिक घटक के रूप में पहचानता है। उल तत्व के लिए आवश्यक है। |
| 2 | collapsible-header एक अनुभाग शीर्षलेख के रूप में div सेट करता है। |
| 3 | collapsible-body एक अनुभाग सामग्री कंटेनर के रूप में div सेट करता है। |
| 4 | popout एक पॉपआउट बंधनेवाला बनाता है। |
| 5 | active एक अनुभाग खोलता है। |
| 6 | expandable विस्तार के रूप में एक बंधनेवाला घटक को चिह्नित करता है। |
| 7 | accordion समझौते के रूप में एक बंधनेवाला घटक को चिह्नित करता है। |
निम्नलिखित विभिन्न तरीकों से समझौते का उपयोग करने का एक उदाहरण है।
उदाहरण
materialize_collapsible.htm
<html>
<head>
<title>The Materialize Collapsible 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">
<h4>Simple Accordion</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Popout Accordion</h4>
<ul class = "collapsible popout" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Accordion with Preselected Section</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header active">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Expandables</h4>
<ul class = "collapsible" data-collapsible = "expandable">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
</body>
</html>परिणाम
परिणाम सत्यापित करें।