ion-split-pane
A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be displayed as the viewport width increases.
デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
Basic Usage
note
This demo sets the when property to 'xs' so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See Setting Breakpoints for more information.
Setting Breakpoints
デフォルトでは、画面が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>
| Size | Value | Description |
|---|---|---|
xs | (min-width: 0px) | Show the split-pane when the min-width is 0px (meaning, always) |
sm | (min-width: 576px) | Show the split-pane when the min-width is 576px |
md | (min-width: 768px) | Show the split-pane when the min-width is 768px |
lg | (min-width: 992px) | Show the split-pane when the min-width is 992px (default break point) |
xl | (min-width: 1200px) | Show the split-pane when the min-width is 1200px |
Theming
CSS Custom Properties
プロパティ
contentId
| Description | The id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu. |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the split pane will be hidden. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
when
| Description | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. |
| Attribute | when |
| Type | boolean ｜ string |
| Default | QUERY['lg'] |
イベント
| Name | Description |
|---|---|
ionSplitPaneVisible | Expression to be called when the split-pane visibility has changed |
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
| Name | Description |
|---|---|
--border | Border between panes |
--side-max-width | Maximum width of the side pane. Does not apply when split pane is collapsed. |
--side-min-width | Minimum width of the side pane. Does not apply when split pane is collapsed. |
--side-width | Width of the side pane. Does not apply when split pane is collapsed. |
Slots
No slots available for this component.