Narnia's Psychedelic Mushrooms
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

toolbar

0.0.5 • Public • Published

toolbar

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

install

step 1:

npm install toolbar

step 2:

include some html in your page that looks like this:

<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:

var toolbar = require('toolbar')
var bartab = toolbar('.bar-tab')

use browserify to package toolbar for use in your client side app!

step 4:

bartab.on('select', function(item) {
  // item is the .tab-label innerText
})

bonus advice

to convert svgs from the noun project into cute little transparent pngs:

mogrify -fill "#ffffff" -opaque "#000000" -background none -format png *.svg

license

BSD

Keywords

none

install

npm i toolbar

Downloadsweekly downloads

13

version

0.0.5

license

none

last publish

collaborators

  • avatar