I'm using Material Design Lite and trying to implement a basic data table with the code below:
<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">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
The table generates fine, but the above code does not generate the checkboxes that I need. Based on the documentation mdl-data-table--selectable should generate the checkboxes, but they are not showing up. I did some digging around and found this article on github: https://github.com/google/material-design-lite/wiki/Deprecations.
While this is a bit disappointing, I copied their example just to see if it generates the checkboxes correctly. My exact code is below:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class="mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
<input type="checkbox" id="table-header" class="mdl-checkbox__input" />
</label>
</th>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[1]">
<md-checkbox type="checkbox" id="row[1]" class="mdl-checkbox__input" />
</label>
</td>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[2]">
<input type="checkbox" id="row[2]" class="mdl-checkbox__input" />
</label>
</td>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[3]">
<input type="checkbox" id="row[3]" class="mdl-checkbox__input" />
</label>
</td>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</body>
</html>
I've included all the necessary links to the JS and CSS file, but what returns looks like this:
For consistency, I really need the checkboxes to have the Material Design look/feel, but this looks like Bootstrap. Any ideas what's going on here?
Aucun commentaire:
Enregistrer un commentaire