<SplitterSide />

The SplitterContent element is used as a child element of Splitter. It contains the main content of the page while SplitterSide contains the list.

Tutorial

Props

Name Type Default Value Description
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 not defined, the view always be in "collapse" mode.

Optional.
swipeable bool Ennable swipe interaction on collapse mode. Optional.
isOpen bool Specifies whether the menu is open. Optional.
onOpen function Called after the menu is opened. Optional.
onClose function Called after the menu is closed. Optional.
side string Specify which side of the screen the SplitterSide element is located. Possible values are "left" and "right". Optional.
swipeTargetWidth number Specifies the width of the menu with a number (for pixels) or a string (e.g. “20%” for percentage). Optional.
width number Specifies the width of the menu with a number (for pixels) or a string (e.g. “20%” for percentage). Optional.
animation string Specify the animation. Use one of overlay, push, reveal, or default. Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
openThreshold object Specify how much the menu needs to be swiped before opening. A value between 0 and 1. Optional.
mode string Current mode. Possible values are "collapse" or "split". This attribute is read only. Optional.
onPreOpen string Called before the menu opens. Optional.
onPreClose string Called before the menu closes. Optional.
onModeChange string Called after the component’s mode changes. Optional.

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.