menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

按钮

按钮样式可以使用在 <a><button><input> 元素上。

按钮中的英文字母都会被转为大写。

调用方式

按钮组件使用纯 CSS 编写,只需编写 HTML 代码即可生效。

样式

扁平按钮

<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按钮组中的按钮处于选中状态