Material Design Lite 按钮
2018-12-19 18:17 更新
该MDL提供多种CSS类各种预先定义的外观和行为增强应用到按钮。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-按钮 设置按钮作为MDL成分，必需的。 |
| 2 | MDL-JS-按钮 增加了基本的MDL行为按钮，必需的。 |
| 3 | （没有） 设置平面显示效果按钮，默认值。 |
| 4 | MDL-按钮-募集 提高显示效果设置，可以与晶圆厂，迷你晶圆厂和图标相互独占使用。 |
| 五 | MDL-按钮-晶圆厂 集FAB（圆形）的显示效果，可以有凸起，迷你晶圆厂和图标相互独占使用。 |
| 6 | MDL-按钮-迷你晶圆厂 集迷你晶圆厂（晶圆小圆形）的显示效果，可以有凸起，FAB和图标相互独占使用。 |
| 7 | MDL-按钮-图标 设置图标（小平原圆形）的显示效果，可以有凸起，FAB和迷你晶圆厂相互独占使用。 |
| 8 | MDL-按钮-有色 集彩色那里的颜色在material.min.css定义的显示效果。 |
| 9 | MDL-按钮-初级 设置在那里的颜色在material.min.css定义的主色的显示效果。 |
| 10 | MDL-按钮-重音 设置在那里的颜色在material.min.css定义强调色的显示效果。 |
| 11 | MDL-JS-涟漪效应 套波纹点击效果，可以组合使用与任何其他类。 |
例
下面的例子展示了使用MDL-按钮类来显示不同类型的按钮。
mdl_buttons.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" >
</head>
<body>
<table border="0">
<tbody>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--fab"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab" disabled><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--raised"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised" disabled><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button" disabled><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--primary"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--accent"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
结果
验证结果。
以上内容是否对您有帮助：
更多建议：