Riot-md-checkbox NPM

riot-md-checkbox

Material Design animated Checkbox input, for Riot.js

md-checkbox

Installation

bower install riot-md-checkbox

npm install riot-md-checkbox

Usage

<md-checkbox
  label="Checkbox Label 1" input="group[]" check="true">
</md-checkbox>

<md-checkbox
  label="Checkbox Label 2" input="group[]" text="Additional display text.">
</md-checkbox>

<md-checkbox
  label="Checkbox Label 3" input="group[]" value="Custom 'on' value">
</md-checkbox>

Bower

With Bower, you have access to the pre-compiled and non-compiled files.

Pre-compiled:

<!-- mount point -->
<md-checkbox></md-checkbox>

<!-- include riot.js only -->
<script src="//cdn.jsdelivr.net/riot/2.3/riot.min.js"></script>
<!-- include the precompiled js file -->
<script src="bower_components/riot-md-checkbox/md-checkbox.js"></script>
<!-- standard `mount()` -->
<script>
  riot.mount('*');
</script>

In-browser Compilation:

<!-- mount point -->
<md-checkbox></md-checkbox>

<!-- include source tag -->
<script src="bower_components/riot-md-checkbox/md-checkbox.tag" type="riot/tag"></script>
<!-- include riot.js and the compiler -->
<script src="//cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<!-- standard `mount()` -->
<script>
  riot.mount('*');
</script>

NPM

A pre-compiled version, including styles, is exported as the NPM module. This means you may require() the module directly.

// templates.js (example file)
var riot = require('riot');

require('riot-md-checkbox');

riot.mount('*');

Note: You do not need to require riot within the same file. However, riot must be loaded and accessible before your template file(s) -- a simple global will work.