rg

ractive-gauge

A simple UV-type meter for Ractive

Showing:

Popularity

Downloads/wk

0

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ractive-gauge

A simple UV-type meter for Ractive

npm version

See a demo, here.

install

nodejs/webpack/browserify

npm install --save ractive-gauge

bower

bower install --save ractive-gauge

then, in your code:

var Ractive = require('ractive')
require('ractive-gauge');

requirejs

Put dist/ractive-gauge.js in your require path, then you can do this:

define(['ractive', 'ractive-gauge'], function(Ractive, gauge){
    // do stuff
});

plain browser global

You can use a CDN:

<script src="http://konsumer.js.org/ractive-gauge/dist/ractive-gauge.min.js"></script>

or alternately use one of the files in dist/, locally.

usage

<div id="container"></div>

<script id='template' type='text/ractive'>
    <gauge value="{{coolness}}" label="coolness" /><br>
    <input min="0" max="100" type="range" value="{{coolness}}" style="width:255px;margin-left:2.5px"/>
</script>

<script src="https://cdn.ractivejs.org/latest/ractive.min.js"></script>
<script src="https://konsumer.github.io/ractive-gauge/dist/ractive-gauge.min.js"></script>
<script>
var ractive = new Ractive({
    el: 'container',
    template: '#template',
    data: {
        coolness: 0
    }
});
</script>

styling

You can use a custom SVG, and rebuild with npm run build or, if you don't need to change the overall look, but just want to change some colors, put this in your app's CSS, and change any styles you like:

.ractive-gauge .mark1 {
  fill: none;
  stroke: #a0a0a0;
}
.ractive-gauge .mark2 {
  fill: none;
  stroke: #c0d0e0;
}
.ractive-gauge .center {
  fill:none;
  stroke:#c0d0e0;
}
.ractive-gauge .number {
  fill: #606060;
}
.ractive-gauge .low {
  fill: #fc172a;
}
.ractive-gauge .medlow {
  fill: #ffe0e1;
}
.ractive-gauge .medhi {
  fill: #e3ffe1;
}
.ractive-gauge .hi {
  fill: #2cc71f;
}
.ractive-gauge .needle {
  fill: none;
  stroke: black;
}
.ractive-gauge .label {
  fill: #707070;
}
.ractive-gauge .value {
  fill: #707070;
}

These are just the colors, but you can change any SVG styles you like (eg stroke-width.)

development

You can run npm start to run a devlopment server to try out ideas while developing. Just edit index.js and changes will live-reload.

To build the minified/compiled versions run npm run build.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial