Search docs/
shadow

ion-split-pane

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/jp/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
CopyCopied
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

利用方法

<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>
CopyCopied
<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>
CopyCopied
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>
);
CopyCopied
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>
    ];
  }
}
CopyCopied
<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>
CopyCopied

プロパティ

contentId

Description

The content id of the split-pane's main content.

Attributecontent-id
Typestring | undefined

disabled

Description

If true, the split pane will be hidden.

Attributedisabled
Typeboolean
Defaultfalse

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.

Attributewhen
Typeboolean | string
DefaultQUERY['lg']

イベント

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

CSSカスタムプロパティ

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.