版本：v8

ion-tab-button

选项卡按钮是一个 UI 组件，放置在选项卡栏内部。选项卡按钮可以指定图标和标签的布局，并连接到选项卡视图。

有关配置选项卡的更多详细信息，请参阅 tabs 文档。

用法

Angular
Javascript
React
Vue

<ion-tabs>
  <!-- 选项卡栏 -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar" aria-hidden="true"></ion-icon>
      <ion-label>日程</ion-label>
    </ion-tab-button>

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

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

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

<ion-tabs>
  <!-- 选项卡视图 -->
  <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>

  <!-- 选项卡栏 -->
  <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>日程</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>演讲者</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>地图</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>关于</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>
      {/*-- 选项卡栏 --*/}
      <IonTabBar slot="bottom">
        <IonTabButton tab="schedule">
          <IonIcon icon={calendar} aria-hidden="true" />
          <IonLabel>日程</IonLabel>
        </IonTabButton>

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

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

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

<template>
  <ion-tabs>
    <!-- 选项卡栏 -->
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="schedule" href="/tabs/schedule">
        <ion-icon :icon="calendar" aria-hidden="true"></ion-icon>
        <ion-label>日程</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="speakers" href="/tabs/speakers">
        <ion-icon :icon="personCircle" aria-hidden="true"></ion-icon>
        <ion-label>演讲者</ion-label>
      </ion-tab-button>

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

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

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

属性

disabled

说明	If `true`, the user cannot interact with the tab button.
属性	`disabled`
类型	`boolean`
默认值	`false`

download

说明	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
属性	`download`
类型	`string ｜ undefined`
默认值	`undefined`

href

说明	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
属性	`href`
类型	`string ｜ undefined`
默认值	`undefined`

layout

说明	Set the layout of the text and icon in the tab bar. It defaults to `"icon-top"`.
属性	`layout`
类型	`"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined`
默认值	`undefined`

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`undefined`

rel

说明	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
属性	`rel`
类型	`string ｜ undefined`
默认值	`undefined`

selected

说明	The selected tab component
属性	`selected`
类型	`boolean`
默认值	`false`

tab

说明	A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
属性	`tab`
类型	`string ｜ undefined`
默认值	`undefined`

target

说明	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
属性	`target`
类型	`string ｜ undefined`
默认值	`undefined`

事件

该组件没有可用的事件。

方法

该组件没有可用的公共方法。

CSS Shadow Parts

Name	说明
`native`	The native HTML anchor element that wraps all child elements.

CSS 自定义属性

Name	说明
`--background`	Background of the tab button
`--background-focused`	Background of the tab button when focused with the tab key
`--background-focused-opacity`	Opacity of the tab button background when focused with the tab key
`--color`	Color of the tab button
`--color-focused`	Color of the tab button when focused with the tab key
`--color-selected`	Color of the selected tab button
`--padding-bottom`	Bottom padding of the tab button
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
`--padding-top`	Top padding of the tab button
`--ripple-color`	Color of the button ripple effect

Name	说明
`--background`	Background of the tab button
`--background-focused`	Background of the tab button when focused with the tab key
`--background-focused-opacity`	Opacity of the tab button background when focused with the tab key
`--color`	Color of the tab button
`--color-focused`	Color of the tab button when focused with the tab key
`--color-selected`	Color of the selected tab button
`--padding-bottom`	Bottom padding of the tab button
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
`--padding-top`	Top padding of the tab button
`--ripple-color`	Color of the button ripple effect

插槽

该组件没有可用的插槽。

用法​

属性​

disabled​

download​

href​

layout​

mode​

rel​

selected​

tab​

target​

事件​

方法​

CSS Shadow Parts​

CSS 自定义属性​

插槽​

目录

用法

属性

disabled

download

href

layout

mode

rel

selected

tab

target

事件

方法

CSS Shadow Parts

CSS 自定义属性

插槽