ons-splitter-content

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

実例

The Splitter

A menu can be added using the <ons-splitter>.

This element has several customization options. For small devices it can be used to create a swipeable menu but it’s also possible to customize it in order to automatically display a column layout on devices with larger screens.

To use it you need to add the <ons-splitter-content> and <ons-splitter-side> elements as children. The <ons-splitter-content> contains the main content and the <ons-splitter-side> is used for the menu.

Main content

The main content is contained inside the <ons-splitter-content>. Every Splitter must contains exactly one <ons-splitter-content>.

There are two ways to define the initial HTML. One way is to put the page inside the element:

<ons-splitter-content>
  <ons-page>
    ...
  </ons-page>
</ons-splitter-content>

Using templates

Another way is to use the page attribute to load the content from a <template> element:

<template id="page.html">
</template>

...

<ons-splitter>
  <ons-splitter-content page="page.html">
  </ons-splitter-content>
</ons-splitter>

Loading pages dynamically

In order to change the content of the <ons-splitter-content> you can use the load(page, options) method:

var content = document.querySelector('ons-splitter-content');

// Switch to the Settings page.
content.load('settings.html');

Normally this method will be called when the user clicks on one of the items in the menu.

Side elements

The <ons-splitter-side> supports several attributes that control the behavior of the menu.

The “swipeable” attribute

This attribute must be defined to enable opening and closing the menu by swiping.

The “collapse” attribute

The menu supports two modes: “collapse” and “split” mode. When the menu is collapsed it will be hidden from view and only visible if the user swipes or the open() method is called.

In “split” mode the menu is displayed as a column on the side of the <ons-splitter-content> element.

The value of the collapse attribute defines when it should be in either mode conditionally. If you set the value to "portrait“ it will be collapsed when the device is in portrait mode. It also supports a media query.

You can try changing or removing the collapse attribute from the <ons-splitter-side> to see it in action.

The “side” attribute

This defines which side the menu is attached to. It supports the values "left" and "right". It’s possible to define one menu on each side of the screen.

関連情報

名前 型 / デフォルト値 概要
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に記載をお願いいたします。

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