基于 Material Design 3 和 Web Components 的全新 mdui 2 现已发布，前往查看 mdui 2 开发文档。

滑块

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

调用方式

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

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

Material Design 设计规范：组件 - 按钮

样式

浮动按钮

示例

<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100"/>
</label>

图标按钮

示例

<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100"/>
</label>

密集型按钮

块级元素

按钮组

示例

<!-- 为 <code>&lt;a&gt;</code>、<code>&lt;button&gt;</code> 或 <code>&lt;input&gt;</code> 元素添加类 <code>.mdui-btn</code> 即可获得扁平按钮的样式。 -->
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>

<!-- 给扁平按钮添加 <code>.mdui-btn-raised</code> 类能使按钮获得浮动效果。 -->
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>

给扁平按钮添加类 <code>.mdui-btn-icon</code> 能将其变为图标按钮。

示例

<!-- 为 <code>&lt;a&gt;</code>、<code>&lt;button&gt;</code> 或 <code>&lt;input&gt;</code> 元素添加类 <code>.mdui-btn</code> 即可获得扁平按钮的样式。 -->
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>

<!-- 给扁平按钮添加 <code>.mdui-btn-raised</code> 类能使按钮获得浮动效果。 -->
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>

禁用状态

密集型按钮比普通按钮稍小，适用于以鼠标和键盘为主要输入方式的场景。在普通按钮上添加类 .mdui-btn-dense 即可。

在按钮上加上 disabled 属性禁用一个按钮。

CSS 类名列表

类名	说明
`.mdui-slider`	给按钮加上 <code>.mdui-btn-block</code> 类可以将其拉伸到父元素的 100% 宽度，且按钮变为块级（block）元素。
`.mdui-slider-discrete`	把多个按钮放在一个按钮组容器 <code>.mdui-btn-group</code> 内，即成为按钮组。在按钮上添加类 <code>.mdui-btn-active</code> 表示该按钮处于选中状态。

选择控件

列表

滑块