ons-splitter

A component that enables responsive layout by implementing both a two-column layout and a sliding menu layout. It can be configured to automatically expand into a column layout on large screens and collapse the menu on smaller screens. When the menu is collapsed the user can open it by swiping.

Tutorial

See also

Attributes

Name Type Default Value Description
var String Variable name to refer this splitter. Optional. Works only during initialization.
ons-destroy Expression Allows you to specify custom behavior when the “destroy” event is fired. Optional. Works only during initialization.

Properties

Name Description
left Left <ons-splitter-side> element.
right Right <ons-splitter-side> element.
side First <ons-splitter-side> element regardless the actual side.
content The <ons-splitter-content> element.
onDeviceBackButton Back-button handler.

Methods Summary

Signature Description
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.

Methods

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.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.