ion-header
ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上のツールバーのラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。
基本的な使い方
半透明のヘッダー
ヘッダーは、translucentプロパティを設定することで、ネイティブiOSアプリケーションで見られる透明度と一致させることができます。コンテンツをヘッダーの背後にスクロールさせるには、コンテンツにfullscreenプロパティを設定する必要があります。この効果は、モードが"ios"であり、デバイスがbackdrop-filterをサポートしている場合にのみ適用されます。
折りたたみのヘッダー
Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに collapse プロパティを "condense" に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。
フェードヘッダー
多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの collapse プロパティを "fade" に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。
この機能は、折りたたみヘッダーと組み合わせることができます。collapseプロパティに"fade"を設定した場合は、コンテンツの外側にあるヘッダーに適用する必要があります。
仮想スクロールの使用方法
フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に .ion-content-scroll-host クラスを追加する必要があります。
Borders
"md"モードでは、ヘッダーの下部に box-shadow が表示されます。 "ios"モードでは、ヘッダの下部に border が表示されます。これらは、ヘッダーに .ion-no-border クラスを追加することで削除することができます。
プロパティ
collapse
| Description | ヘッダーに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。 通常、折りたたみ式ラージタイトルに使用します。 |
| Attribute | collapse |
| Type | "condense" ｜ "fade" ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
translucent
| Description | trueの場合、ヘッダーは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。 注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに fullscreen 属性が設定されている必要があります。 |
| 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.