The <v-ons-splitter-side>
component is used as a child component of <v-ons-splitter>
.
It will be displayed on either the left or right side of the <v-ons-splitter-content>
component.
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 component is always shown. It can be configured to automatically switch between the two modes depending on the screen size.
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 (sync
modifier can be used as a shortcut):
<v-ons-splitter-side :open.sync="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.
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
.
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.
|
Fired just after the component’s mode changes.
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" .
|
Fired just before the sliding menu is opened.
Name | Type | Description |
---|---|---|
event | Object | Event object. |
event.cancel | Function | Call to cancel opening sliding menu. |
event.side | Object | Component object. |
Fired just after the sliding menu is opened.
Name | Type | Description |
---|---|---|
event | Object | Event object. |
event.side | Object | Component object. |
Fired just before the sliding menu is closed.
Name | Type | Description |
---|---|---|
event | Object | Event object. |
event.side | Object | Component object. |
event.cancel | Function | Call to cancel opening sliding-menu. |
Fired just after the sliding menu is closed.
Name | Type | Description |
---|---|---|
event | Object | Event object. |
event.side | Object | Component object. |
Fired whenever the user slides the splitter.
Name | Type | Description |
---|---|---|
event | Object | Event object. |
event.ratio | Object | Decimal ratio (0-1). |
event.animationOptions | Object |
Fired right after user interaction. Useful to update open
prop.
Name | Type | Description |
---|---|---|
event | Number |
New value for open prop.
|
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.