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-toolbar
Toolbars are positioned above or below content. When a toolbar is placed in an <ion-header> it will appear fixed at the top of the content, and when it is in an <ion-footer> it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an <ion-content>, toolbars will scroll with the content.
Buttons
Buttons placed in a toolbar should be placed inside of the <ion-buttons> element. The <ion-buttons> element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
| Slot | Description |
|---|---|
secondary |
Positions element to the left of the content in ios mode, and directly to the right in md mode. |
primary |
Positions element to the right of the content in ios mode, and to the far right in md mode. |
start |
Positions to the left of the content in LTR, and to the right in RTL. |
end |
Positions to the right of the content in LTR, and to the left in RTL. |
Borders
In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top. Both the md box-shadow and the ios border can be removed by adding the no-border attribute to the element.
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 |
mode |
mode |
The mode determines which platform styles to use. Possible values are: "ios" or "md". |
"ios" | "md" |
CSS Custom Properties
| Name | Description |
|---|---|
--background |
Background of the toolbar |
--border-color |
Color of the toolbar border |
--border-style |
Style of the toolbar border |
--border-width |
Width of the toolbar border |
--color |
Color of the toolbar text |
--min-height |
Minimum height of the toolbar |
--opacity |
Opacity of the toolbar background |
--padding-bottom |
Bottom padding of the toolbar |
--padding-end |
End padding of the toolbar |
--padding-start |
Start padding of the toolbar |
--padding-top |
Top padding of the toolbar |
Built with StencilJS