【技巧】ionic3底部Tab居中圆形凸出按钮

IT晴天

发布于 2019-03-06 11:32:01

1.1K0

发布于 2019-03-06 11:32:01

文章被收录于专栏：ionic3+

好久没做ionic3了，在简书草稿箱发现这个闲置了很久将至一年的文章，遂发出来。

效果图是这样：

image.png

首先这是ios样式修改的，所以在app.module.ts中指定为ios模式：

    IonicModule.forRoot(MyApp, {
      mode: 'ios'
    })

然后html部分：

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

注意，居中项不放tabTitle，这样就只会有一个图标，且自动有一个.icon-only样式，而其他项是不会有这个样式的。

然后针对这个样式改写scss部分:

.tabs-ios{
    .tab-button.icon-only{
        position:relative;
        overflow:visible;
        text-align:center;
        left:0;
        .tab-button-icon{
            width:70px;
            height:70px;
            line-height: 60px;
            margin-top: -12px;
            background:skyblue;
            border-radius:50%;
            border:5px solid #fff;
            box-shadow:0 -2px 3px rgba(100,100,100,.4);
        }
    }
}

然后便大功告成了，是不是很简单？想再美化一下的自行调整吧。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.02.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ios

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

ios

登录后参与评论

0 条评论

热度

【技巧】ionic3底部Tab居中圆形凸出按钮

【技巧】ionic3底部Tab居中圆形凸出按钮

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐