Footer
ion-footer
页脚是位于页面底部的页面的根部组件。 页脚可以是离子工具栏的包装，以确保内容区域的大小正确。
使用
<ion-content></ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
Sass 变量
iOS
| Property | Default | Description |
|---|---|---|
$toolbar-order-ios |
( back-button: 0, menu-toggle-start: 1, buttons-left: 2, buttons-start: 3, content: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, ) |
Order of the toolbar elements |
$toolbar-ios-button-font-size |
1.7rem |
Font size of the toolbar button |
$toolbar-ios-title-font-size |
1.7rem |
Font size of the toolbar title |
$toolbar-ios-title-font-weight |
600 |
Font weight of the toolbar title |
$toolbar-ios-title-text-align |
center |
Text alignment of the toolbar title |
$toolbar-ios-title-text-color |
color-contrast($colors-ios, $toolbar-ios-background) |
Text color of the toolbar title |
$toolbar-ios-button-color |
color-contrast($colors-ios, $toolbar-ios-background, ios) |
Text color of the toolbar button |
$toolbar-ios-button-border-radius |
4px |
Border radius of the toolbar button |
$toolbar-ios-button-strong-font-weight |
600 |
Font weight of the strong toolbar button |
$navbar-ios-height |
$toolbar-ios-height |
Height of the navigation bar |
Material Design
| Property | Default | Description |
|---|---|---|
$toolbar-order-md |
( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, ) |
Order of the toolbar elements |
$toolbar-md-title-font-size |
2rem |
Font size of the toolbar title |
$toolbar-md-title-text-color |
color-contrast($colors-md, $toolbar-md-background, md) |
Text color of the toolbar title |
$toolbar-md-button-font-size |
1.4rem |
Font size of the toolbar button |
$toolbar-md-button-color |
$toolbar-md-title-text-color |
Text color of the toolbar button |
$toolbar-md-button-border-radius |
2px |
Border radius of the toolbar button |
$toolbar-md-button-strong-font-weight |
bold |
Font weight of the strong toolbar button |
$navbar-md-height |
$toolbar-md-height |
Height of the navigation bar |
Windows Platform
| Property | Default | Description |
|---|---|---|
$toolbar-order-wp |
( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, ) |
Order of the toolbar elements |
$toolbar-wp-title-padding |
0 6px |
Padding of the toolbar title |
$toolbar-wp-title-font-size |
1.5rem |
Font size of the toolbar title |
$toolbar-wp-title-font-weight |
bold |
Font weight of the toolbar title |
$toolbar-wp-title-text-transform |
uppercase |
Text transform of the toolbar title |
$toolbar-wp-title-text-color |
color-contrast($colors-wp, $toolbar-wp-background, wp) |
Text color of the toolbar title |
$toolbar-wp-button-font-size |
1.4rem |
Font size of the toolbar button |
$toolbar-wp-button-color |
color-contrast($colors-wp, $toolbar-wp-background, wp) |
Text color of the toolbar button |
$toolbar-wp-button-border-radius |
2px |
Border radius of the toolbar button |
$toolbar-wp-button-strong-font-weight |
bold |
Font weight of the strong toolbar button |
$navbar-wp-height |
$toolbar-wp-height |
Height of the navigation bar |