ion-header

ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上の ツールバー のラッパーとして使用することをお勧めしますが、任意の要素をラップするために使用することもできます。ツールバーがヘッダー内で使用されている場合、コンテンツはサイズが正しくなるように調整され、ヘッダーはデバイスのセーフエリアを考慮します。

基本的な使用方法

半透明ヘッダー

ヘッダーは、translucent プロパティを設定することで、ネイティブ iOS アプリケーションに見られる透明度と一致させることができます。ヘッダーの後ろでコンテンツがスクロールするのを確認するには、コンテンツに fullscreen プロパティを設定する必要があります。この効果は、モードが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。

凝縮されたヘッダー

Ionic は、ネイティブ iOS アプリケーションにある、大きなツールバーのタイトルを表示してから、スクロール時に小さなタイトルに縮小する機能を提供します。これは、コンテンツの上に1つ、コンテンツの内側に1つの、2つのヘッダーを追加し、コンテンツ内のヘッダーの collapse プロパティを "condense" に設定することで実現できます。この効果は、モードが "ios" の場合にのみ適用されます。

フェードヘッダー

多くのネイティブ iOS アプリケーションでは、ツールバーにフェード効果があります。これは、ヘッダーの collapse プロパティを "fade" に設定することで実現できます。ページが最初にロードされると、ヘッダーの背景と境界線が非表示になります。コンテンツがスクロールされると、ヘッダーがフェードインで戻ります。この効果は、モードが "ios" の場合にのみ適用されます。

この機能は、凝縮されたヘッダーと組み合わせることもできます。"fade" に設定された値を持つ collapse プロパティは、コンテンツの外側のヘッダーに設定する必要があります。

仮想スクロールでの使用

フェードヘッダーが正しく機能するには、スクロールコンテナーが必要です。仮想スクロールソリューションを使用する場合、カスタムのスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に .ion-content-scroll-host クラスを追加する必要があります。

境界線

"md" モードでは、ヘッダーの下部に box-shadow が付きます。"ios" モードでは、下部に border が付きます。これらは、ヘッダーに .ion-no-border クラスを追加することで削除できます。

プロパティ

collapse

説明	ヘッダーに適用されるスクロール効果を記述します。iOSモードでのみ適用されます。 通常は 折りたたみ可能な大きなタイトル に使用されます
属性	collapse
タイプ	"condense" ｜ "fade" ｜ undefined
デフォルト	undefined

mode

説明	モードは、使用するプラットフォームスタイルを決定します。
属性	mode
タイプ	"ios" ｜ "md"
デフォルト	undefined

translucent

説明	trueの場合、ヘッダーは半透明になります。モードが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。 注: ヘッダーの後ろにコンテンツをスクロールするには、コンテンツに fullscreen 属性を設定する必要があります。
属性	translucent
タイプ	boolean
デフォルト	false

イベント

このコンポーネントで利用可能なイベントはありません。

メソッド

このコンポーネントで利用可能なパブリックメソッドはありません。

CSSシャドウパーツ

このコンポーネントで利用可能なCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで利用可能なCSSカスタムプロパティはありません。

スロット

このコンポーネントで利用可能なスロットはありません。