ion-split-pane

shadow

分割ペインは、マルチビューレイアウトを作成する際に便利です。 メニューのような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>

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

テーマ

CSSカスタムプロパティ

プロパティ

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	Bubbles
ionSplitPaneVisible	Expression to be called when the split-pane visibility has changed	true

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

iOS

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.

MD

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.