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

ion-tab-bar

shadow

Contents

TabBarは、tab buttonsのセットを含むUIコンポーネントです。各tabと通信するには、tabsの内部にTabBarを設定する必要があります。

Usage

<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

Properties

color

DescriptionThe color to use from your application's color palette.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information on colors, see theming.
Attributecolor
Typestring | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

selectedTab

DescriptionThe selected tab component
Attributeselected-tab
Typestring | undefined
Defaultundefined

translucent

DescriptionIf true, the tab bar will be translucent.
Only applies when the mode is "ios" and the device supports
backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

CSS Custom Properties

NameDescription
--backgroundBackground of the tab bar
--borderBorder of the tab bar
--colorColor of the tab bar