mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
b2021fd9c4
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used. - removes some of the non mode-specific global Sass variables - updates the md and ios values so that the default is the css variable with different fallbacks - removes non-color related css variables from the global file - fixes item so it uses the background color that is set by the global file # Breaking Changes ## Removed Global CSS Variables The following global CSS variables have been removed for the reasons listed. | Variable Name | Reason | | ----------------------------------| ------------------------------------------------| | `--ion-toolbar-color-inactive` | Unused | | `--ion-ripple-background-color` | Unused / Ripple color is based on component | | `--ion-header-size` | Removed in favor of using CSS for h1-h6 | | `--ion-header-step` | Removed in favor of using CSS for h1-h6 | ## Renamed Global CSS Variables The following global CSS variables have been renamed for the reasons listed. | Old Variable Name | New Variable Name | Reason | | -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------| | `--ion-toolbar-text-color` | `--ion-toolbar-color` | Variable is not limited to text color | | `--ion-toolbar-color-active` | `--ion-toolbar-color-activated` | Consistency with our component variables | | `--ion-tabbar-text-color` | `--ion-tab-bar-color` | Variable is not limited to text color | | `--ion-tabbar-text-color-active` | `--ion-tab-bar-color-activated` | Consistency with our component variables | | `--ion-tabbar-background-color` | `--ion-tab-bar-background` | Applies to the background property | | `--ion-tabbar-background-color-focused` | `--ion-tab-bar-background-focused` | Applies to the background property | | `--ion-item-background-color` | `--ion-item-background` | Applies to the background property | | `--ion-item-background-color-active` | `--ion-item-background-activated` | Applies to the background property / Consistency with our component variables | | `--ion-item-text-color` | `--ion-item-color` | Variable is not limited to text color | | `--ion-placeholder-text-color` | `--ion-placeholder-color` | Consistency with other variables | Fixes #15989 Fixes #15559
ion-tabbar
Tabbar is the UI component that implements the array of button of ion-tabs. It's provided by default when ion-tabs is used, though, this "implicit" tabbar can not be customized.
In order to have a custom tabbar, it should be provided in user's markup as direct children of ion-tabs:
<style>
ion-tabbar {
font-size: 20px;
}
</style>
<ion-tabs>
<!-- User tabs -->
<ion-tab></ion-tab>
<ion-tab></ion-tab>
<!-- User provided ion-tabbar that can be customized -->
<ion-tabbar color="dark" layout="icon-only">
</ion-tabs>
Properties
| Property | Attribute | Description | Type |
|---|---|---|---|
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 |
highlight |
highlight |
If true, show the tab highlight bar under the selected tab. |
boolean |
layout |
layout |
Set the layout of the text and icon in the tabbar. Available options: "icon-top", "icon-start", "icon-end", "icon-bottom", "icon-hide", "label-hide". |
"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" |
mode |
mode |
The mode determines which platform styles to use. Possible values are: "ios" or "md". |
"ios" | "md" |
placement |
placement |
Set the position of the tabbar, relative to the content. Available options: "top", "bottom". |
"bottom" | "top" |
selectedTab |
-- | The selected tab component | HTMLIonTabElement | undefined |
tabs |
-- | The tabs to render | HTMLIonTabElement[] |
translucent |
translucent |
If true, the tabbar will be translucent. Defaults to false. |
boolean |
Events
| Event | Detail | Description |
|---|---|---|
ionTabbarClick |
HTMLIonTabElement | Emitted when the tab bar is clicked |
Built with StencilJS