React Reference > ons-splitter-content Component

<ons-splitter-content />

ons-splitter-content要素は、ons-splitter要素の子要素として利用します。

実例

Side menu

The Splitter is used to display a menu next to the main content. It can be configured to either display in column layout or as a swipeable menu. It is also possible to automatically switch between column layout and a layout with a swipeable menu based on the screen size or any arbitrary condition. In some situations it can be useful to display a column layout on large devices and hide the menu on smaller screens.

The menu is defined using the SplitterSide component. This component can either be displayed as a column next to the main content or as a swipeable menu. This behavior is controlled using the collapse property.

To enable opening and closing the menu by swiping the isSwipeable property must be defined. The side property is used to specify on which side of the screen the menu is displayed.

Opening and closing the menu

The menu can be opened and closed using the isOpen property. This property only works when the menu is collapsed, since in column layout it is always visible.

In the following example the menu is opened, when the user presses a button. The onClose property is called when the menu is closed and is used to control the state.

Main content

The main content of the screen is put inside the SplitterContent component. A Page component should be put as a child of this component.

<Splitter>
  <SplitterContent>
    <Page>
      Main content
    </Page>
  </SplitterContent
</Splitter>

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
page String ons-splitter-content要素に表示するページのURLを指定します。 Optional.

プロパティ概要

[編集]
名前 概要
page この要素内に表示するページを指定します。
pageLoader この要素内に表示するページを指定します。

メソッド

[編集]
シグネチャ 概要
load(page, [options]) 指定したURLをメインページを読み込みます。
load(page, [options]): Promise

指定したURLをメインページを読み込みます。

返り値: <ons-page>要素を解決するPromiseオブジェクトを返します。

パラメーター
名前 型 概要
page, String pageのURLか、<template>で宣言したテンプレートのid属性の値を指定します。
options Object
options.callback Function

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。