Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

iro-transparency-plugin

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

iro-transparency-plugin

Adds comprehensive transparency support to iro.js

1.0.2
latest
Source
npm

Version published: 6 years ago

Weekly downloads: 8; increased by100%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

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:

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 }`

FAQs

What is iro-transparency-plugin?

Is iro-transparency-plugin popular?

Is iro-transparency-plugin well maintained?

Package last updated on 08 Apr 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install