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.
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.
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>
Another way is to use the page attribute to load the content from an <template> element:
<template id="page.html">
</template>
...
<ons-splitter>
<ons-splitter-content page="page.html">
</ons-splitter-content>
</ons-splitter>
In order to change the content of the <ons-splitter-content> you can use the load(page, options) method:
// Switch to the Settings page.
mySplitter.content.load('settings.html');
Normally this method will be called when the user clicks on one of the items in the menu.
The <ons-splitter-side> supports several attributes that control the behavior of the menu.
swipeable attributeThis attribute must be defined to enable opening and closing the menu by swiping.
collapse attributeThe 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.
side attributeThis 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.
| Name | Type | 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. |
| 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. |
| 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. |
Add an event listener.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Add an event listener that’s only triggered once.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
If you have any questions, use our Community Forum or talk to us on Discord 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.