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	ヘッダーに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。 通常、折りたたみ式ラージタイトルに使用します。
Attribute	collapse
Type	"condense" ｜ "fade" ｜ undefined
Default	undefined

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
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.