Brick plugin to radio or toggle any dom elements
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
.gitignore
History.md
Makefile
Readme.md
component.json
index.js
package.json

Readme.md

control-brick

Brick plugin to toggle or radio any dom elements. Useful to create tab-based navigation bar, toolbar, etc.

Installation

with component:

$ component install bredele/control-brick

with nodejs:

$ component install control-brick

Usage

First, add the plugin to your view (see brick to know more about views):

var controller = require('control-brick')({
    handler : function() {
      //do something
  }
});
view.add('data-control', controller);

Basic

radio:

<nav class="toolbar" data-control="radio:click .menu, handler">
    <button class="menu">Menu 1</button>
    <button class="menu">Menu 2</button>
    <button></button>
<nav>

Add active class to the clicked button (with the class menu). Only one button can be 'active' at a time.

toggle:

<ul class="list" data-control="toggle:click .link, handler">
    <li class="link"></li>
    <li></li>
<ul>

Toggle active class to the clicked link (with the class link). Serveral links can be 'active' at the same time.

Control uses events-brick and inherits its behaviour.

see live example

Advanced

You can change the class applied to your radio/toggle elements (active is the default class):

<nav class="toolbar" data-control="radio:click .menu, clicked handler">
    <button class="menu">Menu 1</button>
    <button class="menu">Menu 2</button>
    <button></button>
<nav>

Add clicked class to the clicked button

License

MIT