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悬浮按钮那样的功能，不能随着手指的拖拽而移动，它的位置都是固定的，失去了悬浮按钮的本质

转载于:https://www.cnblogs.com/sandyLovingCoding/p/9703321.html