ionic tab(選項(xiàng)卡)

2018-10-13 19:00 更新

ionic tab(選項(xiàng)卡)

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

以下選項(xiàng)卡容器使用了 tabs 類,每個(gè)選項(xiàng)卡使用 tab-item 類。默認(rèn)情況下,選項(xiàng)卡是文本的,并沒(méi)有圖標(biāo)。

實(shí)例

<div class="tabs">
  <a class="tab-item">
    主頁(yè)
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    設(shè)置
  </a>
</div>

嘗試一下 ?

默認(rèn)情況,選項(xiàng)卡顏色為默認(rèn),你可以設(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 類。

圖標(biāo)選項(xiàng)卡

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

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

嘗試一下 ?

頂部圖標(biāo)+文字選項(xiàng)卡

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

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    主頁(yè)
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    設(shè)置
  </a>
</div>

嘗試一下 ?

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

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

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主頁(yè)
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    設(shè)置
  </a>
</div>

嘗試一下 ?

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

可以在帶有 tabs 的樣式名的元素上添加 tabs-striped 來(lái)實(shí)現(xiàn)像 Android 風(fēng)格的 tabs。也可以添加 tabs-top 來(lái)實(shí)現(xiàn)選項(xiàng)卡在頁(yè)面頂部。

條紋選項(xiàng)卡顏色可通過(guò) tabs-background-{color} 和 tabs-color-{color} 來(lái)控制,{color} 值可以是:default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。

注意:如果要再選項(xiàng)卡上設(shè)置頭部標(biāo)題,需要使用 has-tabs-top 類。

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

嘗試一下 ?

運(yùn)行效果如下:


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)