Javascript

【Javascript】軽量なカラーピッカーライブラリiro.js

May 27, 2017
iro

iro.jsは軽量なカラーピッカーJavascriptライブラリ。

Quick Start

<div id="example">
  <!-- The color picker will be inserted here -->
</div>

JavaScript

var exampleColorPicker = new iro.ColorPicker("#example");

Optional

var exampleColorPicker = new iro.ColorPicker("#example", {
  // Canvas dimensions:
  width: 320,
  height: 320,
  // Radius of the markers that show the current color:
  markerRadius: 8,
  // Padding space around the markers:
  padding: 4,
  // Space between the hue/saturation ring and the value slider:
  sliderMargin: 24,
  // Initial color value -- any hex, rgb or hsl color string works:
  color: "#fff",
  // CSS rules to update as the selected color changes
  css: {
    "body": {
      "background-color": "rgb"
    },
    "input, button": {
      "border-color": "rgb",
      "color": "rgb"
    }
  }
});

MIT