メインコンテンツまでスキップ
Version: v6

ion-split-pane

shadow

Contents

Split-Paneはマルチビューレイアウトを作成するときに便利です。 ビューポートの幅を広げると、メニューのようなUI要素を表示できます。

デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。

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

Usage

<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>

<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

Properties

contentId

DescriptionThe 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.
Attributecontent-id
Typestring | undefined
Defaultundefined

disabled

DescriptionIf true, the split pane will be hidden.
Attributedisabled
Typeboolean
Defaultfalse

when

DescriptionWhen the split-pane should be shown.
Can be a CSS media query expression, or a shortcut expression.
Can also be a boolean expression.
Attributewhen
Typeboolean | string
DefaultQUERY['lg']

Events

NameDescription
ionSplitPaneVisibleExpression to be called when the split-pane visibility has changed

CSS Custom Properties

NameDescription
--borderBorder between panes
--side-max-widthMaximum width of the side pane. Does not apply when split pane is collapsed.
--side-min-widthMinimum width of the side pane. Does not apply when split pane is collapsed.
--side-widthWidth of the side pane. Does not apply when split pane is collapsed.