shadowContentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、
使いやすいコンテンツ領域を提供します。
1つのビューに表示できるコンテンツは1つだけです。
Contentは、他の多くのIonicコンポーネントと同様に、 CSS Utilities で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な CSS Custom Properties を使用して個別にスタイル設定することによって、padding や margin などを変更するようにカスタマイズできます。
コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、ヘッダー、フッター、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
Fullscreen Content
デフォルトでは、コンテンツは ヘッダーと フッターの間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに translucent プロパティを設定した場合や、ツールバーに opacity を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの fullscreen プロパティを true に設定することで実現することができます。
スクロール可能な領域の外側に要素を配置するには、fixedスロットに割り当てます。そうすることで、その要素はコンテンツの左上に絶対位置されます。要素の位置を変えるには、CSSのtop, right, bottom, leftプロパティを使ってスタイルを設定することができます。
コンテンツには メソッド が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには duration を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。
スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、scrollEvents を true に設定することで、有効にすることができます。これは、 スクロール イベント を聞く前に必要です。
interface ScrollBaseDetail {
isScrolling: boolean;
}
interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
scrollTop: number;
scrollLeft: number;
}
必須ではありませんが、ionScrollStart と ionScrollEnd イベントをより強く型付けするために、CustomEvent インターフェースの代わりにこのインターフェースを利用することが可能です。
interface ScrollBaseCustomEvent extends CustomEvent {
detail: ScrollBaseDetail;
target: HTMLIonContentElement;
}
必須ではありませんが、ionScroll イベントをより強く型付けするために、CustomEvent インターフェースの代わりにこのインターフェースを利用することが可能です。
interface ScrollCustomEvent extends ScrollBaseCustomEvent {
detail: ScrollDetail;
}
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
| Description | trueで、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツがionContentの境界を超えた場合、何も変化しません。なお、これはiOSのシステムバウンスを無効にするものではありません。これはOSレベルの設定です。 |
| Attribute | force-overscroll |
| Type | boolean ｜ undefined |
| Default | undefined |
| Description | trueの場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。 |
| Attribute | fullscreen |
| Type | boolean |
| Default | false |
| Description | パフォーマンス上の理由から、ionScrollイベントはデフォルトで無効になっています。ionScrollイベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティをtrueに設定します。 |
| Attribute | scroll-events |
| Type | boolean |
| Default | false |
| Description | X軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティをtrueに設定します。 |
| Attribute | scroll-x |
| Type | boolean |
| Default | false |
| Description | Y軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティにfalseを設定します。 |
| Attribute | scroll-y |
| Type | boolean |
| Default | true |
| Name | Description |
|---|
ionScroll | スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには scrollEvents に true を設定します。 |
ionScrollEnd | スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには scrollEvents に true を設定します。 |
ionScrollStart | スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには scrollEvents に true を設定してください。 |
| Description | 実際のスクロールが行われる要素を取得します。この要素を使用して、scroll イベントを購読したり、scrollTop を手動で変更したりすることができる。スクロールイベントには ionScroll, ionScrollStart, ionScrollEnd を、コンテンツを特定のポイントにスクロールさせるには scrollToPoint() を使用することが推奨されます。 |
| Signature | getScrollElement() => Promise<HTMLElement> |
| Description | コンポーネントを指定したX/Y距離だけスクロールさせる。 |
| Signature | scrollByPoint(x: number, y: number, duration: number) => Promise<void> |
| Description | コンポーネントの一番下までスクロールします。 |
| Signature | scrollToBottom(duration?: number) => Promise<void> |
| Description | コンポーネント内の指定したX/Y位置までスクロールします。 |
| Signature | scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void> |
| Description | コンポーネントの上部にスクロールします。 |
| Signature | scrollToTop(duration?: number) => Promise<void> |
| Name | Description |
|---|
background | コンテンツの背景です。 |
scroll | コンテンツのスクロール可能なコンテナ。 |
| 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 |
| Name | Description |
|---|
| `` | slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。 |
fixed | スクロールしてはいけない固定コンテンツに使用する必要があります。 |