ion-toolbar
工具栏（Toolbar）通常位于内容的上方或下方，提供当前屏幕的内容和操作。当放置在内容（content）内部时，工具栏将随内容滚动。
工具栏可以包含多种不同的组件，包括标题、按钮、图标、返回按钮、菜单按钮、搜索栏、分段控件、进度条等。
基本用法
建议将工具栏放在头部（header）或底部（footer）内部以获得正确的定位。当工具栏放置在头部时，它将固定在内容的顶部。当放置到底部时，它将固定在底部。全屏内容将在头部或底部中的工具栏后面滚动。标题（title）组件可用于在工具栏内显示文本。
工具栏中的按钮
放置在工具栏中的按钮应放在buttons（按钮）组件内部。按钮组件可以使用命名插槽（slot）定位在工具栏内。"primary" 和 "secondary" 插槽在 ios 和 md 模式下的行为不同。
按钮组件可以包装标准按钮（button）、返回按钮（back button）、菜单按钮（menu button），或其中的多个。工具栏中的按钮默认样式为透明，但可以通过按钮上的 fill 属性更改。此示例中包含的返回按钮和菜单按钮上的属性仅用于展示目的；请参阅各自文档了解正确用法。
工具栏中的搜索栏
搜索栏（searchbar）可以放置在工具栏内部以搜索内容。它应该是工具栏的唯一子组件，并将占据全宽和全高。
工具栏中的分段控件
分段控件（Segment）通常用于工具栏中，以在同一页面的两种不同内容视图之间切换。它们可以与其他组件（如按钮）一起放置在工具栏中，但不应与标题一起放置。
工具栏中的进度条
进度条（progress bar）用作加载指示器，显示应用中正在进行的进程。进度条可以放置在工具栏内任何其他组件中，因为它们将与工具栏底部对齐。
主题
颜色
CSS 自定义属性
边框
在 md 模式下，<ion-header> 将在底部有一个 box-shadow，<ion-footer> 将在顶部有一个 box-shadow。在 ios 模式下，<ion-header> 将在底部有一个 border，<ion-footer> 将在顶部有一个 border。
属性
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 阴影部分
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
| 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. |