iro-transparency-plugin
v1.0.2
Published
Adds comprehensive transparency support to iro.js
Downloads
29
Readme
Features
- Color picker transparency slider
- Extends iro.js color API to add support for hsva, hsla, rgba, hex8 and hex4 colors
- 7kb minified, or less than 2kB minified + gzipped
Installation
Install with NPM
$ npm install iro-transparency-plugin --saveIf you are using a module bundler like Webpack or Rollup, import iro-transparency-plugin into your project after iro.js:
Using ES6 modules:
import iro from '@jaames/iro';
import iroTransparencyPlugin from 'iro-transparency-plugin';Using CommonJS modules:
const iro = require('@jaames/iro');
const iroTransparencyPlugin = require('iro-transparency-plugin');Download and host yourself
Development version Uncompressed at around 20kB, with source comments included
Production version Minified to 8kB
Then add it to the <head> of your page with a <script> tag after iro.js:
<html>
<head>
<!-- ... -->
<script src="./path/to/iro.min.js"></script>
<script src="./path/to/iro-transparency-plugin.min.js"></script>
</head>
<!-- ... -->
</html>Using the jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/iro-transparency-plugin/dist/iro-transparency-plugin.min.js"></script>Usage
Register Plugin
After both iro.js and iro-transparency-plugin have been imported/downloaded, the plugin needs to be registered with iro.use:
iro.use(iroTransparencyPlugin);ColorPicker Setup
The plugin adds a new transparency config option to iro.ColorPicker. If set to true, a transparency slider will be added to the color picker.
var colorPicker = new iro.ColorPicker({
width: 320,
color: {r: 255, g: 100, b: 100, a: 1},
transparency: true
})Color API Extras
There are also additional color properties for getting / setting the selected color from various color-with-alpha formats. Note that the alpha value should always be between 0 and 1 here.
All of these formats are also supported by the set method and the color picker's color option.
| Property | Example Format |
|:-------------|:-------------------|
| alpha | 0.5 |
| hex8String | "#ff0000ff" |
| rgba | { r: 255, g: 0, b: 0, a: 0.5 } |
| rgbaString | "rgba(255, 0, 0, 0.5)" |
| hsla | { h: 360, s: 100, l: 50, a: 0.5 } |
| hslaString | "hsla(360, 100%, 50%, 0.5)" |
| hsva | { h: 360, s: 100, v: 100, a: 0.5 } |