ons-splitter-side

The <ons-splitter-side> element is used as a child element of <ons-splitter>. It will be displayed on either the left or right side of the <ons-splitter-content> element. It supports two modes: collapsed and split. When it’s in collapsed mode it will be hidden from view and can be displayed when the user swipes the screen or taps a button. In split mode the element is always shown. It can be configured to automatically switch between the two modes depending on the screen size.

Tutorial

See also

Attributes

Name Type Default Value Description
animation String
default
Specify the animation. Use one of overlay, push, reveal or default. Optional.
animation-options Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
open-threshold Number
0.3
Specify how much the menu needs to be swiped before opening. A value between 0 and 1. Optional.
collapse String

Specify the collapse behavior. Valid values are "portrait", "landscape" or a media query. The strings "portrait" and "landscape" means the view will collapse when device is in landscape or portrait orientation. If the value is a media query, the view will collapse when the media query resolves to true. If the value is not defined, the view always be in "collapse" mode.

Optional.
swipe-target-width String The width of swipeable area calculated from the edge (in pixels). Use this to enable swipe only when the finger touch on the screen edge. Optional.
width String Can be specified in either pixels or as a percentage, e.g. 90% or 200px. Optional.
side String
left
Specify which side of the screen the <ons-splitter-side> element is located. Possible values are "left" and "right". Optional.
mode String Current mode. Possible values are "collapse" or "split". This attribute is read only. Optional.
page String The URL of the menu page. Optional. Works only during initialization.
swipeable Boolean Whether to enable swipe interaction on collapse mode. Optional.

Properties

Name Description
page Page location to load in the splitter side.
pageLoader
mode Current mode. Possible values are “split”, “collapse”, “closed”, “open” or “changing”.
isOpen This value is true when the menu is open..

Methods Summary

Signature Description
open([options]) Open menu in collapse mode.
close([options]) Close menu in collapse mode.
toggle([options]) Opens if it’s closed. Closes if it’s open.
load(page, [options]) Show the page specified in pageUrl in the right section

Events Summary

Name Description
modechange Fired just after the component’s mode changes.
preopen Fired just before the sliding menu is opened.
postopen Fired just after the sliding menu is opened.
preclose Fired just before the sliding menu is closed.
postclose Fired just after the sliding menu is closed.

Methods

open([options]): Promise

Open menu in collapse mode.

Returns: Resolves to the splitter side element or false if not in collapse mode

Parameters
Name Type Description
options Object Parameter object.
options.callback Function This function will be called after the menu has been opened.

close([options]): Promise

Close menu in collapse mode.

Returns: Resolves to the splitter side element or false if not in collapse mode

Parameters
Name Type Description
options Object Parameter object.
options.callback Function This function will be called after the menu has been closed.

toggle([options]): Promise

Opens if it’s closed. Closes if it’s open.

Returns: Resolves to the splitter side element or false if not in collapse mode

Parameters
Name Type Description
options Object

load(page, [options]): Promise

Show the page specified in pageUrl in the right section

Returns: Resolves to the new page element

Parameters
Name Type Description
page String Page URL. Can be either an HTML document or an .
options Object
options.callback Function

Events

modechange

Fired just after the component’s mode changes.

Parameters
Name Type Description
event Object Event object.
event.side Object Component object.
event.mode String Returns the current mode. Can be either "collapse" or "split".

preopen

Fired just before the sliding menu is opened.

Parameters
Name Type Description
event Object Event object.
event.cancel Function Call to cancel opening sliding menu.
event.side Object Component object.

postopen

Fired just after the sliding menu is opened.

Parameters
Name Type Description
event Object Event object.
event.side Object Component object.

preclose

Fired just before the sliding menu is closed.

Parameters
Name Type Description
event Object Event object.
event.side Object Component object.
event.cancel Function Call to cancel opening sliding-menu.

postclose

Fired just after the sliding menu is closed.

Parameters
Name Type Description
event Object Event object.
event.side Object Component object.

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.