v-ons-splitter-content

The <ons-splitter-content> element is used as a child element of <ons-splitter>. It contains the main content of the page while <ons-splitter-side> contains the list.

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

Name Type Description
page

The url of the content page. If this attribute is used the content will be loaded from a <template> tag or a remote file. It is also possible to put <ons-page> element as a child of the element.

Optional.

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.