Skip to content
Navigation for sioux.
JavaScript CSS
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
README.md
index.js
package.json
style.css

README.md

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);
Something went wrong with that request. Please try again.