Material Design Lite组件之切换表格

淩亂°似流年 2022-05-23 02:41 98阅读 0赞

#### 1.介绍 ####

Material Design Lite（MDL）数据表组件是标准HTML <table>的增强版。数据表由行格式良好的数据和列组成，具有适当的用户交互功能。

数据表中可用的行/列/单元格类型大多是自我格式化的;也就是说，一旦定义了数据表，单个单元就不需要特别关注。例如，行在鼠标悬停和选择上显示着色行为，默认情况下数字值会自动格式化，并且添加单个类可以单独或共同选择表格行。这使得数据表组件对于开发人员来说既方便又容易编码，并且对用户有吸引力和直观性。

#### 2.配置选项 ####

<table style="color:rgb(117,117,117);font-family:Roboto, Helvetica, Arial, sans-serif;font-size:14px;background-color:rgb(250,250,250);"> 
 <thead> 
 <tr> 
 <th>类名</th> 
 <th>效果</th> 
 <th>其他</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><code style="background-color:rgba(0,0,0,.06);white-space:pre-wrap;font-size:18px;">mdl-data-table</code></td> 
 <td>定义table标签为MDL组件</td> 
 <td>table标签必需</td> 
 </tr> 
 <tr> 
 <td><code style="background-color:rgba(0,0,0,.06);white-space:pre-wrap;font-size:18px;">mdl-js-data-table</code></td> 
 <td>为table标签添加默认行为效果</td> 
 <td>table标签必需</td> 
 </tr> 
 <tr> 
 <td><code style="background-color:rgba(0,0,0,.06);white-space:pre-wrap;font-size:18px;">mdl-data-table--selectable</code></td> 
 <td>为单选框添加选中/全选的行为</td> 
 <td>可选</td> 
 </tr> 
 <tr> 
 <td><code style="background-color:rgba(0,0,0,.06);white-space:pre-wrap;font-size:18px;">mdl-data-table__header--sorted-ascending</code></td> 
 <td>升序展示样式</td> 
 <td>在th标签中可选</td> 
 </tr> 
 <tr> 
 <td><code style="background-color:rgba(0,0,0,.06);white-space:pre-wrap;font-size:18px;">mdl-data-table__header--sorted-descending</code></td> 
 <td>降序展示样式</td> 
 <td>在th标签中可选</td> 
 </tr> 
 <tr> 
 <td><code style="background-color:rgba(0,0,0,.06);white-space:pre-wrap;font-size:18px;">mdl-data-table__cell--non-numeric</code></td> 
 <td>将文本应用到数据单元格</td> 
 <td>可选</td> 
 </tr> 
 <tr> 
 <td>(none)</td> 
 <td>将数字格式应用于标题或数据单元（默认）</td> 
 </tr> 
 </tbody> 
</table>

#### 3.应用举例 ####

<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>

![20180531145452138][]

[20180531145452138]: /images/20220523/89e80c451fcf43768f7d4c509e758994.png