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

• Sioux UI

Create

var UINavigation = require('sioux-ui-navigation');

// the first argument is in which the navigation will be appended
var nav = new UINavigation(document.querySelector('.screen'), {
  isToolbarHidden: true
  , isBarHidden: false
  , initWith: 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
• 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.

.then(callback)

Chain it to the push and pop method and when they finish the callback argument will be executed.

var navObj = {
  title: 'Test Title'
  , content: someHTML
  , complete: function (content) {
    console.log('Completed!');
  }
};

navigation.push(navObj)
  .then(function () {
    console.log('Pushed!')
  })
  .pop()
  .then(function () {
    console.log('Popped!')
  });