material-design-inspired-color-picker
A color picker inspired by material design. It is highly customizable and supports custom colors and palettes.
Last updated 4 months ago by bennyalex .
GPL-3.0 · Repository · Bugs · Original npm · Tarball
$ cnpm install material-design-inspired-color-picker 
SYNC missed versions from official npm registry.

material-design-inspired-color-picker

A customizable javascript color picker inspired by material design

forthebadge

forthebadge

Screenshot

DEMO

Features

  • built-in material color palette with shades and accent colors
  • highly customizable
  • support for custom color palettes
  • display main color first and by clicking on it show its shades or accent colors
  • easy to use
  • lightweight
  • can be used in plain javascript projects or with other js frameworks

Installation

With npm:

npm install material-design-inspired-color-picker --save

As script:

Download the md-color-picker.js file from here

Usage

Include the script in your app.

If you installed the color picker with npm:

import 'material-design-inspired-color-picker'

If you just downloaded the md-color-picker.js file:

<script src="path/to/md-color-picker.js"></script>

Then, you can use it like a html tag:

<md-color-picker></md-color-picker>

A custom elements polyfill is included, so it will work in even in browsers wich do not support the custom-elements specification.

Api

The picker let you pass in some options and attributes so you can customize it.

Note: In html the attributes are seperated by a hyphen instead of using camelCase in JavaScript.

Following properties can be parsed into the picker:

propertyname (JS / HTML) type default example
colorMargin / color-margin (in px) number 6 12
colorsPerRow / colors-per-row number 5 4
colorSize / color-size (in px) number 54 42
defaultTint / default-tint number or string 500 '200'
fixedMinHeight / fixed-min-height bool true false
palette string or object 'material' 'material-full'
useSpectrumPicker / use-spectrum-picker bool true false
value string none #f1c5a9

Description:

  • colorMargin : The distance between the colors
  • colorsPerRow : The number of colors per row
  • colorSize : The size of each color circle
  • defaultTint : this is the tint for each color wich will be shown at the beginning. Material colors default tint is 500. For custom palettes you can also use strings. *fixedMinHeight : If disabled, the picker will become less high, when the current subpalette has less colors than the mainpalette
  • palette : the palette with all colors. If it is a string, the picker will use a built in palette. Currently the following palettes are available:
material : standard material colors
material-full : the material colors including the accent colors
material-accent : only the accent material colors
  • useSpectrumPicker : if false, the other color tints can not be selected, so only the color wich matches default tint is selectable.
  • value : the color which is selected. Must be a hex number with 6 digits and a hashtag.

Full example:

<md-color-picker value="#abcdef" palette="material-accent" default-tint="300" use-spectrum-picker="false"></md-color-picker>

For a more detailed example, see the demo page under docs folder or live: https://bennyalex.github.io/material-design-inspired-color-picker/

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 20
Last Day 0
Last Week 20
Last Month 1
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |