Question

我想在materializecss中有一个类似fixed-action-btn的工具栏，但我只想让它成为工具栏，我不希望它弹出按钮。有谁知道如何做到这一点？？这里有一些代码可供解释。

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

Answer 1

我弄明白了，我会跟上这个问题，以便它可以帮助别人！

  <div class="toolbar-fixed red">
<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>

    .toolbar-fixed {
    width: 100%;
    padding: 0;
    height: 56px;
    position: fixed;
    bottom: 0px;
}

.toolbar-fixed.active > a i {
opacity: 0;
}

.toolbar-fixed ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
top: 0;
bottom: 0;
}


.toolbar-fixed ul li {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
margin: -;
height: 100%;
transition: none;
position: relative;
top: -15px;

}


.toolbar-fixed ul li a{
display: block;
  overflow: hidden;
  position: relative;

  width: 100%;
  height: 100%;
  background-color: transparent;
  box-shadow: none;
   color: #fff;
  line-height: 56px;
  z-index: 1;
   }

.toolbar-fixed ul li a i {
line-height: inherit;
}

.toolbar-fixed ul {
left: 0;
right: 0;
text-align: center;
}

.toolbar-fixed ul li {
 margin-bottom: 15px;
}

Answer 2

无法找到任何“官方”或有记录的方式来执行此操作，但这是一个实用的方法：

setTimeout(function(){
  var rO = $('.renderOpen'),
      bF = rO.find('.btn-floating').first();
  bF.trigger('click');
  setTimeout(function(){
    rO.animate({opacity:1},{duration:400,delay:400},function(){
      rO.removeClass('renderOpen');
    })
  }, 270)
});

.renderOpen { opacity: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>

<footer>
  <div class="fixed-action-btn toolbar renderOpen">
  <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>
</footer>

如何将MaterialiseCSS fixed-action-btn工具栏放入工具栏？

2 个答案: