सामग्री डिजाइन लाइट - डेटाटेबल
एमडीएल विभिन्न पूर्वनिर्धारित दृश्य और व्यवहारिक वृद्धि को लागू करने और डेटा-टेबल के रूप में एक तालिका प्रदर्शित करने के लिए सीएसएस कक्षाओं की एक श्रृंखला प्रदान करता है। निम्न तालिका उपलब्ध वर्गों और उनके प्रभावों को सूचीबद्ध करती है।
| अनु क्रमांक। | कक्षा का नाम और विवरण |
|---|---|
| 1 | mdl-data-table एक MDL घटक के रूप में तालिका की पहचान करता है और तालिका तत्व पर आवश्यक है। |
| 2 | mdl-js-data-table टेबल पर मूल एमडीएल व्यवहार सेट करता है और टेबल तत्व पर आवश्यक है। |
| 3 | mdl-data-table--selectable सभी / व्यक्तिगत चयन व्यवहार (चेकबॉक्स) सेट करता है और वैकल्पिक है; तालिका तत्व पर जाता है। |
| 4 | mdl-data-table__cell--non-numeric डेटा सेल पर पाठ स्वरूपण सेट करता है और वैकल्पिक है; टेबल हेडर और टेबल डेटा सेल दोनों पर जाता है। |
| 5 | (none) डिफ़ॉल्ट रूप से, शीर्षलेख या डेटा सेल के लिए संख्यात्मक स्वरूपण सेट करता है। |
उदाहरण
निम्नलिखित उदाहरण आपको इसके उपयोग को समझने में मदद करेगा mdl-data-table डेटा तालिका दिखाने के लिए कक्षाएं।
mdl_data_tables.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 class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>परिणाम
परिणाम सत्यापित करें।