React Reference > ons-splitter-content Component

<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

Side menu

The Splitter 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 SplitterSide component. This component can either be displayed as a column next to the main content or as a swipeable menu. This behavior is controlled using the collapse property.

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

Opening and closing the menu

The menu can be opened and closed using the isOpen property. This property only works when the menu is collapsed, since in column layout it is always visible.

In the following example the menu is opened, when the user presses a button. The onClose property is called when the menu is closed and is used to control the state.

Main content

The main content of the screen is put inside the SplitterContent component. A Page component should be put as a child of this component.

<Splitter>
  <SplitterContent>
    <Page>
      Main content
    </Page>
  </SplitterContent
</Splitter>

See also

Attributes

[improve this]
Name Type Description
page String

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.

Properties

[improve this]
Name Description
page The page to load in the splitter content.
pageLoader Page element loaded in the splitter content.

Methods

[improve this]
Signature Description
load(page, [options]) Show the page specified in page in the content.
load(page, [options]): Promise

Show the page specified in page in the content.

Returns: Resolves to the new <ons-page> element

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

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.