美文网首页
1.10 ionic3——悬浮按钮 ion-fab

1.10 ionic3——悬浮按钮 ion-fab

作者: 杨啊杨_fb52 | 来源:发表于2018-09-23 17:56 被阅读0次

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

    相关文章

      网友评论

          本文标题:1.10 ionic3——悬浮按钮 ion-fab

          本文链接:https://www.haomeiwen.com/subject/surqoftx.html