ion-title

阴影

标题是一个文本组件，用于设置 工具栏 的标题。它可以用于描述用户当前所在的屏幕或部分，或者正在使用的应用程序。

基本

可折叠的大标题

当 内容 滚动到滚动容器的开头时，将显示大标题。当标题滚动到标题后面时，缩小的标题将淡入。

信息

此功能仅适用于 iOS。

可折叠按钮

按钮 组件可以与 collapse 属性一起使用，以在工具栏折叠时另外显示在标题中。

可访问性

标题

创建标题时，我们通常建议使用 语义标题元素 (h1-h6)。但是，在某些情况下，您可能需要更新标题以被辅助技术视为特定标题。例如，如果您在视图顶部有一个标题，您可能希望将其视为一级标题。

为了实现这一点，开发人员应该在标题上使用 heading 角色。这将指示辅助技术标题是一种标题类型。然后，开发人员应该使用 aria-level 属性 来设置标题级别。

例如，如果我们想让标题的行为类似于 h1 元素，我们将在标题上设置 role="heading" 和 aria-level="1"。当使用 焦点管理器 时，这是必要的。

由于可以在视图上使用多个标题元素，并与语义标题元素结合使用，因此 Ionic 不会自动设置标题的 role 或 aria-level。开发人员有责任处理此问题。

主题

可折叠的大标题应该与您的其余内容无缝地显示。这意味着包含可折叠大标题的工具栏的背景色应该始终与内容的背景色匹配。

默认情况下，包含标准标题的工具栏使用 opacity: 0 隐藏，并随着您通过滚动折叠大标题而逐渐显示。因此，您在标准标题后面看到的背景色实际上是内容的背景色。

您可以通过设置 --background CSS 变量来更改包含标准标题的工具栏的背景色。这样会让标题在折叠大标题时改变颜色。

当为大标题的文本颜色设置样式时，您应该全局定位大标题，而不是在特定页面或选项卡的上下文中，否则它的样式在导航动画期间将不会应用。

CSS 自定义属性

属性

color

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

size

描述	工具栏标题的大小。
属性	size
类型	"large" ｜ "small" ｜ undefined
默认	undefined

事件

此组件没有可用的事件。

方法

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

CSS 阴影部分

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

CSS 自定义属性

iOS

名称	描述
--color	标题的文本颜色

MD

名称	描述
--color	标题的文本颜色

插槽

此组件没有可用的插槽。