Important Changes: So we are moving to browserify, and removing component support. Also along with this change we will no longer be importing any CSS, If you would still like to the use the default css please import it into you project manually. The example CSS can be found at /examples/style.css.
$ npm install hone-sidebar
You can see the SPEC for full api information.
First you will need an element for the sidebar to attach to. Do this by adding an attribute to a element.
var Sidebar =sidebar = ; // make a new instancesidebar; // init looks for element. [data-sidebar]sidebar; // open sidebar up default is closed
You will see a blank bar open up into view. To make views for the sidebar all you need to do is call addView.
var html = '<p>This is html</p>'view1 = sidebar;// first view auto openssidebar;
Add another view
var html2 = '<p>This more html</p>'view2 = sidebar;view2;
Talking to and from sidebar
We use a library called
emit-bindings to talk to the buttons in the nav you will see attribute like
data-emit="sidebar.back". This will make the sidebar go back if there is a parent view of the current view.
Lets say you want a nav button to go to another view. Just create a view like this.
var view1 = sidebar;// now use emit to bind to the `open.view2` event.emit;
You can use those types of event inside and outside of the sidebar.
So once adding your new code you can test it out on the examples. To do this run
$ npm run examples
/examples/index.html to see the functioning sidebar. Once you have a working feature please test it.
$ npm install
This should automatically test everything in PhantomJS.
If you are adding something please add a test to make sure the functionality is working properly.