ion-title

shadow

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"を設定します。 複数の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カスタムプロパティ

Name	Description
--color	Text color of the title

Slots

No slots available for this component.