sioux-ui-navigation

Navigation for sioux

npm install sioux-ui-navigation
24 downloads in the last month

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 = 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 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 or pop or any other method above, 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!')
  });
npm loves you