ion-split-pane
分割窗格在建立多視圖佈局時非常有用。它允許隨著視口寬度的增加，顯示選單等 UI 元素。
如果裝置的螢幕寬度小於特定尺寸，則分割窗格會折疊，選單會被隱藏。這非常適合建立在瀏覽器中提供，並透過應用程式商店部署到手機和平板電腦的應用程式。
基本用法
注意
此示範將 when 屬性設定為 'xs'，以便分割窗格始終顯示。如果您希望分割窗格在較小的視口上折疊，您的 Ionic 應用程式不需要此設定。請參閱設定斷點以取得更多資訊。
設定斷點
預設情況下，當螢幕大於 992px 時，分割窗格會展開。若要自訂此設定，請在 when 屬性中傳遞一個斷點。when 屬性可以接受布林值、任何有效的媒體查詢，或 Ionic 的預定義大小之一。
<!-- can be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="md"></ion-split-pane>
<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
| 大小 | 值 | 描述 |
|---|---|---|
xs | (min-width: 0px) | 當最小寬度為 0px 時 (表示總是)，顯示分割窗格 |
sm | (min-width: 576px) | 當最小寬度為 576px 時，顯示分割窗格 |
md | (min-width: 768px) | 當最小寬度為 768px 時，顯示分割窗格 |
lg | (min-width: 992px) | 當最小寬度為 992px 時 (預設斷點)，顯示分割窗格 |
xl | (min-width: 1200px) | 當最小寬度為 1200px 時，顯示分割窗格 |
佈景主題
CSS 自訂屬性
屬性
contentId
| 描述 | 主要內容的 id。當使用路由器時，通常為 ion-router-outlet。當不使用路由器時，通常為主要視圖的 ion-content。這不是您 ion-menu 內部的 ion-content 的 id。 |
| 屬性 | content-id |
| 類型 | string ｜ undefined |
| 預設值 | 未定義 |
disabled
| 描述 | 如果為 true，則會隱藏分割窗格。 |
| 屬性 | disabled |
| 類型 | boolean |
| 預設值 | false |
when
| 描述 | 應該顯示分割窗格的時間。可以是 CSS 媒體查詢運算式，或捷徑運算式。也可以是布林運算式。 |
| 屬性 | when |
| 類型 | boolean ｜ string |
| 預設值 | QUERY['lg'] |
事件
| 名稱 | 描述 | 冒泡 |
|---|---|---|
ionSplitPaneVisible | 當分割窗格可見性變更時要呼叫的運算式 | true |
方法
此組件沒有可用的公用方法。
CSS 陰影部分
此組件沒有可用的 CSS 陰影部分。
CSS 自訂屬性
- iOS
- MD
| 名稱 | 描述 |
|---|---|
--border | 窗格之間的邊框 |
--side-max-width | 側邊窗格的最大寬度。當分割窗格折疊時不適用。 |
--side-min-width | 側邊窗格的最小寬度。當分割窗格折疊時不適用。 |
--side-width | 側邊窗格的寬度。當分割窗格折疊時不適用。 |
| 名稱 | 描述 |
|---|---|
--border | 窗格之間的邊框 |
--side-max-width | 側邊窗格的最大寬度。當分割窗格折疊時不適用。 |
--side-min-width | 側邊窗格的最小寬度。當分割窗格折疊時不適用。 |
--side-width | 側邊窗格的寬度。當分割窗格折疊時不適用。 |
插槽
此組件沒有可用的插槽。