Materialize の Fixed Action Button で文字を横にだしたいけど、どうにも出ないので気合でなんとかそれっぽくするメモ。

Materialize の Fixed Action Button で文字を横にだしたいけど、どうにも出ないので気合でなんとかそれっぽくするメモ。

（気合で）こんな感じになった

もう少し何とかできそうだとは思う。

   <div class="fixed-action-btn" style="bottom: 90px; right: 24px; width:200px;">
    <a class="btn-floating btn-large blue" style="display:block;margin:auto;">
      <i class="large mdi-content-add"></i>
    </a>
    <ul style="color:#000000;">
      <li><a class="btn-floating blue" style="width:100px;margin-left:-100px;">hogehoge</a><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
      <li><a class="btn-floating red" style="width:100px;margin-left:-100px;">新規登録</a><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
      <li><a class="btn-floating green" style="width:100px;margin-left:-100px;">ログイン</a><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
    </ul>
  </div>

 やったことは、まず、一番外枠を広げた。200pxと書いてあるところ。

で、でかいアイコンのマージンをautoに。ここまでは何とかなる。

アイコンが消えるためには bnt-floating配下においておかないといかない。

めんどいので、アイコンを２つ使うことにしてみた。

マイナスのマージンをとって調整している。が、どんなもんだろう。

inboxみたいな表示にしたいが、もう少し調査が必要。