1.介绍
Material Design Lite(MDL)按钮组件是标准HTML <button>元素的增强版。 一个按钮由文字和/或图像组成,清楚地表明用户点击或触摸时会发生什么动作。 MDL按钮组件提供各种类型的按钮,并允许您添加显示效果和点击效果。无论网站的内容或功能如何,按钮都是大多数用户界面中无处不在的功能。 因此,它们的设计和使用是整体用户体验的重要因素。
可用的按钮的显示类型是平的(默认),凸起的,FAB按钮,mini-fab按钮和图标; 这些类型中的任何一种都可能是普通的(浅灰色)或彩色的,并且可能会初始化或以编程方式禁用。 FAB按钮,mini-fab按钮和图标按钮类型通常使用小图像作为标题而不是文本。
2.配置选项
MDL CSS类将各种预定义的视觉和行为增强应用于按钮。下表列出了可用的类及其效果。
类名 | 效果 | 备注 |
mdl-button | 定义标签为MDL组件 | 必需 |
mdl-js-button | 为按钮组件添加默认效果 | 必需 |
mdl-button--raised | 添加点击阴影效果 | 不与fab, mini-fab, 和icon效果叠加 |
mdl-button--fab | 设置按钮为圆形 | 不与fab, mini-fab, 和icon效果叠加 |
mdl-button--mini-fab | 设置按钮为小圆形 | 需要先引用fab,不与raised和icon效果叠加 |
mdl-button--icon | 设置按钮为icon效果 | 不与raised,fab和mini-fab效果叠加 |
mdl-button--colored | 为按钮添加颜色效果 | 颜色定义在material.min.css文件中 |
mdl-button--primary | 设置按钮为默认颜色 | 颜色定义在material.min.css文件中 |
mdl-button--accent | 为按钮添加覆盖颜色 | 颜色定义在material.min.css文件中 |
mdl-js-ripple-effect | 添加点击波纹效果 | 可以与其他类结合使用 |
注意:所有类型的按钮都提供了使用disabled禁用功能:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>
可以使用mdl-button - disabled类实现相同的样式,但不禁用元素的功能。 该属性可以通过脚本编程添加或删除。
3.应用举例
3.1.设置为带颜色的圆形按钮
带颜色的圆形按钮和附带点击波纹效果
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
3.2.设置为不带颜色的圆形按钮
默认、带点击波纹效果和禁用点击
<!-- FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
<!-- Disabled FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
<i class="material-icons">add</i>
</button>
3.3.矩形按钮
点击带阴影、点击带阴影波纹效果和禁用点击
<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
<!-- Raised disabled button -->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>
3.4.矩形按钮带颜色按钮
默认颜色带点击阴影、覆盖颜色带点击阴影和覆盖颜色带点击波纹
<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>
<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
3.5.默认按钮
默认按钮,默认带点击波纹和禁用点击
<!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>
<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>
<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>
3.6.默认按钮带颜色
默认颜色和覆盖颜色
<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>
<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>
3.7.设置为iscon图标按钮
默认颜色和设置颜色
<!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>
<!-- Colored icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons">mood</i>
</button>
3.8.小圆形按钮
小圆形按钮不带颜色和带颜色
<!-- Mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">add</i>
</button>
<!-- Colored mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">add</i>
</button>