版本：v8

内容组件

内容组件提供一个易于使用的内容区域，并包含一些控制可滚动区域的有用方法。在单个视图中应该只有一个内容组件。

内容组件与许多其他 Ionic 组件一样，可以通过 CSS 实用工具中提供的全局样式进行自定义，或使用 CSS 和可用的 CSS 自定义属性单独设置样式，从而修改其内边距、外边距等属性。

基本用法

页眉和页脚

内容组件可以是页面中唯一的顶级组件，也可以与页眉、页脚或两者一起使用。当与页眉或页脚一起使用时，它会调整自身大小以填充剩余高度。

全屏内容

默认情况下，内容会填充页眉和页脚之间的空间，但不会延伸到它们后面。在某些情况下，可能需要让内容在页眉和页脚后面滚动，例如当其中任何一个设置了 translucent 属性，或在工具栏上设置了 opacity 时。这可以通过将内容的 fullscreen 属性设置为 true 来实现。

固定内容

要将元素放置在可滚动区域之外，请将它们分配给 fixed 插槽。这样做会将元素绝对定位到内容的左上角。要更改元素的位置，可以使用 top、right、bottom 和 left CSS 属性进行样式设置。

fixedSlotPlacement 属性用于确定 fixed 插槽中的内容在 DOM 中是放置在主内容之前还是之后。当设置为 before 时，固定插槽内容将放置在主内容之前，因此会在主内容之前获得键盘焦点。当主内容包含无限滚动列表时，这很有用，可以防止通过按 Tab 键到达浮动操作按钮或其他固定内容。

滚动方法

内容组件提供了可调用的方法，用于将内容滚动到底部、顶部或特定位置。可以传入一个 duration 参数，以实现平滑过渡，而不是立即改变位置。

滚动事件

出于性能考虑，内容组件的滚动事件默认是禁用的。但可以通过将 scrollEvents 设置为 true 来启用。在监听任何滚动事件之前，这是必要的步骤。

Console

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

主题定制

颜色

CSS Shadow Parts

CSS 自定义属性

安全区域内边距

内容组件不会自动向任何一侧应用内边距以考虑安全区域。这是因为内容组件通常与其他应用了自己内边距的组件（如页眉和页脚）一起使用。但是，如果单独使用内容组件，可能需要对安全区域应用内边距。这可以通过 CSS 使用应用变量中描述的 --ion-safe-area-(dir) 变量来实现。

最常见的用例是为状态栏向内容顶部应用内边距。这可以通过将 padding-top 属性设置为 --ion-safe-area-top 变量的值来实现。

ion-content::part(scroll) {
  padding-top: var(--ion-safe-area-top, 0);
}

另一个常见用例是在设备处于横屏模式且刘海在左侧时，为内容左侧应用内边距以考虑刘海。这可以通过将 padding-left 属性设置为 --ion-safe-area-left 变量的值来实现。

ion-content::part(scroll) {
  padding-left: var(--ion-safe-area-left, 0);
}

接口

ScrollBaseDetail

interface ScrollBaseDetail {
  isScrolling: boolean;
}

ScrollDetail

interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
  scrollTop: number;
  scrollLeft: number;
}

ScrollBaseCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，用于在 ionScrollStart 和 ionScrollEnd 事件上提供更强的类型检查。

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

ScrollCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，用于在 ionScroll 事件上提供更强的类型检查。

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
  detail: ScrollDetail;
}

属性

color

Description	The 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.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`undefined`

fixedSlotPlacement

Description	Controls 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'`.
Attribute	`fixed-slot-placement`
Type	`"after" ｜ "before"`
Default	`'after'`

forceOverscroll

Description	If `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.
Attribute	`force-overscroll`
Type	`boolean ｜ undefined`
Default	`undefined`

fullscreen

Description	If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
Attribute	`fullscreen`
Type	`boolean`
Default	`false`

scrollEvents

Description	Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
Attribute	`scroll-events`
Type	`boolean`
Default	`false`

scrollX

Description	If you want to enable the content scrolling in the X axis, set this property to `true`.
Attribute	`scroll-x`
Type	`boolean`
Default	`false`

scrollY

Description	If you want to disable the content scrolling in the Y axis, set this property to `false`.
Attribute	`scroll-y`
Type	`boolean`
Default	`true`

事件

Name	Description	Bubbles
`ionScroll`	Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.	`true`
`ionScrollEnd`	Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.	`true`
`ionScrollStart`	Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.	`true`

方法

getScrollElement

Description	Get 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.
Signature	`getScrollElement() => Promise<HTMLElement>`

scrollByPoint

Description	Scroll by a specified X/Y distance in the component.
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	Scroll to the bottom of the component.
Signature	`scrollToBottom(duration?: number) => Promise<void>`
Parameters	duration: The amount of time to take scrolling to the bottom. Defaults to `0`.

scrollToPoint

Description	Scroll to a specified X/Y location in the component.
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	Scroll to the top of the component.
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`	The background of the content.
`scroll`	The scrollable container of the content.

CSS 自定义属性

Name	Description
`--background`	Background of the content
`--color`	Color of the content
`--keyboard-offset`	Keyboard offset of the content
`--offset-bottom`	Offset bottom of the content
`--offset-top`	Offset top of the content
`--padding-bottom`	Bottom padding of the content
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
`--padding-top`	Top padding of the content

插槽

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

基本用法​

页眉和页脚​

全屏内容​

固定内容​

滚动方法​

滚动事件​

主题定制​

颜色​

CSS Shadow Parts​

CSS 自定义属性​

安全区域内边距​

接口​

ScrollBaseDetail​

ScrollDetail​

ScrollBaseCustomEvent​

ScrollCustomEvent​

属性​

color​

fixedSlotPlacement​

forceOverscroll​

fullscreen​

scrollEvents​

scrollX​

scrollY​

事件​

方法​

getScrollElement​

scrollByPoint​

scrollToBottom​

scrollToPoint​

scrollToTop​

CSS Shadow Parts​

CSS 自定义属性​

插槽​

Contents

基本用法

页眉和页脚

全屏内容

固定内容

滚动方法

滚动事件

主题定制

颜色

CSS Shadow Parts

CSS 自定义属性

安全区域内边距

接口

ScrollBaseDetail

ScrollDetail

ScrollBaseCustomEvent

ScrollCustomEvent

属性

color

fixedSlotPlacement

forceOverscroll

fullscreen

scrollEvents

scrollX

scrollY

事件

方法

getScrollElement

scrollByPoint

scrollToBottom

scrollToPoint

scrollToTop

CSS Shadow Parts

CSS 自定义属性

插槽