mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
bc3e192427
Updates the tab-bar to match the MD bottom navigation spec: https://material.io/design/components/bottom-navigation.html#specs Changes proposed in this pull request: - moved flex properties to host, inherit in child anchor element - this allows the user to customize the tab-button flex properties & fixes #16231 - increased letter spacing - removed transforms / transitions on active tab - decreased badge size, add badge styling when empty for MD - fix badge positioning on both iOS and MD - updates e2e tests, adds a preview test for tab-bar - updates documentation surrounding tabs fixes #16231 fixes ionic-team/ionic-docs#175 fixes ionic-team/ionic-docs#163
ion-tab-bar
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.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color |
color |
The 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. |
string | undefined |
undefined |
layout |
layout |
Set the layout of the text and icon in the tab bar. | "icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" |
'icon-top' |
mode |
mode |
The mode determines which platform styles to use. | "ios" | "md" |
undefined |
selectedTab |
selected-tab |
The selected tab component | string | undefined |
undefined |
translucent |
translucent |
If true, the tab bar will be translucent. |
boolean |
false |
CSS Custom Properties
| Name | Description |
|---|---|
--background |
Background of the tab bar |
--border |
Border of the tab bar |
--color |
Color of the tab bar |
Built with StencilJS