ion-split-pane
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>
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 |
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<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>
<ion-split-pane content-id="main">
<!-- the side menu -->
<ion-menu content-id="main">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-content id="main">
<h1>Hello</h1>
</ion-content>
</ion-split-pane>
import React from 'react';
import {
IonSplitPane,
IonMenu,
IonHeader,
IonToolbar,
IonTitle,
IonRouterOutlet,
IonContent,
IonPage
} from '@ionic/react';
export const SplitPlaneExample: React.SFC<{}> = () => (
<IonContent>
<IonSplitPane contentId="main">
{/*-- the side menu --*/}
<IonMenu contentId="main">
<IonHeader>
<IonToolbar>
<IonTitle>Menu</IonTitle>
</IonToolbar>
</IonHeader>
</IonMenu>
{/*-- the main content --*/}
<IonPage id="main"/>
</IonSplitPane>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'split-pane-example',
styleUrl: 'split-pane-example.css'
})
export class SplitPaneExample {
render() {
return [
<ion-split-pane content-id="main">
{/* the side menu */}
<ion-menu content-id="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>
];
}
}
<template>
<ion-split-pane content-id="main">
<!-- the side menu -->
<ion-menu content-id="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>
</template>
<script>
import {
IonHeader,
IonMenu,
IonRouterOutlet,
IonSplitPane,
IonTitle,
IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonHeader,
IonMenu,
IonRouterOutlet,
IonSplitPane,
IonTitle,
IonToolbar
}
});
</script>
Properties
contentId
Description | The id of the main content. When usinga router this is typically ion-router-outlet .When not using a router, this is typically your main view's ion-content . This is not theid 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'] |
Events
Name | Description |
---|---|
ionSplitPaneVisible | Expression to be called when the split-pane visibility has changed |
CSS Custom Properties
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. |