Skip to main content
Version: v7

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でのみ適用されます。 通常、折りたたみ式ラージタイトルに使用します。
Attributecollapse
Type"condense" | "fade" | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

translucent

Descriptiontrueの場合、ヘッダーは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。 注意:ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに fullscreen 属性が設定されている必要があります。
Attributetranslucent
Typeboolean
Defaultfalse

イベント

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.