ion-title
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.
info
This feature is only available for iOS.
Collapsible Buttons
The buttons component can be used with the collapse property to additionally display in the header as the toolbar is collapsed.
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.
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.
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.
ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
CSS Custom 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 & Record<never, never> ｜ undefined |
| Default | undefined |
size
| Description | The size of the toolbar title. |
| Attribute | size |
| Type | "large" ｜ "small" ｜ undefined |
| Default | undefined |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
| Name | Description |
|---|---|
--color | Text color of the title |
Slots
No slots available for this component.