ion-toolbar

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

No CSS shadow parts available for this component.

CSS 自定义属性

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.