陰影
內容元件提供了一個易於使用的內容區域，並提供了一些有用的方法來控制可捲動區域。單一視圖中應只有一個內容元件。
內容元件以及許多其他 Ionic 元件，都可以透過 CSS 實用工具中提供的全域樣式進行自訂，以修改其內邊距、外邊距等，或使用 CSS 和可用的 CSS 自訂屬性單獨設定樣式。
內容元件可以是頁面中唯一的頂層元件，也可以與 頁首、頁尾或兩者一起使用。當與頁首或頁尾一起使用時，它會調整其大小以填滿剩餘的高度。
全螢幕內容
預設情況下，內容會填滿 頁首和 頁尾之間的空間，但不會超出它們的範圍。在某些情況下，可能需要讓內容捲動到頁首和頁尾的後面，例如當在它們的任何一個上設定 translucent 屬性，或在工具列上設定 opacity 時。這可以透過將內容元件上的 fullscreen 屬性設定為 true 來實現。
固定內容
若要將元素放置在可捲動區域之外，請將它們指派給 fixed 插槽。這樣做會將元素絕對定位到內容的左上角。若要變更元素的位置，可以使用 top、right、bottom 和 left CSS 屬性來設定樣式。
fixedSlotPlacement 屬性用於判斷 fixed 插槽中的內容是在 DOM 中放置在主要內容之前還是之後。當設定為 before 時，固定插槽內容將放置在主要內容之前，因此將在主要內容接收鍵盤焦點之前接收鍵盤焦點。當主要內容包含無限捲動清單時，這會很有用，防止 FAB 或其他固定內容可以透過按下 Tab 鍵來存取。
內容元件提供了可以呼叫的方法，以將內容捲動到底部、頂部或特定點。它們可以傳遞 duration 來平滑過渡，而不是立即變更位置。
由於效能考量，內容的捲動事件預設為停用。但是，可以透過將 scrollEvents 設定為 true 來啟用它們。這是在監聽任何捲動事件之前所必須的。
內容元件不會自動將內邊距套用到任何一側，以考慮到安全區域。這是因為內容元件通常與其他套用自己內邊距的元件一起使用，例如頁首和頁尾。但是，如果內容元件單獨使用，則可能需要將內邊距套用到安全區域。這可以透過 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);
}
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，則內容將在標頭和頁尾後面捲動。將工具列設定為透明可以很容易地看到此效果。 |
| 屬性 | fullscreen |
| 類型 | boolean |
| 預設值 | false |
| 描述 | 由於效能原因，預設會停用 ionScroll 事件，為了啟用它們並開始從 (ionScroll) 監聽，請將此屬性設定為 true。 |
| 屬性 | scroll-events |
| 類型 | boolean |
| 預設值 | false |
| 描述 | 如果您想要在 X 軸上啟用內容捲動，請將此屬性設定為 true。 |
| 屬性 | scroll-x |
| 類型 | boolean |
| 預設值 | false |
| 描述 | 如果您想要在 Y 軸上停用內容捲動，請將此屬性設定為 false。 |
| 屬性 | scroll-y |
| 類型 | boolean |
| 預設值 | 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 | 內容的背景。 |
scroll | 內容的可捲動容器。 |
| 名稱 | 描述 |
|---|
--background | 內容的背景 |
--color | 內容的顏色 |
--keyboard-offset | 內容的鍵盤偏移 |
--offset-bottom | 內容的底部偏移 |
--offset-top | 內容的頂部偏移 |
--padding-bottom | 內容的底部內距 |
--padding-end | 如果方向為從左到右，則為內容的右側內距，如果方向為從右到左，則為內容的左側內距 |
--padding-start | 如果方向為從左到右，則為內容的左側內距，如果方向為從右到左，則為內容的右側內距 |
--padding-top | 內容的頂部內距 |
| 名稱 | 描述 |
|---|
| `` | 如果沒有提供插槽，則內容會放置在可捲動區域中。 |
fixed | 應該用於不應該捲動的固定內容。 |