Skip to main content
Version: v8

ion-title

shadow

Titleは、ツールバーのタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。

Basic

折りたたみ式ラージタイトル

大きなタイトルは、contentがスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。

info

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のrolearia-levelを設定しません。これを処理するのは開発者の責任です。

Theming

折りたたみ式ラージタイトルは、コンテンツの他の部分との関係でシームレスに表示される必要があります。つまり、折りたたみ可能なラージタイトルを含むツールバーの背景色は、常にコンテンツの背景色と一致する必要があります。

デフォルトでは、標準タイトルを含むツールバーは opacity: 0 を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。

標準タイトルのあるツールバーの背景色は、CSS変数に --background を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。

ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。

CSSカスタムプロパティ

プロパティ

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

size

Descriptionツールバーのタイトルの大きさを指定します。
Attributesize
Type"large" | "small" | undefined
Defaultundefined

イベント

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カスタムプロパティ

NameDescription
--colorタイトルの文字色

Slots

No slots available for this component.