ons-splitter-side

ons-splitter-side要素は、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.

関連情報

名前 型 / デフォルト値 概要
animation String
default
アニメーションを指定します。”overlay”, “push”, “reveal”, “default”のいずれかを指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
open-threshold Number
0.3
どのくらいスワイプすればスライディングメニューを開くかどうかの割合を指定します。0から1の間の数値を指定します。スワイプの距離がここで指定した数値掛けるこの要素の幅よりも大きければ、スワイプが終わった時にこの要素を開きます。デフォルトは0.3です。 Optional.
collapse String

左側のページを非表示にする条件を指定します。portrait, landscape、width #pxもしくはメディアクエリの指定が可能です。 portraitもしくはlandscapeを指定すると、デバイスの画面が縦向きもしくは横向きになった時に適用されます。 メディアクエリを指定すると、指定したクエリに適合している場合に適用されます。 値に何も指定しない場合には、常にcollapseモードになります。

Optional.
swipe-target-width String スワイプの判定領域をピクセル単位で指定します。画面の端から指定した距離に達するとページが表示されます。 Optional.
width String この要素の横幅を指定します。pxと%での指定が可能です。eg. 90%, 200px Optional.
side String
left
この要素が左か右かを指定します。指定できる値は”left”か”right”のみです。 Optional.
mode String 現在のモードが設定されます。”collapse”もしくは”split”が指定されます。この属性は読み込み専用です。 Optional.
page String ons-splitter-side要素に表示するページのURLを指定します。 Optional. 初期化時のみ有効
swipeable Boolean collapseモード時にスワイプ操作を有効にする場合に指定します。 Optional.
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’}
swipeable collapseモード時にスワイプ操作を有効にする場合に指定します。
page この要素内に表示するページを指定します。
pageLoader (翻訳中)
mode Current mode. Possible values are “split”, “collapse”, “closed”, “open” or “changing”. (翻訳中)
onSwipe Hook called whenever the user slides the splitter. It gets a decimal ratio (0-1) and an animationOptions object as arguments. (翻訳中)
isOpen Specifies whether the menu is opened. (翻訳中)
シグネチャ 概要
open([options]) collapseモードになっているons-splitter-side要素を開きます。
close([options]) collapseモードになっているons-splitter-side要素を閉じます。
toggle([options]) 開けている場合は要素を閉じますそして開けている場合は要素を開きます。
load(page, [options]) 指定したURLをメインページを読み込みます。
open([options]): Promise

collapseモードになっているons-splitter-side要素を開きます。

返り値:

パラメーター
名前 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが開いた後に呼び出される関数オブジェクトを指定します。
close([options]): Promise

collapseモードになっているons-splitter-side要素を閉じます。

返り値:

パラメーター
名前 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが閉じた後に呼び出される関数オブジェクトを指定します。
toggle([options]): Promise

開けている場合は要素を閉じますそして開けている場合は要素を開きます。

返り値:

パラメーター
名前 概要
options Object
load(page, [options]): Promise

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

返り値:

パラメーター
名前 概要
page String pageのURLか、<template>で宣言したテンプレートのid属性の値を指定します。
options Object
options.callback Function
名前 概要
modechange この要素のモードが変化した際に発火します。
preopen スライディングメニューが開く前に発火します。
postopen スライディングメニューが開いた後に発火します。
preclose スライディングメニューが閉じる前に発火します。
postclose スライディングメニューが閉じた後に発火します。
swipe Fired whenever the user slides the splitter. (翻訳中)
modechange

この要素のモードが変化した際に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
event.mode String 現在のモードを返します。
preopen

スライディングメニューが開く前に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.cancel Function スライディングメニューが開くのをキャンセルします。
event.side Object コンポーネントのオブジェクト。
postopen

スライディングメニューが開いた後に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
preclose

スライディングメニューが閉じる前に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
event.cancel Function スライディングメニューが閉じるのをキャンセルします。
postclose

スライディングメニューが閉じた後に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.side Object コンポーネントのオブジェクト。
swipe

Fired whenever the user slides the splitter. (翻訳中)

パラメーター
名前 概要
event Object Event object.
event.ratio Object Decimal ratio (0-1). (翻訳中)
event.animationOptions Object (翻訳中)

お困りですか?

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

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

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