toolbar
Version:
client side module for creating toolbars
61 lines (43 loc) • 1.25 kB
Markdown
keyboard selectable toolbar for selecting an active tool
when users hit 0-9 on their keyboard or click an item on the toolbar `toolbar` will emit a javascript event that will tell you which item in the toolbar has been selected
step 1:
`npm install toolbar`
step 2:
include some html in your page that looks like this:
```html
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="">
<img class="tab-icon" src="icons/first-tool.png">
<div class="tab-label">First Tool</div>
</a>
</li>
<li class="tab-item">
<a href="">
<img class="tab-icon" src="icons/second-tool.png">
<div class="tab-label">Second Tool</div>
</a>
</li>
</ul>
</nav>
```
step 3:
```javascript
var toolbar = require('toolbar')
var bartab = toolbar('.bar-tab')
```
use [browserify](http://browserify.org/) to package toolbar for use in your client side app!
step 4:
```javascript
bartab.on('select', function(item) {
// item is the .tab-label innerText
})
```
to convert svgs from the noun project into cute little transparent pngs:
`mogrify -fill "#ffffff" -opaque "#000000" -background none -format png *.svg`
BSD