样式
扁平按钮
为 <a>
、
<button>
或
<input>
元素添加类
.mdui-btn
即可获得扁平按钮的样式。
Example
<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>
浮动按钮
给扁平按钮添加 .mdui-btn-raised
类能使按钮获得浮动效果。
Example
<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>
图标按钮
给扁平按钮添加类 .mdui-btn-icon
能将其变为图标按钮。
Example
<button class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
密集型按钮
密集型按钮比普通按钮稍微小一点,在以鼠标和键盘为主要输入方式的时候可以使用。在普通按钮上添加类 .mdui-btn-dense
即可。
Example
<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
禁用状态
在按钮上加上 disabled
属性禁用一个按钮。
Example
<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
<i class="mdui-icon material-icons">add</i>
</button>
块级元素
给按钮加上 .mdui-btn-block
类可以将其拉伸到父元素的 100% 宽度,且按钮变为块级(block)元素。
Example
<div class="mdui-row-xs-2">
<div class="mdui-col">
<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
</div>
<div class="mdui-col">
<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
</div>
</div>
按钮组
把多个按钮放在一个按钮组容器 .mdui-btn-group
内,即成为按钮组。在按钮上添加类 .mdui-btn-active
表示该按钮处于选中状态。
Example
<div class="mdui-btn-group">
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_left</i>
</button>
<button type="button" class="mdui-btn mdui-btn-active">
<i class="mdui-icon material-icons">format_align_center</i>
</button>
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_right</i>
</button>
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_justify</i>
</button>
</div>
CSS 类名列表
类名 |
效果 |
.mdui-btn |
定义一个按钮 |
.mdui-btn-raised |
定义浮动按钮 |
.mdui-btn-icon |
定义图标按钮 |
.mdui-btn-block |
将按钮设为块级元素 |
.mdui-btn-group |
按钮组的容器 |
.mdui-btn-active |
按钮组中的按钮处于选中状态 |