- Material Design Lite 教程
- MDL - 首页
- MDL - 概述
- MDL - 环境设置
- MDL - 布局
- MDL - 网格
- MDL - 标签页
- MDL - 页脚
- MDL - 徽章
- MDL - 按钮
- MDL - 卡片
- MDL - 进度条
- MDL - 加载动画
- MDL - 菜单
- MDL - 滑块
- MDL - 复选框
- MDL - 单选按钮
- MDL - 图标
- MDL - 开关
- MDL - 数据表格
- MDL - 文本字段
- MDL - 工具提示
- Material Design Lite 资源
- MDL - 快速指南
- MDL - 有用资源
- MDL - 讨论
Material Design Lite - 按钮
MDL 提供了一系列 CSS 类，用于将各种预定义的视觉和行为增强功能应用于按钮。下表列出了可用的类及其效果。
| 序号 | 类名及描述 |
|---|---|
| 1 | mdl-button 将按钮设置为 MDL 组件，必需。 |
| 2 | mdl-js-button 为按钮添加基本的 MDL 行为，必需。 |
| 3 | （无） 为按钮设置平面显示效果，默认值。 |
| 4 | mdl-button--raised 设置凸起显示效果；这与 fab、mini-fab 和 icon 互斥。 |
| 5 | mdl-button--fab 设置 fab（圆形）显示效果；这与 raised、mini-fab 和 icon 互斥。 |
| 6 | mdl-button--mini-fab 设置 mini-fab（小型 fab 圆形）显示效果；这与 raised、fab 和 icon 互斥。 |
| 7 | mdl-button--icon 设置 icon（小型普通圆形）显示效果；这与 raised、fab 和 mini-fab 互斥。 |
| 8 | mdl-button--colored 设置彩色显示效果，颜色在 material.min.css 中定义。 |
| 9 | mdl-button--primary 设置主要颜色显示效果，颜色在 material.min.css 中定义。 |
| 10 | mdl-button--accent 设置强调颜色显示效果，颜色在 material.min.css 中定义。 |
| 11 | mdl-js-ripple-effect 设置波纹点击效果，可以与任何其他类组合使用。 |
示例
以下示例将帮助您了解如何使用mdl-button 类来显示不同类型的按钮。
mdl_buttons.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.ac.cn/icon?family=Material+Icons">
</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>
结果
验证结果。
广告