メインコンテンツまでスキップ
Version: v6

ion-tab-button

shadow

Contents

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

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

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

DescriptionIf true, the user cannot interact with the tab button.
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

DescriptionThe mode determines which platform styles to use.
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

DescriptionThe selected tab component
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

CSS Shadow Parts

NameDescription
nativeThe native HTML anchor element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the tab button
--background-focusedBackground of the tab button when focused with the tab key
--background-focused-opacityOpacity of the tab button background when focused with the tab key
--colorColor of the tab button
--color-focusedColor of the tab button when focused with the tab key
--color-selectedColor of the selected tab button
--padding-bottomBottom padding of the tab button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
--padding-topTop padding of the tab button
--ripple-colorColor of the button ripple effect