angular-bootstrap-colorpicker

WebJar for angular-bootstrap-colorpicker

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-bootstrap-colorpicker
Last Version	3.0.11
Release Date	Apr 14, 2015
Type	jar
Description	angular-bootstrap-colorpicker WebJar for angular-bootstrap-colorpicker
Project URL	http://webjars.org
Source Code Management	https://github.com/buberdds/angular-bootstrap-colorpicker

Download angular-bootstrap-colorpicker

Filename	Size
angular-bootstrap-colorpicker-3.0.11.pom
angular-bootstrap-colorpicker-3.0.11.jar	31 KB
angular-bootstrap-colorpicker-3.0.11-sources.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-colorpicker/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-bootstrap-colorpicker</artifactId>
    <version>3.0.11</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-colorpicker/
implementation 'org.webjars.bower:angular-bootstrap-colorpicker:3.0.11'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-colorpicker/
implementation ("org.webjars.bower:angular-bootstrap-colorpicker:3.0.11")

Apache Buildr

'org.webjars.bower:angular-bootstrap-colorpicker:jar:3.0.11'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-bootstrap-colorpicker" rev="3.0.11">
  <artifact name="angular-bootstrap-colorpicker" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-bootstrap-colorpicker', version='3.0.11')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-bootstrap-colorpicker" % "3.0.11"

Leiningen

[org.webjars.bower/angular-bootstrap-colorpicker "3.0.11"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

<input colorpicker type="text" ng-model="your_model" />

or

<input colorpicker="hex" type="text" ng-model="your_model" />

RGB format

<input colorpicker="rgb" type="text" ng-model="your_model" />

RBGA format

<input colorpicker="rgba" type="text" ng-model="your_model" />

As non input element

<div colorpicker ng-model="your_model"></div>

The color picker template with an input element

<input colorpicker colorpicker-with-input="true" type="text" ng-model="your_model" />

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

<input colorpicker colorpicker-position="right" type="text" ng-model="your_model" />

The color picker in a fixed element

<input colorpicker colorpicker-fixed-position="true" type="text" ng-model="your_model" />

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

<input colorpicker colorpicker-fixed-position="true" colorpicker-parent="true" type="text" ng-model="your_model" />

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

<input colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />

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

<input colorpicker colorpicker-is-open="isOpen" type="text" ng-model="your_model" />

Auto hiding the color picker when a color has been selected

<input colorpicker colorpicker-close-on-select type="text" ng-model="your_model" />

Customize a size of the color picker saturation panel

<input colorpicker colorpicker-size="200" type="text" ng-model="your_model" />

Events:

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

{
	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.

Versions

Version
3.0.11 Apr 14, 2015
3.0.8 Apr 2, 2015