阴影
内容组件提供了一个易于使用的内容区域，并提供了一些有用的方法来控制可滚动区域。在单个视图中应该只有一个内容。
内容以及许多其他 Ionic 组件可以使用 CSS 工具 中提供的全局样式进行自定义，以修改其填充、边距等，或者通过使用 CSS 和可用的 CSS 自定义属性 对其进行单独的样式设置。
内容可以是页面中唯一的顶级组件，也可以与 页眉、页脚 或两者一起使用。当与页眉或页脚一起使用时，它会调整其大小以填充剩余的高度。
全屏内容
默认情况下，内容会填充 页眉 和 页脚 之间的空间，但不会延伸到它们后面。在某些情况下，可能希望内容在页眉和页脚后面滚动，例如，当在两者中都设置了 translucent 属性或在工具栏上设置了 opacity 时。这可以通过将内容的 fullscreen 属性设置为 true 来实现。
固定内容
要将元素放置在可滚动区域之外，请将其分配给 fixed 插槽。这样做会 绝对定位 元素到内容的左上角。为了改变元素的位置，可以使用 top、right、bottom 和 left CSS 属性对其进行样式设置。
fixedSlotPlacement 属性用于确定 fixed 插槽中的内容是在 DOM 中的“主内容”之前还是之后放置。当设置为 before 时，固定插槽内容将放置在主内容之前，因此将比主内容先接收键盘焦点。这在主内容包含无限滚动的列表时很有用，可以防止 FAB 或其他固定内容在按下 Tab 键时无法访问。
内容提供 方法，可以调用这些方法将内容滚动到底部、顶部或特定位置。它们可以传递 duration 以实现平滑过渡，而不是立即改变位置。
由于性能原因，内容的滚动事件默认情况下是禁用的。但是，可以将 scrollEvents 设置为 true 来启用它们。在监听任何滚动 事件 之前，这是必要的。
内容组件不会自动将其任何边添加填充来考虑 安全区域。这是因为内容组件通常与其他添加自身填充的组件一起使用，例如 页眉 和 页脚。但是，如果内容组件单独使用，则可能希望将填充应用于安全区域。这可以通过使用 应用程序变量 中描述的 --ion-safe-area-(dir) 变量来通过 CSS 完成。
最常见的用例是向内容的顶部添加填充以考虑状态栏。这可以通过将 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);
}
interface ScrollBaseDetail {
isScrolling: boolean;
}
interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
scrollTop: number;
scrollLeft: number;
}
虽然不是必需的，但此接口可以在 CustomEvent 接口的位置使用，以在 ionScrollStart 和 ionScrollEnd 事件上进行更强的类型化。
interface ScrollBaseCustomEvent extends CustomEvent {
detail: ScrollBaseDetail;
target: HTMLIonContentElement;
}
虽然不是必需的，但此接口可以在 CustomEvent 接口的位置使用，以在 ionScroll 事件上进行更强的类型化。
interface ScrollCustomEvent extends ScrollBaseCustomEvent {
detail: ScrollDetail;
}
| 描述 | 要从应用程序的调色板中使用的颜色。默认选项为："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有关颜色的更多信息，请参见 主题。 |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认 | undefined |
| 描述 | 控制固定内容相对于 DOM 中的主内容的位置。这可以用来控制固定元素接收键盘焦点的顺序。例如，如果固定插槽中的 FAB 应该在主页面内容之前接收键盘焦点，请将此属性设置为 'before'。 |
| 属性 | fixed-slot-placement |
| 类型 | "after" ｜ "before" |
| 默认 | 'after' |
| 描述 | 如果为 true 且内容不会导致溢出滚动，则滚动交互会导致弹跳。如果内容超出 ionContent 的边界，则不会发生任何变化。注意，这不会禁用 iOS 上的系统弹跳。这是一个操作系统级别的设置。 |
| 属性 | force-overscroll |
| 类型 | boolean ｜ undefined |
| 默认 | undefined |
| 描述 | 如果为true，内容将在标题和页脚后面滚动。可以通过将工具栏设置为透明来轻松看到此效果。 |
| 属性 | 全屏 |
| 类型 | 布尔值 |
| 默认 | false |
| 描述 | 出于性能原因，ionScroll 事件默认情况下处于禁用状态，为了启用它们并开始监听（ionScroll），将此属性设置为true。 |
| 属性 | 滚动-事件 |
| 类型 | 布尔值 |
| 默认 | false |
| 描述 | 如果要启用内容在 X 轴上的滚动，请将此属性设置为true。 |
| 属性 | scroll-x |
| 类型 | 布尔值 |
| 默认 | false |
| 描述 | 如果要禁用内容在 Y 轴上的滚动，请将此属性设置为false。 |
| 属性 | scroll-y |
| 类型 | 布尔值 |
| 默认 | true |
| 名称 | 描述 | 冒泡 |
|---|
ionScroll | 滚动时发出。此事件默认情况下处于禁用状态。将scrollEvents 设置为true 以启用。 | true |
ionScrollEnd | 滚动结束时发出。此事件默认情况下处于禁用状态。将scrollEvents 设置为true 以启用。 | true |
ionScrollStart | 滚动开始时发出。此事件默认情况下处于禁用状态。将scrollEvents 设置为true 以启用。 | true |
| 描述 | 获取实际滚动发生的元素。此元素可用于订阅scroll 事件或手动修改scrollTop。但是，建议使用ion-content 提供的 API
例如，使用ionScroll、ionScrollStart、ionScrollEnd 用于滚动事件，以及scrollToPoint() 用于将内容滚动到特定点。 |
| 签名 | getScrollElement() => Promise<HTMLElement> |
| 描述 | 在组件中按指定的 X/Y 距离滚动。 |
| 签名 | scrollByPoint(x: number, y: number, duration: number) => Promise<void> |
| 描述 | 滚动到组件的底部。 |
| 签名 | scrollToBottom(duration?: number) => Promise<void> |
| 描述 | 滚动到组件中指定的 X/Y 位置。 |
| 签名 | scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void> |
| 描述 | 滚动到组件的顶部。 |
| 签名 | scrollToTop(duration?: number) => Promise<void> |
| 名称 | 描述 |
|---|
--background | 内容的背景 |
--color | 内容的颜色 |
--keyboard-offset | 内容的键盘偏移量 |
--offset-bottom | 内容的偏移底部 |
--offset-top | 内容的偏移顶部 |
--padding-bottom | 内容的底部填充 |
--padding-end | 如果方向为从左到右，则为内容的右侧填充；如果方向为从右到左，则为内容的左侧填充 |
--padding-start | 如果方向为从左到右，则为内容的左侧填充；如果方向为从右到左，则为内容的右侧填充 |
--padding-top | 内容的顶部填充 |
| 名称 | 描述 |
|---|
| `` | 如果提供的内容没有插槽，则将其放置在可滚动区域中。 |
固定 | 应用于不应滚动的固定内容。 |