Reference > v-ons-splitter-side

v-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

Splitter

The VOnsSplitter component is used to display a menu next to the main content. It can be configured to either display in column layout or as a swipeable menu.

It is also possible to automatically switch between column layout and a layout with a swipeable menu based on the screen size or any arbitrary condition. In some situations it can be useful to display a column layout on large devices and hide the menu on smaller screens.

The menu is defined using the VOnsSplitterSide component. This component can either be displayed as a column next to the main content or as a swipeable menu. This behavior is controlled by using the collapse prop.

To enable opening and closing the menu by swiping, the swipable prop must be defined. The side prop is used to specify on which side of the screen the menu is displayed.

The open prop allows to assign a boolean variable to the menu in order to open or close it. This only works when the menu is collapsed, since in column layout it is always visible. An update:open event is fired whenever the user interacts with the menu and allows to synchronize the open prop (v-model:open can be used as a shortcut):

<v-ons-splitter-side v-model:open="isOpen">

In order to open or close the menu from a button, we must pass a method that modifies open prop down to the right place.

Main content

The main content of the screen is located inside the VOnsSplitterContent component. A VOnsPage component should always be the child of this component.

<v-ons-splitter>
  <v-ons-splitter-content>
    <v-ons-page>
      Main content
    </v-ons-page>
  </v-ons-splitter-content
</v-ons-splitter>

In order to change its content, we can simply switch its children with Vue is prop or any other way. This also works for VOnsSplitterSide component.

If you want to show core transition animations between pages or need a more complex routing, consider nesting VOnsNavigator inside VOnsSplitterContent.

See also

Props

Name Type Description
animation String Specify the animation. Use one of overlay, push, reveal or default. Optional.
animationOptions Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
collapse String

Specify the collapse behavior. Valid values are "portrait", "landscape" or a media query. The string "portrait" means the view will collapse when the device is in portrait orientation. The string "landscape" means the view will collapse when the device is in landscape orientation. If the value is a media query, the view will collapse when the media query resolves to true. If the attribute is set, including as an empty string, the view will always be in "collapse" mode. If the attribute is not set, the view will be in "split" mode.

Optional.
mode String Current mode. Possible values are "collapse" or "split". This attribute is read only. Optional.
open Boolean If exists, the menu will be opened accordingly. Must be modified on update:open event. Optional.
openThreshold Number Specify how much the menu needs to be swiped before opening. A value between 0 and 1. Optional.
page The URL of the menu page. Optional.
side String Specify which side of the screen the <ons-splitter-side> element is located. Possible values are "left" and "right". Optional.
swipeable Boolean Whether to enable swipe interaction on collapse mode. Optional.
swipeTargetWidth 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.

Events

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.
swipe Fired whenever the user slides the splitter.
update:open Fired right after user interaction. Useful to update open prop.
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.
swipe

Fired whenever the user slides the splitter.

Parameters
Name Type Description
event Object Event object.
event.ratio Object Decimal ratio (0-1).
event.animationOptions Object
update:open

Fired right after user interaction. Useful to update open prop.

Parameters
Name Type Description
event Number New value for open prop.

Need Help?

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.