The SplitterContent element is used as a child element of Splitter. It contains the main content of the page while SplitterSide contains the list.
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
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.
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.
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>
|Name||Type Default Value||Description|
Specify the collapse behavior. Valid values are
|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.|
Specify which side of the screen the SplitterSide element is located. Possible values are
|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.|
Specify the animation. Use one of
Specify the animation’s duration, delay and timing. E.g.
Specify how much the menu needs to be swiped before opening. A value between
Current mode. Possible values are
|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.|
For bug reports and feature requests use our GitHub Issues page.