按钮

优质

小牛编辑

133浏览

2023-12-01

material design 中有三种类型的按钮。凸起的按钮是一个标准的按钮，表示动作，相对于页面有一个深度。悬浮的圆形动作按钮表示很重要的功能。平面按钮通常用于已经有深度的卡片会模态。

凸起的

<a class="waves-effect waves-light btn">按钮</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>按钮</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>按钮</a>

悬浮

<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>

固定动作按钮

如果你想固定悬浮动作按钮，你可以增加多个动作悬浮的显示。我们的示例在右下角。

<div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
    </a>
    <ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>

你也可以通过程序打开或关闭悬浮固定按钮菜单。

  $('.fixed-action-btn').openFAB();
  $('.fixed-action-btn').closeFAB();
  $('.fixed-action-btn.toolbar').openToolbar();
  $('.fixed-action-btn.toolbar').closeToolbar();

水平垂直固定按钮

创建一个水平固定按钮很简单，只要增加一个类 horizontal 到悬浮固定按钮中。

<div class="fixed-action-btn horizontal">
    <a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
    </a>
    <ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>

单击显示的悬浮固定按钮

如果你想禁用悬浮并用点击取代触发固定悬浮按钮菜单，只要增加类 click-to-toggle 到固定悬浮按钮中。

<div class="fixed-action-btn horizontal click-to-toggle">
    <a class="btn-floating btn-large red">
<i class="material-icons">menu</i>
    </a>
    <ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>

工具条中的固定悬浮按钮

在你点击固定悬浮按钮时显示一个工具条而不是单独的按钮菜单。只要增加 toolbar 类到你的悬浮固定按钮中。

<div class="fixed-action-btn toolbar">
    <a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
    </a>
    <ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>

扁平

扁平按钮通常被用来减少过度的分层。例如：扁平按钮通常用于一张卡片或一个模态内的动作，这样就不会有太多重叠的阴影

<a class="waves-effect waves-teal btn-flat">按钮</a>

提交按钮

当你使用一个按钮提交表单，而不是一个 input 标签时，只需给按钮增加一个 type="submit" 。

  <button class="btn waves-effect waves-light" type="submit" name="action">提交
    <i class="material-icons right">send</i>
  </button>

巨大

给按钮一个更大的高度使按钮更引人注意。

<a class="waves-effect waves-light btn-large">按钮</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>按钮</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>按钮</a>

禁用

这个样式可以应用与所有类型的按钮。

<a class="btn-large disabled">按钮</a>
<a class="btn disabled">按钮</a>
<a class="btn-flat disabled">按钮</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>