Angular directive for <ons-splitter-side> component.
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.
| Name | Type | Description |
|---|---|---|
| animation |
String
default |
Specify the animation. Use one of overlay, push, reveal or default.
Optional.
|
| animation-options | Expression |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
Optional.
|
| open-threshold |
Number
0.3 |
Specify how much the menu needs to be swiped before opening. A value between 0 and 1.
Optional.
|
| collapse | String |
Specify the collapse behavior. Valid values are |
| swipe-target-width | 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.
|
| side |
String
left |
Specify which side of the screen the <ons-splitter-side> element is located. Possible values are "left" and "right".
Optional.
|
| mode | String |
Current mode. Possible values are "collapse" or "split". This attribute is read only.
Optional.
|
| page | String | The URL of the menu page. Optional. Works only during initialization. |
| swipeable | Boolean | Whether to enable swipe interaction on collapse mode. Optional. |
| Name | Description |
|---|---|
| animationOptions |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
|
| swipeable | Whether to enable swipe interaction on collapse mode. |
| page | Page location to load in the splitter side. |
| pageLoader | |
| mode | Current mode. Possible values are “split”, “collapse”, “closed”, “open” or “changing”. |
| onSwipe | Hook called whenever the user slides the splitter. It gets a decimal ratio (0-1) and an animationOptions object as arguments. |
| isOpen | Specifies whether the menu is opened. |
| Signature | Description |
|---|---|
| open([options]) | Open menu in collapse mode. |
| close([options]) | Close menu in collapse mode. |
| toggle([options]) | Opens if it’s closed. Closes if it’s open. |
| load(page, [options]) | Show the page specified in pageUrl in the right section |
Open menu in collapse mode.
Returns: Resolves to the splitter side element or false if not in collapse mode
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.callback | Function | This function will be called after the menu has been opened. |
Close menu in collapse mode.
Returns: Resolves to the splitter side element or false if not in collapse mode
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.callback | Function | This function will be called after the menu has been closed. |
Opens if it’s closed. Closes if it’s open.
Returns: Resolves to the splitter side element or false if not in collapse mode
| Name | Type | Description |
|---|---|---|
| options | Object |
Show the page specified in pageUrl in the right section
Returns: Resolves to the new page element
| Name | Type | Description |
|---|---|---|
| page | String |
Page URL. Can be either an HTML document or a <template>.
|
| options | Object | |
| options.callback | Function |
| Name | Type | Description |
|---|---|---|
| page | Page content. | |
| page | Specify the page component. |
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.