工具栏组件

shadow

工具栏通常位于内容的上方或下方，为当前屏幕提供内容和操作选项。当放置在 内容区 内时，工具栏会随内容一起滚动。

工具栏可以包含多种不同的组件，包括标题、按钮、图标、返回按钮、菜单按钮、搜索栏、分段控件、进度条等。

基本用法

建议将工具栏放置在 页眉 或 页脚 中，以确保其位置正确。当工具栏放在页眉中时，它会固定在内容区的顶部。当放置在页脚中时，它会固定在底部。全屏内容会在页眉或页脚的工具栏后面滚动。可以使用 标题 组件在工具栏内部显示文本。

工具栏中的按钮

放置在工具栏中的按钮应放在 按钮组 组件内。按钮组件可以通过指定的 插槽 在工具栏内定位。"primary" 和 "secondary" 插槽在 ios 和 md 模式下的行为有所不同。

按钮组件可以包裹一个标准的 按钮、返回按钮、菜单按钮，或任意多个这些按钮。工具栏中的按钮默认样式为透明背景，但可以通过按钮的 fill 属性来更改。本例中返回按钮和菜单按钮包含的属性仅用于展示目的；请参阅它们各自的文档以了解正确的使用方法。

工具栏中的搜索栏

可以将 搜索栏 放置在工具栏内，以便搜索内容。它应该是工具栏的唯一子组件，并且会占据整个宽度和高度。

工具栏中的分段控件

分段控件 通常用于工具栏，以在同一页面上切换不同的内容视图。它们可以和其他组件（如按钮）一起放置在工具栏中，但不应与标题并排放置。

工具栏中的进度条

进度条 用作加载指示器，显示应用中的持续进程。进度条可以与工具栏内的任何其他组件一起放置，因为它们会与工具栏的底部对齐。

主题定制

颜色

CSS 自定义属性

边框

在 md 模式下，<ion-header> 底部会显示一个盒阴影，而 <ion-footer> 顶部会显示一个盒阴影。在 ios 模式下，<ion-header> 底部会显示一条边框，而 <ion-footer> 顶部会显示一条边框。

属性

color

Description	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.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Default	undefined

mode

Description	The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

事件

No events available for this component.

方法

No public methods available for this component.

CSS Shadow Parts

Name	Description
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

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	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

MD

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	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	Description
``	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.