Skip to main content
Version: v7

ion-content

shadow

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プロパティを使ってスタイルを設定することができます。

スクロールメソッド

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

Scroll Events

スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、scrollEvents を true に設定することで、有効にすることができます。これは、 スクロール イベント を聞く前に必要です。

テーマ

Colors

CSS Shadow Parts

CSSカスタムプロパティ

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

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Defaultundefined

forceOverscroll

DescriptionIf true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
Attributeforce-overscroll
Typeboolean ｜ undefined
Defaultundefined

fullscreen

DescriptionIf true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
Attributefullscreen
Typeboolean
Defaultfalse

scrollEvents

DescriptionBecause of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to true.
Attributescroll-events
Typeboolean
Defaultfalse

scrollX

DescriptionX軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティをtrueに設定します。
Attributescroll-x
Typeboolean
Defaultfalse

scrollY

DescriptionY軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティにfalseを設定します。
Attributescroll-y
Typeboolean
Defaulttrue

イベント

NameDescription
ionScrollEmitted while scrolling. This event is disabled by default. Set scrollEvents to true to enable.
ionScrollEndEmitted when the scroll has ended. This event is disabled by default. Set scrollEvents to true to enable.
ionScrollStartEmitted when the scroll has started. This event is disabled by default. Set scrollEvents to true to enable.

メソッド

getScrollElement

DescriptionGet the element where the actual scrolling takes place. This element can be used to subscribe to scroll events or manually modify scrollTop. However, it's recommended to use the API provided by ion-content:

i.e. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.
SignaturegetScrollElement() => Promise<HTMLElement>

scrollByPoint

Descriptionコンポーネントを指定したX/Y距離だけスクロールさせる。
SignaturescrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom

Descriptionコンポーネントの一番下までスクロールします。
SignaturescrollToBottom(duration?: number) => Promise<void>

scrollToPoint

Descriptionコンポーネント内の指定したX/Y位置までスクロールします。
SignaturescrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>

scrollToTop

Descriptionコンポーネントの上部にスクロールします。
SignaturescrollToTop(duration?: number) => Promise<void>

CSS Shadow Parts

NameDescription
backgroundコンテンツの背景です。
scrollコンテンツのスクロール可能なコンテナ。

CSSカスタムプロパティ

NameDescription
--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

NameDescription
``slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。
fixedスクロールしてはいけない固定コンテンツに使用する必要があります。

Contents

Edit this page