ion-header
ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。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 クラスを追加する必要があります。
Borders
"md"モードでは、ヘッダーの下部に box-shadow が表示されます。 "ios"モードでは、ヘッダの下部に border が表示されます。これらは、ヘッダーに .ion-no-border クラスを追加することで削除することができます。
プロパティ
collapse
| 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 |
mode
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
translucent
| 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.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.