バージョン: 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に移動する代わりにダウンロードするように指示するため、ユーザーはローカルファイルとして保存するように求められます。属性に値がある場合、[保存]プロンプトに事前に入力されたファイル名として使用されます（ユーザーは必要に応じてファイル名を変更できます）。
属性	`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`	タブキーでフォーカスされたときのタブボタンの背景
`--background-focused-opacity`	タブキーでフォーカスされたときのタブボタンの背景の不透明度
`--color`	タブボタンの色
`--color-focused`	タブキーでフォーカスされたときのタブボタンの色
`--color-selected`	選択されたタブボタンの色
`--padding-bottom`	タブボタンの下部のパディング
`--padding-end`	方向が左から右の場合は右のパディング、方向が右から左の場合はタブボタンの左のパディング
`--padding-start`	方向が左から右の場合は左のパディング、方向が右から左の場合はタブボタンの右のパディング
`--padding-top`	タブボタンの上部のパディング
`--ripple-color`	ボタンのリップル効果の色

名前	説明
`--background`	タブボタンの背景
`--background-focused`	タブキーでフォーカスされたときのタブボタンの背景
`--background-focused-opacity`	タブキーでフォーカスされたときのタブボタンの背景の不透明度
`--color`	タブボタンの色
`--color-focused`	タブキーでフォーカスされたときのタブボタンの色
`--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カスタムプロパティ

スロット