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.

可以使用 CSS 实用工具 中提供的全局样式或使用 CSS 和可用的 CSS 自定义属性 单独设置内容样式来自定义内容以及许多其他 Ionic 组件，以修改其填充、边距等。

¥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

内容可以是页面中唯一的顶层组件，也可以与 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

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

¥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

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

¥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.

fixedSlotPlacement 属性用于确定 fixed 槽中的内容是放置在 DOM 中的主要内容之前还是之后。当设置为 before 时，固定槽内容将放置在主要内容之前，因此将在主要内容接收键盘焦点之前接收键盘焦点。当主要内容包含无限滚动列表时，这非常有用，可防止按 Tab 键访问 FAB 或其他固定内容。

¥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 提供了 methods，可以调用它来将内容滚动到底部、顶部或特定点。他们可以通过 duration 来顺利过渡，而不是立即改变位置。

¥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

由于性能原因，默认情况下会禁用内容的滚动事件。但是，可以通过将 scrollEvents 设置为 true 来启用它们。在监听任何滚动 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 阴影部分

¥CSS Shadow Parts

CSS 自定义属性

¥CSS Custom Properties

安全区域填充

¥Safe Area Padding

内容组件不会自动将填充应用于其任何一侧以说明 安全区。这是因为内容组件通常与应用自己的填充的其他组件结合使用，例如 headers 和 footers。但是，如果内容组件单独使用，则可能需要将填充应用于安全区域。这可以通过 CSS 使用 应用变量 中描述的 --ion-safe-area-(dir) 变量来完成。

¥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.

最常见的用例是在内容顶部应用填充以占据状态栏。这可以通过将 padding-top 属性设置为 --ion-safe-area-top 变量的值来完成。

¥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);
}

另一个常见的用例是，当设备处于横向模式并且凹口位于左侧时，将填充应用于内容的左侧以解决凹口问题。这可以通过将 padding-left 属性设置为 --ion-safe-area-left 变量的值来完成。

¥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

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以对 ionScrollStart 和 ionScrollEnd 事件进行更强的键入。

¥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

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便在 ionScroll 事件上进行更强的键入。

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

事件

¥Events

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

方法

¥Methods

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>

scrollToBottom

Description	Scroll to the bottom of the component.
Signature	scrollToBottom(duration?: number) => Promise<void>

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>

scrollToTop

Description	Scroll to the top of the component.
Signature	scrollToTop(duration?: number) => Promise<void>

CSS 阴影部分

¥CSS Shadow Parts

Name	Description
background	The background of the content.
scroll	The scrollable container of the content.

CSS 自定义属性

¥CSS Custom Properties

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

插槽

¥Slots

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.