ion-title
Titleは、ツールバーのタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
Basic
折りたたみ式ラージタイトル
大きなタイトルは、contentがスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。
This feature is only available for iOS.
折りたたみ式ボタン
buttonsコンポーネントは、collapse
プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。
アクセシビリティ
見出し
見出しを作成する場合、一般的にはセマンティック見出し要素(h1-h6)を使うことをお勧めします。しかし、支援技術によって特定の見出しとして扱われるようにTitleを更新する必要がある場合があります。例えば、ビューの一番上にTitleがある場合、これをレベル1の見出しと見なしたいかもしれません。
これを実現するために、開発者はTitleでheading
roleを使用する必要があります。これにより、Titleが見出しの一種であることを支援技術に示すことができます。そこから、開発者はaria-level
属性を使用して見出しレベルを設定する必要があります。
例えば、Titleをh1
要素のように動作させたい場合、Titleにrole="heading"
とaria-level="1"
を設定します。これはFocus Managerを使用するときに必要です。
複数のTitle要素をセマンティック見出し要素と組み合わせてビューで使用することができるため、Ionicは自動的にTitleのrole
やaria-level
を設定しません。これを処理するのは開発者の責任です。
Theming
折りたたみ式ラージタイトルは、コンテンツの他の部分との関係でシームレスに表示される必要があります。つまり、折りたたみ可能なラージタイトルを含むツールバーの背景色は、常にコンテンツの背景色と一致する必要があります。
デフォルトでは、標準タイトルを含むツールバーは opacity: 0
を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。
標準タイトルのあるツールバーの背景色は、CSS変数に --background
を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
CSSカスタムプロパティ
プロパティ
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 |
イベント
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カスタムプロパティ
- 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.