开发手册 欢迎您!
软件开发者资料库

Material Design Lite - 按钮

Material Design Lite按钮 - 从简单和简单的步骤学习Material Design Lite,从基本到高级概念,包括概述,环境设置,布局,网格,标签,页脚,徽章,按钮,卡片,进度条,旋转器,菜单,滑块,复选框,单选按钮,图标,开关,数据表,文本字段,工具提示。

MDL提供了一系列CSS类,可以对按钮应用各种预定义的视觉和行为
增强功能.下表列出了可用的类及其
效果.

Sr.No.Class Name&描述
1

mdl-button

将按钮设置为MDL组件,是必需的.

2

mdl-js-button

向按钮添加基本MDL行为,必需.

3

(无)

将平面显示效果设置为按钮,默认为.

4

mdl-button  -  raise

设置提升的显示效果;这与fab,mini-fab和icon互斥.

5

mdl-button  -  fab

集fab(圆形)显示效果;这与凸起的迷你工厂和图标是互斥的.

6

mdl-button  -  mini-fab

设置mini-fab(小型圆形)显示效果;这与凸起,制作和图标互斥.

7

mdl-button  -  icon

设置图标(小平圆形)显示效果;这与凸起的,晶圆厂和迷你晶圆厂是互斥的.

8

mdl-button  - 着色

集彩色显示效果,其中颜色在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

                                                                                                  add                                 add                                                                   Colored fab (circular) display effect               Colored fab (circular) with ripple display effect                                                                                     add                                 add                                 add                                                   Plain fab (circular) display effect               Plain fab (circular) with ripple display effect               Plain fab (circular) and disabled                                                                     add                                 add                                 add                                                   Raised button               Raised button with ripple display effect               Raised button and disabled                                                                     add                                 add                                 add                                                   Colored Raised button               Accent-colored Raised button               Accent-colored raised button with ripple effect                                                                     add                                 add                                 add                                                   Flat button               Flat button with ripple effect               Disabled flat button                                                                     add                                 add                                                                   Primary Flat button               Accent-colored Flat button                                                                                     add                                 add                                                                   Icon button               Colored Icon button                                                                                     add                                 add                                                                   Mini Colored fab (circular) display effect               Mini Colored fab (circular) with ripple display effect