ionic tab(选项卡)

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

以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。

实例

  
    主页
  
  
    收藏
  
  
    设置
  

默认状态下，选项卡会使用系统默认配色。如果想调整视觉风格，可以直接套用这些不同的颜色样式：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-top 类可设置顶部图标+文字选项卡。

  
    
    主页
  
  
    
    收藏
  
  
    
    设置
  

左侧图标+文字选项卡

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

    

      
        
        Test
      
      
        
        Favorites
      
      
        
        Settings
      
    
  
  

    

      
        
        Test
      
      
        
        Favorites
      
      
        
        Settings
      
    
  

运行效果如下：