ion-title
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
当 内容 滚动到滚动容器的起始位置时，大标题将显示。当标题滚动到头部后面时，简化标题将淡入显示。
🌐 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
按钮 组件可以与 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)。然而，在某些情况下，你可能需要更新标题，使其被辅助技术视为特定的标题。例如，如果你在视图顶部有一个标题，你可能希望它被视为一级标题。
🌐 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.
为了实现这一点，开发者应在 Title 上使用 heading 角色。这将向辅助技术表明 Title 是一种标题类型。之后，开发者应使用 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.