menu

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

凸起的

按钮 cloud按钮 cloud按钮

<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>
        

悬浮

add


  <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>
        

巨大

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

按钮 cloud按钮 cloud按钮

<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>
        

禁用

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

按钮 按钮 按钮 add

<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>