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

利用方法

<ion-split-pane contentId="menu-content">
  <!--  our side menu  -->
  <ion-menu contentId="menu-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-split-pane>
<ion-split-pane content-id="menu-content">
  <!--  our side menu  -->
  <ion-menu content-id="menu-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-content id="menu-content">
    <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="menuContent">
      {/*--  our side menu  --*/}
      <IonMenu contentId="menuContent">
        <IonHeader>
          <IonToolbar>
            <IonTitle>Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
      </IonMenu>

      {/*-- the main content --*/}
      <IonPage id="menuContent"/>
    </IonSplitPane>
  </IonContent>
);
<template>
  <ion-split-pane contentId="menu-content">
    <!--  our side menu  -->
    <ion-menu contentId="menu-content">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-menu>

    <!-- the main content -->
    <ion-router-outlet id="menu-content"></ion-router-outlet>
  </ion-split-pane>
</template>

プロパティ

contentId

Description

The content id of the split-pane's main content. This property can be used instead of the [main] attribute to select the main content of the split-pane.

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