上海校区切换校区
图标

学习文章

当前位置:首页 > >学习文章 > >

{H5开发}组件tab选项卡

发布时间: 2017-06-16 15:21:37

ionic tab(选项卡)是水平排列的按钮或者链接,用以页面间导航的切换。它可以包含文字和图标的组合,是一种移动设备上流行的导航方法。

一、基本示例

                 


                                  

                                                              效果图

默认情况下选项卡颜色为默认,当然也可以设置不同颜色样式,包括tabs-default 、tabs-light、tabs-stable、tabs-positive、tabs-calm、tabs-balanced、tabs-energized 、tabs-assertive、tabs-royal、tabs-dark。要隐藏选项卡栏,可使用 tabs-item-hide 类。


二、图表选项卡

在 tabs 类后添加 tabs-icon-only 类可设置只显示图标选项卡

                



效果图


三、左侧图标+文字选项卡

在 tabs 类后添加 tabs-icon-left 类可设置左侧图标+文字选项卡。

                 



效果图


四、条纹样式选项卡

可以在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像Android风格的 tabs。也可以添加tabs-top来实现选项卡在页面顶部。条纹选项卡颜色可通过 tabs-background-{color} 和 tabs-color-{color} 来控制, {color} 值可以是default、light、stable、positive、calm、balanced、energized、assertive、royal或dark。请注意,如果要再选项卡上设置头部标题,需要使用 has-tabs-top 类。

                 

                     



效果图

 

 

  

上一篇: {Android培训}实现一键锁屏程序

下一篇: {UI设计}优秀的界面设计是如何诞生的

在线咨询 ×

您好,请问有什么可以帮您?我们将竭诚提供最优质服务!