hyper-nav
v2.0.1
Published
simple navigation widget
Downloads
11
Readme
hypernav
simple navigation widget
This creates a forward/backward navigation in a hyperscript/mutant app.
example
hello world: ask user their name, then say hello. back button returns to the "ask" screen.
var Nav = require('./')
var h = require('mutant/h')
var nav
document.body.appendChild(nav = Nav(function router (location) {
//router function returns a new element for a given location.
return h('h1', ["Hello,", location])
}, function header (nav) {
return h('label', {'ev-click': nav.back}, ['back'])
},
//the first page
h('div', [
h('h1', 'what is your name?'),
h('input', {'ev-change': function (ev) {
nav.push(ev.target.value)
}})
])
))
api
Nav(router, createHeader, initial) => navDiv
create a nav
object, which is a div with added push
and back
functions,
and history
and last
observables.
navDiv.push(location)
go to the new location, this will call the router function, and display on the screen whatever it retuns.
navDiv.back()
pop the current item and go to the previous screen.
navDiv.history
an observable of the history stack.
each item is {location: <location>, element: <page>}
navDiv.location
a observable of the very last item.
events
focus
when a page is shown on the screen, 'focus'
event will
be emitted on that element.
blur
when another page is shown, the previously visible page
will have 'blur'
emitted on that element, just before the
other element is shown.
License
MIT