ion-split-pane
分割ペインは、マルチビューレイアウトを作成する際に便利です。 メニューのようなUI要素は、分割されたペインで表示することができます。ビューポートの幅が大きくなるにつれて表示されます。
デバイスの画面幅が特定のサイズより小さい場合、分割ペインは縮小され、メニューは非表示になります。これは、ブラウザで提供され、アプリストアを通じてスマートフォンやタブレットにデプロイされるアプリを作成するのに理想的な動作です。
基本的な使い方
note
このデモでは 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 | メインコンテンツの id です。ルータを使用する場合は、通常 ion-router-outlet となります。ルータを使用しない場合は、通常、メインビューの ion-content となります。これは ion-menu 内の ion-content の ID ではありません。 |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、分割ペインが非表示になります。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
when
| Description | 分割パネルを表示するタイミング。CSSメディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。 |
| Attribute | when |
| Type | boolean ｜ string |
| Default | QUERY['lg'] |
イベント
| Name | Description |
|---|---|
ionSplitPaneVisible | 分割画面の表示が変わったときに呼び出される式 |
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
| Name | Description |
|---|---|
--border | ペイン間のボーダー |
--side-max-width | サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
--side-min-width | サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
--side-width | サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。 |
Slots
No slots available for this component.