本文へスキップ
バージョン: v8

ion-title

シャドウ

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

基本​

折りたたみ可能な大きなタイトル​

コンテンツがスクロールコンテナの先頭にスクロールされると、大きなタイトルが表示されます。タイトルがヘッダーの後ろにスクロールされると、凝縮されたタイトルがフェードインします。

情報

この機能はiOSでのみ使用できます。

折りたたみ可能なボタン​

ボタンコンポーネントは、collapseプロパティと共に使用して、ツールバーが折りたたまれたときにヘッダーにも追加で表示できます。

アクセシビリティ​

見出し​

見出しを作成する際は、通常セマンティックな見出し要素（h1〜h6）を使用することをお勧めします。ただし、支援技術によって特定の見出しとして扱われるようにタイトルを更新する必要がある場合があります。たとえば、ビューの上部にタイトルがある場合、これをレベル1の見出しと見なしたい場合があります。

これを実現するために、開発者はタイトルでheadingロールを使用する必要があります。これにより、支援技術にタイトルが何らかの見出しであることが示されます。その後、開発者はaria-level属性を使用して見出しレベルを設定する必要があります。

たとえば、タイトルをh1要素のように動作させたい場合は、タイトルでrole="heading"とaria-level="1"を設定します。これは、フォーカス マネージャーを使用する場合に必要です。

複数のタイトル要素をセマンティックな見出し要素と組み合わせてビューで使用できるため、Ionicはタイトルのroleまたはaria-levelを自動的に設定しません。これは開発者の責任です。

テーマ設定​

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

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

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

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

CSSカスタムプロパティ​

プロパティ​

色​

説明アプリケーションのカラーパレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマ設定を参照してください。
属性color
タイプ"danger"｜"dark"｜"light"｜"medium"｜"primary"｜"secondary"｜"success"｜"tertiary"｜"warning"｜文字列｜未定義
デフォルト未定義

サイズ​

説明ツールバータイトルのサイズ。
属性size
タイプ"large"｜"small"｜未定義
デフォルト未定義

イベント​

このコンポーネントで使用できるイベントはありません。

メソッド​

このコンポーネントで使用できる公開メソッドはありません。

CSSシャドウパーツ​

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ​

名前説明
--colorタイトルのテキストの色

スロット​

このコンポーネントで使用できるスロットはありません。

目次

このページを編集