ion-toolbar
工具栏通常位于内容的上方或下方，为当前屏幕提供内容和操作。当放置在内容内时，工具栏会随内容滚动。
🌐 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
建议将工具栏放置在头部或底部以获得适当的定位。当工具栏放置在头部时，它将固定显示在内容的顶部。当放置在底部时，它将固定显示在底部。全屏内容将在头部或底部的工具栏后滚动。可以使用标题组件在工具栏中显示文本。
🌐 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.
按钮组件可以封装一个标准的按钮、返回按钮、菜单按钮，或者几种这些按钮的组合。工具栏中的按钮默认样式为透明，但可以通过按钮上的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
一个 搜索栏 可以放置在工具栏内以搜索内容。它应该是工具栏中唯一的子组件，并且将占据整个宽度和高度。
🌐 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
分段 通常用于工具栏中，在同一页面上切换两种不同的内容视图。它们可以与其他组件（例如按钮）一起放置在工具栏中，但不应与标题放在一起。
工具栏中的进度条
🌐 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. 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 |
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 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 自定义属性
🌐 CSS Custom Properties
- iOS
- 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 |
|---|---|
--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. |