版本：v8

ion-tab-button

分頁按鈕是一種 UI 元件，放置在分頁列內。分頁按鈕可以指定圖示和標籤的配置，並連接到分頁視圖。

請參閱分頁文件，以了解有關配置分頁的更多詳細資訊。

用法

Angular
Javascript
React
Vue

<ion-tabs>
  <!-- Tab bar -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="person-circle" aria-hidden="true"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="map">
      <ion-icon name="map" aria-hidden="true"></ion-icon>
      <ion-label>Map</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="about">
      <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

<ion-tabs>
  <!-- Tab views -->
  <ion-tab tab="schedule">
    <ion-router-outlet name="schedule"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="speakers">
    <ion-router-outlet name="speakers"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="map">
    <ion-router-outlet name="map"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="about">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>

  <!-- Tab bar -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
      <ion-icon name="person-circle" aria-hidden="true"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
      <ion-icon name="map" aria-hidden="true"></ion-icon>
      <ion-label>Map</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
      <ion-icon name="information-circle" aria-hidden="true"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';

export const TabButtonExample: React.FC = () => (
  <IonContent>
    <IonTabs>
      {/*-- Tab bar --*/}
      <IonTabBar slot="bottom">
        <IonTabButton tab="schedule">
          <IonIcon icon={calendar} aria-hidden="true" />
          <IonLabel>Schedule</IonLabel>
        </IonTabButton>

        <IonTabButton tab="speakers">
          <IonIcon icon={personCircle} aria-hidden="true" />
          <IonLabel>Speakers</IonLabel>
        </IonTabButton>

        <IonTabButton tab="map">
          <IonIcon icon={map} aria-hidden="true" />
          <IonLabel>Map</IonLabel>
        </IonTabButton>

        <IonTabButton tab="about">
          <IonIcon icon={informationCircle} aria-hidden="true" />
          <IonLabel>About</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  </IonContent>
);

<template>
  <ion-tabs>
    <!-- Tab bar -->
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="schedule" href="/tabs/schedule">
        <ion-icon :icon="calendar" aria-hidden="true"></ion-icon>
        <ion-label>Schedule</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="speakers" href="/tabs/speakers">
        <ion-icon :icon="person-circle" aria-hidden="true"></ion-icon>
        <ion-label>Speakers</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="map" href="/tabs/map">
        <ion-icon :icon="map" aria-hidden="true"></ion-icon>
        <ion-label>Map</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="about" href="/tabs/about">
        <ion-icon :icon="informationCircle" aria-hidden="true"></ion-icon>
        <ion-label>About</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</template>

<script>
import { 
  IonIcon, 
  IonLabel, 
  IonTabBar, 
  IonTabButton, 
  IonTabs
} from '@ionic/vue';
import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonIcon, 
    IonLabel, 
    IonTabBar, 
    IonTabButton, 
    IonTabs
  },
  setup() {
    return { calendar, informationCircle, map, personCircle }
  }
});
</script>

屬性

disabled

描述	如果為 `true`，則使用者無法與分頁按鈕互動。
屬性	`disabled`
類型	`boolean`
預設	`false`

download

描述	此屬性指示瀏覽器下載 URL 而不是導覽至該 URL，因此系統會提示使用者將其儲存為本機檔案。如果屬性具有值，則會在「儲存」提示中使用該值作為預先填入的檔案名稱（使用者仍然可以變更檔案名稱）。
屬性	`download`
類型	`string ｜ undefined`
預設	`undefined`

href

描述	包含超連結指向的 URL 或 URL 片段。如果設定此屬性，將會呈現錨點標籤。
屬性	`href`
類型	`string ｜ undefined`
預設	`undefined`

layout

描述	設定分頁列中文字和圖示的配置。預設為 `"icon-top"`。
屬性	`layout`
類型	`"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined`
預設	`undefined`

mode

描述	模式決定要使用哪個平台樣式。
屬性	`mode`
類型	`"ios" ｜ "md"`
預設	`undefined`

rel

描述	指定目標物件與連結物件的關係。該值是以空格分隔的連結類型清單。
屬性	`rel`
類型	`string ｜ undefined`
預設	`undefined`

selected

描述	選取的分頁元件
屬性	`selected`
類型	`boolean`
預設	`false`

tab

描述	必須為每個 `ion-tab` 提供分頁 ID。它在內部用於參考選取的分頁，或由路由器用於在它們之間切換。
屬性	`tab`
類型	`string ｜ undefined`
預設	`undefined`

target

描述	指定要在哪裡顯示連結的 URL。僅當提供 `href` 時才適用。特殊關鍵字：`"_blank"`、`"_self"`、`"_parent"`、`"_top"`。
屬性	`target`
類型	`string ｜ undefined`
預設	`undefined`

事件

此元件沒有可用的事件。

方法

此元件沒有可用的公開方法。

CSS 陰影部分

名稱	描述
`native`	包裝所有子元素的原生 HTML 錨點元素。

CSS 自訂屬性

名稱	描述
`--background`	分頁按鈕的背景
`--background-focused`	使用 Tab 鍵聚焦時分頁按鈕的背景
`--background-focused-opacity`	使用 Tab 鍵聚焦時分頁按鈕背景的不透明度
`--color`	分頁按鈕的顏色
`--color-focused`	使用 Tab 鍵聚焦時分頁按鈕的顏色
`--color-selected`	選取的分頁按鈕的顏色
`--padding-bottom`	分頁按鈕的底部內距
`--padding-end`	如果方向為由左至右，則為分頁按鈕的右內距；如果方向為由右至左，則為左內距
`--padding-start`	如果方向為由左至右，則為分頁按鈕的左內距；如果方向為由右至左，則為右內距
`--padding-top`	分頁按鈕的頂部內距
`--ripple-color`	按鈕漣漪效果的顏色

名稱	描述
`--background`	分頁按鈕的背景
`--background-focused`	使用 Tab 鍵聚焦時分頁按鈕的背景
`--background-focused-opacity`	使用 Tab 鍵聚焦時分頁按鈕背景的不透明度
`--color`	分頁按鈕的顏色
`--color-focused`	使用 Tab 鍵聚焦時分頁按鈕的顏色
`--color-selected`	選取的分頁按鈕的顏色
`--padding-bottom`	分頁按鈕的底部內距
`--padding-end`	如果方向為由左至右，則為分頁按鈕的右內距；如果方向為由右至左，則為左內距
`--padding-start`	如果方向為由左至右，則為分頁按鈕的左內距；如果方向為由右至左，則為右內距
`--padding-top`	分頁按鈕的頂部內距
`--ripple-color`	按鈕漣漪效果的顏色

插槽

此元件沒有可用的插槽。

用法​

屬性​

disabled​

download​

href​

layout​

mode​

rel​

selected​

tab​

target​

事件​

方法​

CSS 陰影部分​

CSS 自訂屬性​

插槽​

目錄

用法

屬性

disabled

download

href

layout

mode

rel

selected

tab

target

事件

方法

CSS 陰影部分

CSS 自訂屬性

插槽