{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 类。