ionic tab(選項(xiàng)卡)是水平排列的按鈕或者鏈接，用以頁面間導(dǎo)航的切換。它可以包含文字和圖標(biāo)的組合，是一種移動(dòng)設(shè)備上流行的導(dǎo)航方法。

一、基本示例

                                                              效果圖

默認(rèn)情況下選項(xiàng)卡顏色為默認(rèn)，當(dāng)然也可以設(shè)置不同顏色樣式，包括tabs-default 、tabs-light、tabs-stable、tabs-positive、tabs-calm、tabs-balanced、tabs-energized 、tabs-assertive、tabs-royal、tabs-dark。要隱藏選項(xiàng)卡欄，可使用 tabs-item-hide 類。

二、圖表選項(xiàng)卡

在 tabs 類后添加 tabs-icon-only 類可設(shè)置只顯示圖標(biāo)選項(xiàng)卡

效果圖

三、左側(cè)圖標(biāo)+文字選項(xiàng)卡

在 tabs 類后添加 tabs-icon-left 類可設(shè)置左側(cè)圖標(biāo)+文字選項(xiàng)卡。

效果圖

四、條紋樣式選項(xiàng)卡

可以在帶有 tabs 的樣式名的元素上添加 tabs-striped 來實(shí)現(xiàn)像Android風(fēng)格的 tabs。也可以添加tabs-top來實(shí)現(xiàn)選項(xiàng)卡在頁面頂部。條紋選項(xiàng)卡顏色可通過 tabs-background-{color} 和 tabs-color-{color} 來控制， {color} 值可以是default、light、stable、positive、calm、balanced、energized、assertive、royal或dark。請注意，如果要再選項(xiàng)卡上設(shè)置頭部標(biāo)題，需要使用 has-tabs-top 類。

效果圖