ion-title
标题是一个文本组件，用于设置 toolbar 的标题。它可用于描述用户当前所在的屏幕或部分或正在使用的应用。
¥Title is a text component that sets the title for a toolbar. It can be used to describe the screen or section a user is currently on or the app being used.
基本的
¥Basic
可折叠大标题
¥Collapsible Large Titles
当 content 滚动到滚动容器的开头时，将显示大标题。当标题滚动到标题后面时，压缩标题将淡入。
¥The large title will display when the content is scrolled to the start of the scroll container. When the title is scrolled behind the header, the condensed title will fade in.
此功能仅适用于 iOS。
¥This feature is only available for iOS.
可折叠按钮
¥Collapsible Buttons
buttons 组件可以与 collapse 属性一起使用，以便在工具栏折叠时另外显示在标题中。
¥The buttons component can be used with the collapse property to additionally display in the header as the toolbar is collapsed.
无障碍
¥Accessibility
标题
¥Headings
创建标题时，我们通常建议使用 语义标题元素 (h1-h6)。但是，在某些情况下，你可能需要更新标题才能被辅助技术视为特定标题。例如，如果视图顶部有一个标题，你可能希望将其视为 1 级标题。
¥When creating headings, we typically recommend using semantic heading elements (h1-h6). However, there may be instances where you need to update Title to be treated as a particular heading by assistive technologies. For example, if you have a Title at the top of a view, you may want this to be considered a level 1 heading.
为了实现这一点，开发者应该在标题上使用 heading 角色。这将向辅助技术表明标题是一种标题。从那里，开发者应该使用 aria-level 属性 设置标题级别。
¥To achieve this, developers should use the heading role on Title. This will indicate to assistive technologies that Title is a type of heading. From there, developers should use the aria-level attribute to set the heading level.
例如，如果我们想让标题表现得像 h1 元素，我们可以在标题上设置 role="heading" 和 aria-level="1"。使用 焦点经理 时这是必要的。
¥For example, if we wanted to make a Title behave like an h1 element, we would set role="heading" and aria-level="1" on the Title. This is necessary when using the Focus Manager.
由于多个 Title 元素可以与语义标题元素一起在视图上使用，因此 Ionic 不会自动设置 Title 的 role 或 aria-level。开发商有责任处理这个问题。
¥Since multiple Title elements can be used on a view in conjunction with semantic heading elements, Ionic does not automatically set the Title's role or aria-level. It is the responsibility of the developer to handle this.
主题化
¥Theming
可折叠的大标题应该与其他内容无缝衔接。这意味着包含可折叠大标题的工具栏的背景颜色应始终与内容的背景颜色相匹配。
¥The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the toolbar containing the collapsible large title should always match the background color of the content.
默认情况下，包含标准标题的工具栏使用 opacity: 0 隐藏，并在你通过滚动折叠大标题时逐渐显示。因此，你在标准标题后面看到的背景颜色实际上是内容的背景颜色。
¥By default, the toolbar that contains the standard title is hidden using opacity: 0 and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of the content.
你可以通过设置 --background CSS 变量来更改具有标准标题的工具栏的背景颜色。当你折叠大标题时，这将产生标题改变颜色的效果。
¥You can change the background color of the toolbar with the standard title by setting the --background CSS variable. This will give the effect of the header changing color as you collapse the large title.
当设置大标题的文本颜色样式时，你应该全局定位大标题，而不是在特定页面或选项卡的上下文中，否则在导航动画期间将不会应用其样式。
¥When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
CSS 自定义属性
¥CSS Custom Properties
属性
¥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 |
size
| Description | The size of the toolbar title. |
| Attribute | size |
| Type | "large" ｜ "small" ｜ undefined |
| 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
- iOS
- MD
| Name | Description |
|---|---|
--color | Text color of the title |
| Name | Description |
|---|---|
--color | Text color of the title |
插槽
¥Slots
No slots available for this component.