Navigation for sioux.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
README.md
index.js
package.json
struct.html
style.css

README.md

Sioux Navigation

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!')
  });