1.10 ionic3——懸浮按鈕 ion-fab

編輯文章

ion-fab相似於iOS設備上的懸浮按鈕，點擊之後會彈出隱藏起來的一些按鈕，達到快捷的做用，在ionic官方文檔爲 ，https://ionicframework.com/docs/components/#fabs 我直接貼源碼了
（1）懸浮按鈕 ion-fab

<ion-fab right middle >
    <button  ion-fab color="light" style="opacity: 0.8"><ion-icon name="md-add" color="dark" large></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab><ion-icon name="ios-call" color="danger"></ion-icon></button>
    </ion-fab-list>
    <ion-fab-list side="top">
        <button ion-fab><ion-icon name="ios-megaphone" color="primary"></ion-icon></button>
    </ion-fab-list>
    <ion-fab-list side="bottom">
        <button ion-fab><ion-icon name="ios-clipboard" color="secondary"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

　　

（2）屬性
<ion-fab right middle >能夠看到我用了right和middle兩個屬性，使得個人懸浮按鈕位於屏幕右方的中間部位
其餘的屬性有：
top 將懸浮按鈕放在屏幕的頂部

bottom 將懸浮按鈕放在屏幕的底部

left 將懸浮按鈕放在屏幕的左邊

right 將懸浮按鈕放在屏幕的右邊

middle 將懸浮按鈕放在屏幕垂直線的中心

center 將懸浮按鈕放在屏幕水平線的中心

edge 用於將容器放在content和header之間，或在content和footer之間
（3）缺點
從上面的屬性中咱們沒有找到像iPhone懸浮按鈕那樣的功能，不能隨着手指的拖拽而移動，它的位置都是固定的，失去了懸浮按鈕的本質