ion-toolbar
工具栏通常位于内容的上方或下方，为当前屏幕提供内容和操作。当放置在内容内部时，工具栏将随内容一起滚动。
工具栏可以包含多种不同的组件，包括标题、按钮、图标、返回按钮、菜单按钮、搜索栏、分段、进度条等。
基本用法
建议将工具栏放在页眉或页脚内部以获得正确的定位。当工具栏放置在页眉中时，它将固定在内容顶部显示。当放置在页脚中时，它将固定在底部显示。全屏内容将滚动到页眉或页脚中的工具栏后面。标题组件可用于在工具栏内显示文本。
工具栏中的按钮
放置在工具栏中的按钮应放在按钮组件内部。buttons 组件可以使用命名的插槽定位在工具栏内部。"primary" 和 "secondary" 插槽在 ios 和 md 模式下的行为不同。
buttons 组件可以包裹标准按钮、返回按钮、菜单按钮，或其中任意多个的组合。工具栏中的按钮默认样式为透明，但可以使用按钮上的 fill 属性进行更改。此示例中返回按钮和菜单按钮上包含的属性仅用于展示目的；请参阅各自的文档以了解正确用法。
工具栏中的搜索栏
可以将搜索栏放置在工具栏内部以搜索内容。它应该是工具栏的唯一子组件，并将占满整个宽度和高度。
工具栏中的分段
分段通常用于工具栏中，以在同一页面上的两个不同内容视图之间切换。它们可以与其他组件（如按钮）一起放置在工具栏中，但不应与标题一起放置。
工具栏中的进度条
进度条用作加载指示器，以显示应用中的进行中进程。进度条可以与工具栏中的任何其他组件一起放置，因为它们将与工具栏底部对齐。
主题
颜色
CSS 自定义属性
边框
在 md 模式下，<ion-header> 底部将有一个 box-shadow，<ion-footer> 顶部将有一个 box-shadow。在 ios 模式下，<ion-header> 底部将有一个边框，<ion-footer> 顶部将有一个边框。
属性
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. |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | undefined |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
事件
该组件没有可用的事件。
方法
该组件没有可用的公共方法。
CSS Shadow Parts
| Name | 说明 |
|---|---|
background | The background of the toolbar, covering the entire area behind the toolbar content. |
container | The container that wraps all toolbar content, including the default slot and named slot content. |
content | The container for the default slot, wrapping content provided without a named slot. |
CSS 自定义属性
- iOS
- MD
| Name | 说明 |
|---|---|
--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 | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar |
--padding-top | Top padding of the toolbar |
| Name | 说明 |
|---|---|
--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 | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar |
--padding-top | Top padding of the toolbar |
插槽
| Name | 说明 |
|---|---|
| Content is placed between the named slots if provided without a slot. | |
end | Content is placed to the right of the toolbar text in LTR, and to the left in RTL. |
primary | Content is placed to the right of the toolbar text in ios mode, and to the far right in md mode. |
secondary | Content is placed to the left of the toolbar text in ios mode, and directly to the right in md mode. |
start | Content is placed to the left of the toolbar text in LTR, and to the right in RTL. |