sioux-navigation

Navigation for sioux

npm install sioux-navigation
16 downloads in the last month

sioux Navigation

More info from sioux: gerhardberger.github.io/sioux/

npm install sioux-navigation

Navigation (similar to the iOS one) for sioux.

Create

var Navigation = require('sioux-navigation');

// the first argument is in which the navigation will be inserted into
var nav = new Navigation(document.querySelector('.screen'), {
  isBarHidden: false
  , initWith: navElem
});

The navigation object

The stack contains and at the creation the initWith property and .push() method take an object too, which has to contain:

  • title: the title in the bar, String
  • contentFn: a function that returns DOM what will be inserted into the content part, Function
  • complete: this function will be executed when the content 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
  • isBarHidden: Boolean
  • bar: the top bar element
  • content: the content element
  • segue: the Segue 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(callback): The last elem of the stack will be popped and then the previous elem will be displayed. The callback will be executed when the animation finished.
  • .hideBar(callback): Hides the top bar.
  • .showBar(callback): Shows it.
var navObj = {
  title: 'Test Title'
  , content: function () {
    var div = document.createElement('div');
    div.innerText = 'Foo';
    return div;
  }
  , complete: function (content) {
    console.log('Completed!');
  }
};

navigation.push(navObj);
npm loves you