Skip to main content
Version: v6

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

プロパティ

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

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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

Slots

No slots available for this component.