ion-content
Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、 使いやすいコンテンツ領域を提供します。 1つのビューに表示できるコンテンツは1つだけです。
Contentは、他の多くのIonicコンポーネントと同様に、 CSS Utilities で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な CSS Custom Properties を使用して個別にスタイル設定することによって、padding
や margin
などを変更するようにカスタマイズできます。
基本的な使い方
Header & Footer
コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、ヘッダー、フッター、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
Fullscreen Content
デフォルトでは、コンテンツは ヘッダーと フッターの間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに translucent
プロパティを設定した場合や、ツールバーに opacity
を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの fullscreen
プロパティを true
に設定することで実現することができます。
コンテンツの固定
スクロール可能な領域の外側に要素を配置するには、fixed
スロットに割り当てます。そうすることで、その要素はコンテンツの左上に絶対位置されます。要素の位置を変えるには、CSSのtop, right, bottom, leftプロパティを使ってスタイルを設定することができます。
The fixedSlotPlacement
property is used to determine if content in the fixed
slot is placed before or after the main content in the DOM. When set to before
, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a FAB or other fixed content from being reachable by pressing the tab key.
スクロールメソッド
コンテンツには メソッド が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには duration
を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。
Scroll Events
スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、scrollEvents
を true
に設定することで、有効にすることができます。これは、 スクロール イベント を聞く前に必要です。
Console
Console messages will appear here when logged from the example above.
テーマ
Colors
CSS Shadow Parts
CSSカスタムプロパティ
Safe Area Padding
The content component will not automatically apply padding to any of its sides to account for the safe area. This is because the content component is often used in conjunction with other components that apply their own padding, such as headers and footers. However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the --ion-safe-area-(dir)
variables described in Application Variables.
The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the padding-top
property to the value of the --ion-safe-area-top
variable.
ion-content::part(scroll) {
padding-top: var(--ion-safe-area-top, 0);
}
Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the padding-left
property to the value of the --ion-safe-area-left
variable.
ion-content::part(scroll) {
padding-left: var(--ion-safe-area-left, 0);
}
Interfaces
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
Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , と "dark" です.色に関する詳しい情報は theming を参照してください。 |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
Default | undefined |
fixedSlotPlacement
Description | 固定コンテンツが DOM 内のメイン・コンテンツの相対的などこに配置されるかを制御します。これは、固定要素がキーボード・フォーカスを受ける順番を制御するために使用できます。例えば、固定スロットのFABがメインページのコンテンツよりも先にキーボードフォーカスを受け取るようにする場合、このプロパティを 'before' に設定します。 |
Attribute | fixed-slot-placement |
Type | "after" | "before" |
Default | 'after' |
forceOverscroll
Description | true で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。なお、これはiOSのシステムバウンスを無効にするものではありません。これはOSレベルの設定です。 |
Attribute | force-overscroll |
Type | boolean | undefined |
Default | undefined |
fullscreen
Description | true の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。 |
Attribute | fullscreen |
Type | boolean |
Default | false |
scrollEvents
Description | パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティをtrue に設定します。 |
Attribute | scroll-events |
Type | boolean |
Default | false |
scrollX
Description | X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティをtrue に設定します。 |
Attribute | scroll-x |
Type | boolean |
Default | false |
scrollY
Description | Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティにfalse を設定します。 |
Attribute | scroll-y |
Type | boolean |
Default | true |
イベント
Name | Description | Bubbles |
---|---|---|
ionScroll | スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには scrollEvents に true を設定します。 | true |
ionScrollEnd | スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには scrollEvents に true を設定します。 | true |
ionScrollStart | スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには scrollEvents に true を設定してください。 | true |
メソッド
getScrollElement
Description | 実際のスクロールが行われる要素を取得します。この要素を使用して、scroll イベントを購読したり、scrollTop を手動で変更したりすることができる。スクロールイベントには ionScroll , ionScrollStart , ionScrollEnd を、コンテンツを特定のポイントにスクロールさせるには scrollToPoint() を使用することが推奨されます。 |
Signature | getScrollElement() => Promise<HTMLElement> |
scrollByPoint
Description | コンポーネントを指定したX/Y距離だけスクロールさせる。 |
Signature | scrollByPoint(x: number, y: number, duration: number) => Promise<void> |
Parameters | x: The amount to scroll by on the horizontal axis. y: The amount to scroll by on the vertical axis. duration: The amount of time to take scrolling by that amount. |
scrollToBottom
Description | コンポーネントの一番下までスクロールします。 |
Signature | scrollToBottom(duration?: number) => Promise<void> |
Parameters | duration: The amount of time to take scrolling to the bottom. Defaults to 0 . |
scrollToPoint
Description | コンポーネント内の指定したX/Y位置までスクロールします。 |
Signature | scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void> |
Parameters | x: The point to scroll to on the horizontal axis. y: The point to scroll to on the vertical axis. duration: The amount of time to take scrolling to that point. Defaults to 0 . |
scrollToTop
Description | コンポーネントの上部にスクロールします 。 |
Signature | scrollToTop(duration?: number) => Promise<void> |
Parameters | duration: The amount of time to take scrolling to the top. Defaults to 0 . |
CSS Shadow Parts
Name | Description |
---|---|
background | コンテンツの背景です。 |
scroll | コンテンツのスクロール可能なコンテナ。 |
CSSカスタムプロパティ
Name | Description |
---|---|
--background | コンテンツの背景 |
--color | コンテンツの色 |
--keyboard-offset | コンテンツのキーボードオフセット |
--offset-bottom | コンテンツのオフセットボトム |
--offset-top | コンテンツのオフセットトップ |
--padding-bottom | コンテンツのBottom Padding |
--padding-end | コンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | コンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | コンテンツのTop Padding |
Slots
Name | Description |
---|---|
`` | slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。 |
fixed | スクロールしてはいけない固定コンテンツに使用する必要があります。 |