ion-toolbar

shadow

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

¥Toolbars are generally positioned above or below content and provide content and actions for the current screen. When placed within the content, toolbars will scroll with the content.

工具栏可以包含多个不同的组件，包括标题、按钮、图标、后退按钮、菜单按钮、搜索栏、段、进度栏等。

¥Toolbars can contain several different components including titles, buttons, icons, back buttons, menu buttons, searchbars, segments, progress bars, and more.

基本用法

¥Basic Usage

建议将工具栏放置在 header 或 footer 内部以便正确定位。当工具栏放置在标题中时，它将固定在内容的顶部。当它被放置在页脚中时，它将显示为固定在底部。全屏内容将滚动到页眉或页脚中的工具栏后面。title 组件可用于在工具栏内显示文本。

¥It is recommended to put a toolbar inside of a header or footer for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A title component can be used to display text inside of the toolbar.

工具栏中的按钮

¥Buttons in Toolbars

放置在工具栏中的按钮应放置在 buttons 组件内部。可以使用名为 slot 的按钮将按钮组件放置在工具栏内部。"primary" 和 "secondary" 插槽在 ios 和 md 模式下的行为不同。

¥Buttons placed in a toolbar should be placed inside of the buttons component. The buttons component can be positioned inside of the toolbar using a named slot. The "primary" and "secondary" slots behave differently in ios and md mode.

按钮组件可以封装标准 button、返回键、菜单按钮 或其中的几个。默认情况下，工具栏中的按钮的样式设置为清晰，但可以使用按钮上的 fill 属性更改此设置。本例中后退按钮和菜单按钮上包含的属性用于显示目的；请参阅各自的文档以了解正确使用方法。

¥The buttons component can wrap a standard button, back button, menu button, or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the fill property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.

工具栏中的搜索栏

¥Searchbars in Toolbars

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

¥A searchbar can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height.

工具栏中的段

¥Segments in Toolbars

片段 通常用在工具栏中，用于在同一页面上的两个不同内容视图之间切换。它们可以与其他组件（例如按钮）一起放置在工具栏中，但不应放置在标题旁边。

¥Segments are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title.

工具栏中的进度条

¥Progress Bars in Toolbars

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

¥A progress bar is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar.

主题化

¥Theming

颜色

¥Colors

CSS 自定义属性

¥CSS Custom Properties

边框

¥Borders

在 md 模式下，<ion-header> 将在底部接收框阴影，<ion-footer> 将在顶部接收框阴影。在 ios 模式下，<ion-header> 将在底部接收边框，而 <ion-footer> 将在顶部接收边框。

¥In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top.

属性

¥Properties

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.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

事件

¥Events

No events available for this component.

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

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

插槽

¥Slots

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.