Skip to main content

ion-tab-bar

shadow

标签栏是一个 UI 组件,包含一组 选项卡按钮tabs 内部必须提供一个选项卡栏,以便与每个 tab 进行通信。

¥The tab bar is a UI component that contains a set of tab buttons. A tab bar must be provided inside of tabs to communicate with each tab.

用法

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

标签按钮中的标记

¥Badges in Tab Buttons

可以在选项卡按钮内添加标记,通常用于指示通知或高亮与元素相关的其他项目。

¥Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.

信息

空标记仅适用于 md 模式。

¥Empty badges are only available for md mode.

属性

¥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
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | 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

事件

¥Events

No events available for this component.

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

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

插槽

¥Slots

No slots available for this component.