ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上のツールバーのラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
ヘッダーは、translucentプロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに fullscreen プロパティを設定する必要があります。この効果は、モードが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。
Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに collapse プロパティを "condense" に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの collapse プロパティを "fade" に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。
この機能は、Condensed Headerと組み合わせることができます。collapseプロパティに"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。
フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に .ion-content-scroll-host クラスを追加する必要があります。
"md"モードでは、ヘッダーの下部に box-shadow が表示されます。 "ios"モードでは、ヘッダの下部に border が表示されます。これらは、ヘッダーに .ion-no-border クラスを追加することで削除することができます。
| Description | Describes the scroll effect that will be applied to the header. Only applies in iOS mode.
Typically used for Collapsible Large Titles |
| Attribute | collapse |
| Type | "condense" ｜ "fade" ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | If true, the header will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content. |
| Attribute | translucent |
| Type | boolean |
| Default | false |
No events available for this component.
No public methods available for this component.
No CSS shadow parts available for this component.
No CSS custom properties available for this component.
No slots available for this component.