ionic使用记录----tabs-优快云博客

选项卡 : .tabs

选项卡是一个可以包含多个按钮或链接的容器，通常用于提供一致的导航体验。ionic中使用.tabs样式声明选项卡，使用.tab-item样式声明选项卡成员

 
 <any class="tabs">
    <any class="tab-item">...</any>
    <any class="tab-item">...</any>
    ...
</any>

选项卡默认地位于屏幕底部。一旦元素应用了.tabs样式，就可以继续选用三类预定义样式来进一步声明元素及其内容的外观：

同级样式 - 同级样式与.tabs应用在同一元素上，声明选项卡的位置、配色等。
下级样式 - 下级样式只能应用在.tabs的子元素上，声明子元素的大小等特征。
上级样式 - 上级样式应用于.tabs的父元素中，声明选项卡的平台特征。

.tabs

---------------------------------

.tab-item : 使用图标

选项卡的选项默认的只包含文字，使用图标会使其更加生动：比如微博（weibo）和微信（wechat）：

wechat

要在某个选项元素中插入图标，需要注意两点：

使用i标签在.tab-item中插入图标
在.tabs容器上使用.tabs-icon-{position}声明图标位置。

有三种方式定义图标位置：

.tabs-icon-top - 将图标置于文字之上
.tabs-icon-left - 将图标置于文字左侧
.tabs-icon-only - 只使用图标，不显示文字

----------------------------------------

.tab-item : 使用徽章

微信（wechat）的选项卡中第三项包含了一个红色的信息元素，被称为徽章：

wechat

要在.tab-item内包含徽章，需要注意两点：

使用.badge样式插入徽章元素
在.tab-item同级声明.has-badge样式

  
  <any class="tabs">
    <any class="tab-item has-badge">
        <any class="badge">...</any>
    </any>
    ...
</any>

--------------------------------------

.tabs : 顶部选项卡

默认情况下，选项卡位于屏幕底部，可以使用.tabs-top样式将选项卡置于顶部。

顶部选项卡应用也很广泛：

.tabs-top

-----------------------------------------

.tab-striped .tabs: 条带风格选项卡

条带风格的选项卡起源于Android平台，它使用一个细长的条带表示选项的选中状态：

striped tabs

在ionic中，使用.tabs-striped样式声明条带风格选项卡：

  
  <any class="tabs-striped">
    <any class="tabs">
        <any class="tab-item">...</any>
        <any class="tab-item">...</any>
        ...
    </any>
</any>

--------------------------------------------------------------