ion-content

shadow

The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view.

Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the CSS Utilities or by individually styling it using CSS and the available CSS Custom Properties.

Basic Usage

Header & Footer

Content can be the only top-level component in a page, or it can be used alongside a header, footer, or both. When used with a header or footer, it will adjust its size to fill the remaining height.

Fullscreen Content

By default, content fills the space between a header and footer but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the translucent property is set on either of them, or opacity is set on the toolbar. This can be achieved by setting the fullscreen property on the content to true.

Fixed Content

To place elements outside of the scrollable area, assign them to the fixed slot. Doing so will absolutely position the element to the top left of the content. In order to change the position of the element, it can be styled using the top, right, bottom, and left CSS properties.

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.

Scroll Methods

Content provides methods that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a duration in order to smoothly transition instead of instantly changing the position.

Scroll Events

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.

Console

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

Theming

Colors

CSS Shadow Parts

CSS Custom Properties

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

While not required, this interface can be used in place of the CustomEvent interface for stronger typing on the ionScrollStart and ionScrollEnd events.

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

ScrollCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing on the ionScroll event.

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
  detail: ScrollDetail;
}

Properties

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

Events

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

Methods

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 Custom Properties

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	スクロールしてはいけない固定コンテンツに使用する必要があります。