iro-transparency-plugin
Adds comprehensive transparency support to iro.js
Features | Installation | Usage | Color API Extras
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 --save
If you are using a module bundler like Webpack or Rollup, import iro-transparency-plugin into your project after iro.js:
Using ES6 modules:
;;
Using CommonJS modules:
const iro = ;const iroTransparencyPlugin = ;
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:
<!-- ... --> <!-- ... -->
Using the jsDelivr CDN
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;
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 = 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 } |