Need help with angular-bootstrap-colorpicker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

buberdds
420 Stars 237 Forks MIT License 193 Commits 14 Opened issues

Description

Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.

Services available

!
?

Need anything else?

Contributors list

devDependency Status Build Status

angular-bootstrap-colorpicker

This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
No dependency on jQuery or jQuery plugin is required.

Demo page (Bootstrap v3.x.x)

Previous releases: - branch 2.0 (Bootstrap v2.x.x) - branch 1.0 if you need a functionality from the original plugin or IE<9 support

Installation

npm

$ npm install angular-bootstrap-colorpicker --save

bower

$ bower install angular-bootstrap-colorpicker --save

Copy

css/colorpicker.css
and
js/bootstrap-colorpicker-module.js
. Add a dependency to your app, for instance:
angular.module('myApp', ['colorpicker.module'])

Examples:

Hex format

html

or
html

RGB format

html

RBGA format

html

As non input element

html

The color picker template with an input element

html

Position of the color picker (top, right, bottom, left).

html

The color picker in a fixed element

html

When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)

html

The color picker in UI Bootstrap modal (the parent element position property must be set to relative)

html

Binding the visibility of the color picker to a variable in the scope

html

Auto hiding the color picker when a color has been selected

html

Customize a size of the color picker saturation panel

html

Events:

Each color picker will emit the following events passing a data object in the following format:

javascript
{
    name: '',
    value: ''
}
Name is the string representation of ng-model and value is the current color.

colorpicker-selected

A global selected event, will be fired when a color is selected from the saturation, hue or alpha slider.

colorpicker-selected-saturation

Will be fired when a color is selected from the saturation slider.

colorpicker-selected-hue

Will be fired when a color is selected from the hue slider.

colorpicker-selected-alpha

Will be fired when a color is selected from the alpha slider.

colorpicker-shown

Will be fired when a color picker is opened.

colorpicker-closed

Will be fired when a color picker is closed.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.