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