Skip to main content
Version: v5

ion-tab-button

A tab button is a UI component that is placed inside of a tab bar. The tab button can specify the layout of the icon and label and connect to a tab view.

See the tabs documentation for more details on configuring tabs.

Usage

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

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

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

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

Properties

disabled

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

download

DescriptionThis 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).
Attributedownload
Typestring | undefined
Defaultundefined

href

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring | undefined
Defaultundefined

layout

DescriptionSet the layout of the text and icon in the tab bar. It defaults to '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

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring | undefined
Defaultundefined

selected

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

tab

DescriptionA 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.
Attributetab
Typestring | undefined
Defaultundefined

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

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

CSS Custom Properties

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.