跳至主要内容
版本：v8

ion-toolbar

阴影

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

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

基本用法​

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

工具栏中的按钮​

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

按钮组件可以包装标准的 按钮、返回按钮、菜单按钮 或其中任何几种。 工具栏中的按钮默认情况下设置为透明样式，但这可以通过使用按钮上的 fill 属性来更改。 此示例中返回按钮和菜单按钮中包含的属性用于显示目的；请参阅它们各自的文档以了解正确用法。

工具栏中的搜索栏​

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

工具栏中的段​

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

工具栏中的进度条​

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

主题​

颜色​

CSS 自定义属性​

边框​

在 md 模式下，<ion-header> 将在底部获得一个阴影，而 <ion-footer> 将在顶部获得一个阴影。 在 ios 模式下，<ion-header> 将在底部获得一个边框，而 <ion-footer> 将在顶部获得一个边框。

属性​

color​

描述要从应用程序调色板中使用的颜色。 默认选项是："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。 有关颜色的更多信息，请参阅 主题。
属性color
类型"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
默认值undefined

mode​

描述模式决定使用哪个平台样式。
属性mode
类型"ios" ｜ "md"
默认值undefined

事件​

此组件没有可用事件。

方法​

此组件没有可用的公共方法。

CSS 阴影部分​

此组件没有可用的 CSS 阴影部分。

CSS 自定义属性​

名称描述
--background工具栏的背景
--border-color工具栏边框的颜色
--border-style工具栏边框的样式
--border-width工具栏边框的宽度
--color工具栏文本的颜色
--min-height工具栏的最小高度
--opacity工具栏背景的不透明度
--padding-bottom工具栏的底部填充
--padding-end如果方向为从左到右，则为工具栏的右侧填充，如果方向为从右到左，则为左侧填充
--padding-start如果方向为从左到右，则为工具栏的左侧填充，如果方向为从右到左，则为右侧填充
--padding-top工具栏的顶部填充

插槽​

名称描述
``如果提供的内容没有插槽，则内容将放置在命名插槽之间。
end内容放置在工具栏文本的右侧（LTR）或左侧（RTL）。
primary内容放置在 ios 模式下工具栏文本的右侧，以及 md 模式下最右侧。
secondary内容放置在 ios 模式下工具栏文本的左侧，以及 md 模式下直接右侧。
start内容放置在工具栏文本的左侧（LTR）或右侧（RTL）。

内容

编辑此页面