メインコンテンツまでスキップ
バージョン: v8

ion-content

shadow

Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、 使いやすいコンテンツ領域を提供します。 1つのビューに表示できるコンテンツは1つだけです。

Contentは、他の多くのIonicコンポーネントと同様に、 CSS Utilities で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な CSS Custom Properties を使用して個別にスタイル設定することによって、paddingmargin などを変更するようにカスタマイズできます。

基本的な使い方

コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、ヘッダーフッター、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。

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

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

Console
Console messages will appear here when logged from the example above.

Scroll events are disabled by default for content due to performance. However, they can be enabled by setting scrollEvents to true. This is necessary before listening to any of the scroll events.

テーマ

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

必須ではありませんが、ionScrollStartionScrollEnd イベントをより強く型付けするために、CustomEvent インターフェースの代わりにこのインターフェースを利用することが可能です。

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

ScrollCustomEvent

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

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
detail: ScrollDetail;
}

ScrollCustomEvent

プロパティ

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 | undefined
Defaultundefined

fixedSlotPlacement

DescriptionControls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to 'before'.
Attributefixed-slot-placement
Type"after" | "before"
Default'after'

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, this 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

DescriptionIf you want to enable the content scrolling in the X axis, set this property to true.
Attributescroll-x
Typeboolean
Defaultfalse

scrollY

DescriptionIf you want to disable the content scrolling in the Y axis, set this property to false.
Attributescroll-y
Typeboolean
Defaulttrue

イベント

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

メソッド

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

DescriptionScroll by a specified X/Y distance in the component.
SignaturescrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom

DescriptionScroll to the bottom of the component.
SignaturescrollToBottom(duration?: number) => Promise<void>

scrollToPoint

DescriptionScroll to a specified X/Y location in the component.
SignaturescrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>

scrollToTop

DescriptionScroll to the top of the component.
SignaturescrollToTop(duration?: number) => Promise<void>

CSS Shadow Parts

NameDescription
backgroundThe background of the content.
scrollThe scrollable container of the content.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the content
--colorColor of the content
--keyboard-offsetKeyboard offset of the content
--offset-bottomOffset bottom of the content
--offset-topOffset top of the content
--padding-bottomBottom padding of the content
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the content
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the content
--padding-topTop padding of the content

Slots

NameDescription
``Content is placed in the scrollable area if provided without a slot.
fixedShould be used for fixed content that should not scroll.