メインコンテンツへスキップ
バージョン: v8

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
デフォルトundefined

disabled​

説明true の場合、分割ペインは非表示になります。
属性disabled
型boolean
デフォルトfalse

when​

説明分割ペインを表示するタイミング。CSS メディアクエリ式、またはショートカット式にすることができます。ブール式にすることもできます。
属性when
型boolean ｜ string
デフォルトQUERY['lg']

イベント​

名前説明バブル
ionSplitPaneVisible分割ペインの表示状態が変更されたときに呼び出される式true

メソッド​

このコンポーネントで使用できるパブリックメソッドはありません。

CSS シャドウパーツ​

このコンポーネントで使用できる CSS シャドウパーツはありません。

CSS カスタムプロパティ​

名前説明
--borderペイン間の境界線
--side-max-widthサイドペインの最大幅。分割ペインが折りたたまれている場合は適用されません。
--side-min-widthサイドペインの最小幅。分割ペインが折りたたまれている場合は適用されません。
--side-widthサイドペインの幅。分割ペインが折りたたまれている場合は適用されません。

スロット​

このコンポーネントで使用できるスロットはありません。

目次

このページを編集