Sioux UINavigation
npm install sioux-ui-navigation
Navigation (similar to the iOS one) for sioux. demo (on desktop in Chrome use emulate touch events in devtools)
Inherits from
Create
var UINavigation = ;// the first argument is in which the navigation will be appendedvar nav = documentisToolbarHidden: trueisBarHidden: falseinitWith: navElem;
The navigation elem
The stack
contains and at the creation the initWith
property and .push()
method take an object, which has to contain:
- title: the title in the bar, String
- content: the HTML what will be inserted into the
content
part, DOM - complete: this function will be executed when the eleme will be loaded, Function
Properties
- stack: the stack of the windows in the navigation, the last elem of the stack is the one active on the screen
- isToolbarHidden: Boolean
- isBarHidden: Boolean
- bar: the top bar element
- toolbar: the bottom toolbar element not so useable right now
- content: the content element
- segue: the UISegue object (in the content element)
Methods
- .push(navElem): A new elem will be added to the
stack
and it will be displayed on screen. - .pop(): The last elem of the
stack
will be popped and then the previous elemnt will be displayed. - .hideBar(): Hides the top bar.
- .showBar(): Shows it.
- .hideToolbar(): Hides the toolbar.
- .showToolbar(): Shows it.
- .then(callback): Chain it to the
push
orpop
or any other method above, and when they finish thecallback
argument will be executed.
var navObj =title: 'Test Title'content: someHTML{console;};navigation;