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 | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
size
| Description | ツールバーのタイトルの大きさを指定します。 |
| 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 | タイトルの文字色 |
Slots
No slots available for this component.