ion-content

shadow

コンテンツコンポーネントは、スクロール可能な領域を制御するためのいくつかの便利なメソッドを備えた、使いやすいコンテンツ領域を提供します。単一のビューにはコンテンツが1つだけ存在する必要があります。

コンテンツは、他の多くのIonicコンポーネントと同様に、CSSユーティリティで提供されるグローバルスタイルを使用するか、CSSと利用可能なCSSカスタムプロパティを使用して個別にスタイルを設定することで、パディング、マージンなどを変更するようにカスタマイズできます。

基本的な使用法

ヘッダーとフッター

コンテンツは、ページ内の最上位コンポーネントであるか、ヘッダー、フッター、またはその両方と一緒に使用できます。ヘッダーまたはフッターと一緒に使用する場合、残りの高さに合わせてサイズが調整されます。

フルスクリーンコンテンツ

デフォルトでは、コンテンツはヘッダーとフッターの間のスペースを埋めますが、それらの背後には移動しません。特定のケースでは、ヘッダーまたはフッターのいずれかにtranslucentプロパティが設定されている場合や、ツールバーにopacityが設定されている場合など、コンテンツがヘッダーとフッターの背後でスクロールするようにすることが望ましい場合があります。これは、コンテンツのfullscreenプロパティをtrueに設定することで実現できます。

固定コンテンツ

スクロール可能な領域の外に要素を配置するには、それらをfixedスロットに割り当てます。これにより、要素がコンテンツの左上に絶対配置されます。要素の位置を変更するには、top、right、bottom、leftのCSSプロパティを使用してスタイルを設定できます。

fixedSlotPlacementプロパティは、fixedスロット内のコンテンツをDOM内のメインコンテンツの前または後のどちらに配置するかを決定するために使用されます。beforeに設定すると、固定スロットコンテンツはメインコンテンツの前に配置されるため、メインコンテンツがキーボードフォーカスを受け取る前にキーボードフォーカスを受け取ります。これは、メインコンテンツに無限スクロールリストが含まれている場合に、FABまたはその他の固定コンテンツがタブキーを押すことで到達できないようにする場合に役立ちます。

スクロールメソッド

コンテンツは、コンテンツを下、上、または特定のポイントにスクロールするために呼び出すことができるメソッドを提供します。位置を瞬時に変更するのではなく、スムーズに移行するためにdurationを渡すことができます。

スクロールイベント

パフォーマンス上の理由から、コンテンツのスクロールイベントはデフォルトで無効になっています。ただし、scrollEventsをtrueに設定することで有効にできます。スクロールイベントをリッスンする前に、これが必要です。

コンソール

上記の例からログ出力された場合、コンソールメッセージがここに表示されます。

テーマ設定

色

CSSシャドウパーツ

CSSカスタムプロパティ

セーフエリアパディング

コンテンツコンポーネントは、セーフエリアを考慮して、そのいずれかの側に自動的にパディングを適用しません。これは、コンテンツコンポーネントが、ヘッダーやフッターなど、独自のパディングを適用する他のコンポーネントと組み合わせて使用されることが多いためです。ただし、コンテンツコンポーネントを単独で使用する場合は、セーフエリアにパディングを適用することが望ましい場合があります。これは、アプリケーション変数で説明されている--ion-safe-area-(dir)変数を使用することで、CSSを通じて行うことができます。

この最も一般的なユースケースは、ステータスバーを考慮してコンテンツの上部にパディングを適用することです。これは、padding-topプロパティを--ion-safe-area-top変数の値に設定することで行うことができます。

ion-content::part(scroll) {
  padding-top: var(--ion-safe-area-top, 0);
}

もう1つの一般的なユースケースは、デバイスが横向きモードでノッチが左側にある場合に、ノッチを考慮してコンテンツの左側にパディングを適用することです。これは、padding-leftプロパティを--ion-safe-area-left変数の値に設定することで行うことができます。

ion-content::part(scroll) {
  padding-left: var(--ion-safe-area-left, 0);
}

インターフェース

ScrollBaseDetail

interface ScrollBaseDetail {
  isScrolling: boolean;
}

ScrollDetail

interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
  scrollTop: number;
  scrollLeft: number;
}

ScrollBaseCustomEvent

必須ではありませんが、このインターフェースは、ionScrollStartおよびionScrollEndイベントの型付けを強化するために、CustomEventインターフェースの代わりに使用できます。

interface ScrollBaseCustomEvent extends CustomEvent {
  detail: ScrollBaseDetail;
  target: HTMLIonContentElement;
}

ScrollCustomEvent

必須ではありませんが、このインターフェースは、ionScrollイベントの型付けを強化するために、CustomEventインターフェースの代わりに使用できます。

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
  detail: ScrollDetail;
}

プロパティ

color

説明	アプリケーションのカラーパレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、および"dark"です。色の詳細については、テーマ設定を参照してください。
属性	color
型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
デフォルト	undefined

fixedSlotPlacement

説明	固定コンテンツがDOM内のメインコンテンツに対して配置される場所を制御します。これは、固定要素がキーボードフォーカスを受け取る順序を制御するために使用できます。たとえば、固定スロットのFABがメインページコンテンツよりも前にキーボードフォーカスを受け取る必要がある場合は、このプロパティを'before'に設定します。
属性	fixed-slot-placement
型	"after" ｜ "before"
デフォルト	'after'

forceOverscroll

説明	trueであり、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロール操作によりバウンスが発生します。コンテンツがionContentの境界を超える場合、何も変更されません。iOSでのシステムバウンスは無効にできないことに注意してください。これはOSレベルの設定です。
属性	force-overscroll
型	boolean ｜ undefined
デフォルト	undefined

fullscreen

説明	trueの場合、コンテンツはヘッダーとフッターの背後でスクロールします。この効果は、ツールバーを透明に設定することで簡単に見ることができます。
属性	fullscreen
型	boolean
デフォルト	false

scrollEvents

説明	パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。(ionScroll)からのリスニングを有効にするには、このプロパティをtrueに設定してください。
属性	scroll-events
型	boolean
デフォルト	false

scrollX

説明	X軸方向のコンテンツスクロールを有効にする場合は、このプロパティをtrueに設定してください。
属性	scroll-x
型	boolean
デフォルト	false

scrollY

説明	Y軸方向のコンテンツスクロールを無効にする場合は、このプロパティをfalseに設定してください。
属性	scroll-y
型	boolean
デフォルト	true

イベント

名前	説明	バブル
ionScroll	スクロール中に発生します。このイベントはデフォルトで無効になっています。有効にするには、scrollEventsをtrueに設定してください。	true
ionScrollEnd	スクロールが終了したときに発生します。このイベントはデフォルトで無効になっています。有効にするには、scrollEventsをtrueに設定してください。	true
ionScrollStart	スクロールが開始されたときに発生します。このイベントはデフォルトで無効になっています。有効にするには、scrollEventsをtrueに設定してください。	true

メソッド

getScrollElement

説明	実際のスクロールが行われる要素を取得します。この要素は、scrollイベントをサブスクライブしたり、scrollTopを手動で変更したりするために使用できます。ただし、ion-contentによって提供されるAPIを使用することをお勧めします。 例：スクロールイベントにはionScroll、ionScrollStart、ionScrollEndを使用し、コンテンツを特定の位置にスクロールするにはscrollToPoint()を使用します。
シグネチャ	getScrollElement() => Promise<HTMLElement>

scrollByPoint

説明	コンポーネント内で指定されたX/Y距離だけスクロールします。
シグネチャ	scrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom

説明	コンポーネントの一番下までスクロールします。
シグネチャ	scrollToBottom(duration?: number) => Promise<void>

scrollToPoint

説明	コンポーネント内の指定されたX/Y位置までスクロールします。
シグネチャ	scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>

scrollToTop

説明	コンポーネントの一番上までスクロールします。
シグネチャ	scrollToTop(duration?: number) => Promise<void>

CSSシャドウパーツ

名前	説明
background	コンテンツの背景。
scroll	コンテンツのスクロール可能なコンテナ。

CSSカスタムプロパティ

名前	説明
--background	コンテンツの背景
--color	コンテンツの色
--keyboard-offset	コンテンツのキーボードオフセット
--offset-bottom	コンテンツのボトムオフセット
--offset-top	コンテンツのトップオフセット
--padding-bottom	コンテンツのボトムパディング
--padding-end	コンテンツの、方向が左から右の場合は右パディング、右から左の場合は左パディング
--padding-start	コンテンツの、方向が左から右の場合は左パディング、右から左の場合は右パディング
--padding-top	コンテンツのトップパディング

スロット

名前	説明
``	スロットなしで提供された場合、コンテンツはスクロール可能な領域に配置されます。
fixed	スクロールしない固定コンテンツに使用する必要があります。