Skip to main content
Version: v7

ion-tab-button

shadow

tab buttonは、tab barの内部に配置されるUIコンポーネントです。tab buttonを使用すると、iconとlabelのレイアウトを指定し、tab viewに接続できます。

タブの設定の詳細については、tabs documentationを参照してください。

使い方

<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>

プロパティ

disabled

Descriptiontrueの場合、ユーザはタブボタンを操作することができません。
Attributedisabled
Typeboolean
Defaultfalse

download

Descriptionこの属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます(ユーザーはファイル名を変更することができます)。
Attributedownload
Typestring | undefined
Defaultundefined

href

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

layout

Descriptionタブバーのテキストとアイコンのレイアウトを設定します。デフォルトは"icon-top"です。
Attributelayout
Type"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

rel

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

selected

Description選択されたタブコンポーネント
Attributeselected
Typeboolean
Defaultfalse

tab

Descriptionion-tab にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。
Attributetab
Typestring | undefined
Defaultundefined

target

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeすべての子要素を包むネイティブHTMLのアンカー要素です。

CSSカスタムプロパティ

NameDescription
--backgroundタブボタンの背景
--background-focusedタブキーでフォーカスされたときのタブボタンの背景
--background-focused-opacityタブキーでフォーカスしたときのタブボタンの背景の不透明度
--colorタブボタンの色
--color-focusedタブキーでフォーカスしたときのタブボタンの色
--color-selected選択されたタブボタンの色
--padding-bottomタブボタンのBottom Padding
--padding-endタブボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-startタブボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topタブボタンのTop Padding
--ripple-colorボタンリプルエフェクトの色

Slots

No slots available for this component.