View Source Improve this doc

ons-split-view

Divides the screen into a left and right section.

Usage # 

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

Live Example #

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

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
var String Variable name to refer this split view. Optional
main-page String The url of the page on the right. Optional
main-page-width Number Main page width percentage. The secondary page width will be the remaining percentage. Optional
secondary-page String The url of the page on the left. Optional
collapse String Specify the collapse behavior. Valid values are portrait, landscape, width #px or a media query. "portrait" or "landscape" means the view will collapse when device is in landscape or portrait orientation. "width #px" means the view will collapse when the window width is smaller than the specified #px. If the value is a media query, the view will collapse when the media query is true. Optional
ons-update Expression Allows you to specify custom behavior when the "update" event is fired. Optional
ons-presplit Expression Allows you to specify custom behavior when the "presplit" event is fired. Optional
ons-precollapse Expression Allows you to specify custom behavior when the "precollapse" event is fired. Optional
ons-postsplit Expression Allows you to specify custom behavior when the "postsplit" event is fired. Optional
ons-postcollapse Expression Allows you to specify custom behavior when the "postcollapse" event is fired. Optional
ons-destroy Expression Allows you to specify custom behavior when the "destroy" event is fired. Optional

Methods Summary #

Signature Description
setMainPage(pageUrl) Show the page specified in pageUrl in the right section
setSecondaryPage(pageUrl) Show the page specified in pageUrl in the left section
update() Trigger an 'update' event and try to determine if the split behaviour should be changed.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary #

Name Description
update Fired when the split view is updated.
presplit Fired just before the view is split.
postsplit Fired just after the view is split.
precollapse Fired just before the view is collapsed.
postcollapse Fired just after the view is collapsed.

Methods

setMainPage(pageUrl) #

Show the page specified in pageUrl in the right section

Parameters
Name Type Description
pageUrl String Page URL. Can be either an HTML document or an .

setSecondaryPage(pageUrl) #

Show the page specified in pageUrl in the left section

Parameters
Name Type Description
pageUrl String Page URL. Can be either an HTML document or an .

update() #

Trigger an 'update' event and try to determine if the split behaviour should be changed.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

update #

Fired when the split view is updated.

Parameters
Name Type Description
event Object Event object.
event.splitView Object Split view object.
event.shouldCollapse Boolean True if the view should collapse.
event.currentMode String Current mode.
event.split Function Call to force split.
event.collapse Function Call to force collapse.
event.width Number Current width.
event.orientation String Current orientation.

presplit #

Fired just before the view is split.

Parameters
Name Type Description
event Object Event object.
event.splitView Object Split view object.
event.width Number Current width.
event.orientation String Current orientation.

postsplit #

Fired just after the view is split.

Parameters
Name Type Description
event Object Event object.
event.splitView Object Split view object.
event.width Number Current width.
event.orientation String Current orientation.

precollapse #

Fired just before the view is collapsed.

Parameters
Name Type Description
event Object Event object.
event.splitView Object Split view object.
event.width Number Current width.
event.orientation String Current orientation.

postcollapse #

Fired just after the view is collapsed.

Parameters
Name Type Description
event Object Event object.
event.splitView Object Split view object.
event.width Number Current width.
event.orientation String Current orientation.

Discussion #