一：懸浮按鈕

懸浮按鈕是一種有著特殊UI效果的按鈕，它看起來就像懸浮在界面之上一樣。

懸浮按鈕點擊時通常會展開一系列的選項按鈕，十分酷炫。

新版F7中的懸浮按鈕不僅僅是Material Design特有了，而是一種通用的UI控件。

二：懸浮按鈕種類

1）按照它在界面中的位置來分類：

• fab-right-bottom
• fab-center-bottom
• fab-left-bottom
• fab-right-center
• fab-center-center
• fab-left-center
• fab-right-top
• fab-center-top
• fab-left-top

2）按照點擊後效果分類

• 撥號盤(默認)：點擊後展開多個按鈕
• 漸變(fab-morph)：點擊後，按鈕變化為界面上的某個組成部分(如：底部工具欄)

四：按鈕顏色

通過 color-xx 來指定顏色。

五：撥號盤懸浮按鈕

<div class="fab fab-left-top color-yellow">
    <!--1:定義懸浮按鈕UI樣式-->
    <a href="#">
      <i class="icon f7-icons ios-only">add</I>//第一個標簽為按鈕關閉時樣式
      
 
<i class="icon f7-icons ios-only">close</I>//第二個標簽為按鈕被點擊打開後的樣式
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>

    <!--2:定義按鈕展開內容 -->
    <div class="fab-buttons fab-buttons-bottom">
 

      <a href="">按鈕1</a>
      <a href="">按鈕2</a>
      <a href="">按鈕3</a>
      ......
    </div>
  </div>

六：漸變懸浮按鈕

<!-- 1:定義 FAB Morph Target(變化目標，點擊懸浮按鈕後才呈現)-->
  <div class="... fab-morph-target" id="變化目標id">
    內容...
  </div>

<!-- 2:定義懸浮按鈕，指定漸變類型以及變化目標-->
<div class="fab fab-right-bottom fab-morph" data-morph-to="#變化目標id">

Framework7新版學習筆記之 升級版懸浮按鈕