View Source Improve this doc

ons-split-view

画面を左右に分割するコンポーネントです。

使い方 # 

<ons-split-view
  secondary-page="secondary.html"
  main-page="main.html"
  main-page-width="70%"
  collapse="portrait">
</ons-split-view>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

関連情報 #

属性 #

名前 型 / デフォルト値 概要
var String このスプリットビューコンポーネントを参照するための名前を指定します。 Optional
main-page String 右側に表示するページのURLを指定します。 Optional
main-page-width Number 右側のページの幅をパーセント単位で指定します。 Optional
secondary-page String 左側に表示するページのURLを指定します。 Optional
collapse String 左側のページを非表示にする条件を指定します。portrait, landscape、width #pxもしくはメディアクエリの指定が可能です。 portraitもしくはlandscapeを指定すると、デバイスの画面が縦向きもしくは横向きになった時に適用されます。 width #pxを指定すると、画面が指定した横幅よりも短い場合に適用されます。 メディアクエリを指定すると、指定したクエリに適合している場合に適用されます。 Optional
ons-update Expression "update"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-presplit Expression "presplit"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-precollapse Expression "precollapse"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postsplit Expression "postsplit"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postcollapse Expression "postcollapse"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-destroy Expression "destroy"イベントが発火された時の挙動を独自に指定できます。 Optional

メソッド概要 #

シグネチャ 概要
setMainPage(pageUrl) 指定したURLをメインページを読み込みます。
setSecondaryPage(pageUrl) 指定したURLを左のページの読み込みます。
update() splitモードを変えるべきかどうかを判断するための'update'イベントを発火します。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

イベント概要 #

名前 概要
update split viewの状態が更新された際に発火します。
presplit split状態にる前に発火します。
postsplit split状態になった後に発火します。
precollapse collapse状態になる前に発火します。
postcollapse collapse状態になった後に発火します。

メソッド

setMainPage(pageUrl) #

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

パラメーター
名前 型 概要
pageUrl String pageのURLか、ons-templateで宣言したテンプレートのid属性の値を指定します。

setSecondaryPage(pageUrl) #

指定したURLを左のページの読み込みます。

パラメーター
名前 型 概要
pageUrl String pageのURLか、ons-templateで宣言したテンプレートのid属性の値を指定します。

update() #

splitモードを変えるべきかどうかを判断するための'update'イベントを発火します。

on(eventName, listener) #

イベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function このイベントが発火された際に呼び出される関数オブジェクトを指定します。

once(eventName, listener) #

一度だけ呼び出されるイベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。

off(eventName, [listener]) #

イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーを指定します。

イベント

update #

split viewの状態が更新された際に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクトです。
event.splitView Object イベントが発火したSplitViewオブジェクトです。
event.shouldCollapse Boolean collapse状態の場合にtrueになります。
event.currentMode String 現在のモード名を返します。"collapse"か"split"かのいずれかです。
event.split Function この関数を呼び出すと強制的にsplitモードにします。
event.collapse Function この関数を呼び出すと強制的にcollapseモードにします。
event.width Number 現在のSplitViewの幅を返します。
event.orientation String 現在の画面のオリエンテーションを返します。"portrait"かもしくは"landscape"です。

presplit #

split状態にる前に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクト。
event.splitView Object イベントが発火したSplitViewオブジェクトです。
event.width Number 現在のSplitViewnの幅です。
event.orientation String 現在の画面のオリエンテーションを返します。"portrait"もしくは"landscape"です。

postsplit #

split状態になった後に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクト。
event.splitView Object イベントが発火したSplitViewオブジェクトです。
event.width Number 現在のSplitViewnの幅です。
event.orientation String 現在の画面のオリエンテーションを返します。"portrait"もしくは"landscape"です。

precollapse #

collapse状態になる前に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクト。
event.splitView Object イベントが発火したSplitViewオブジェクトです。
event.width Number 現在のSplitViewnの幅です。
event.orientation String 現在の画面のオリエンテーションを返します。"portrait"もしくは"landscape"です。

postcollapse #

collapse状態になった後に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクト。
event.splitView Object イベントが発火したSplitViewオブジェクトです。
event.width Number 現在のSplitViewnの幅です。
event.orientation String 現在の画面のオリエンテーションを返します。"portrait"もしくは"landscape"です。

議論 #