सामग्री डिजाइन लाइट - स्विच
एमडीएल विभिन्न पूर्वनिर्धारित दृश्य और व्यवहार संवर्द्धन लागू करने और स्विच के रूप में विभिन्न प्रकार के चेकबॉक्स प्रदर्शित करने के लिए सीएसएस कक्षाओं की एक श्रृंखला प्रदान करता है। निम्न तालिका उपलब्ध वर्गों और उनके प्रभावों को सूचीबद्ध करती है।
| अनु क्रमांक। | कक्षा का नाम और विवरण |
|---|---|
| 1 | mdl-switch एक एमडीएल घटक के रूप में लेबल को पहचानता है और लेबल तत्व पर आवश्यक है। |
| 2 | mdl-js-switch लेबल के लिए बुनियादी एमडीएल व्यवहार सेट करता है और लेबल तत्व पर आवश्यक है। |
| 3 | mdl-switch__input स्विच करने के लिए बुनियादी एमडीएल व्यवहार सेट करता है और इनपुट तत्व (स्विच) पर आवश्यक होता है। |
| 4 | mdl-switch__label कैप्शन के लिए मूल एमडीएल व्यवहार सेट करता है और इनपुट तत्व (कैप्शन) पर आवश्यक है। |
| 5 | mdl-js-ripple-effect रिपल क्लिक प्रभाव सेट करता है और वैकल्पिक है; लेबल तत्व पर जाता है और इनपुट तत्व (स्विच) पर नहीं। |
उदाहरण
निम्न उदाहरण आपको mdl- स्विच कक्षाओं के उपयोग और स्विच के रूप में विभिन्न प्रकार के चेकबॉक्स को समझने में मदद करेगा।
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>परिणाम
परिणाम सत्यापित करें।