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

posted on 2018-09-25 20:31  sandyLoveCoding  阅读(450)  评论(0编辑  收藏  举报