Coder Social home page Coder Social logo

jwgmeligmeyling / angular-bootstrap-colorpicker Goto Github PK

View Code? Open in Web Editor NEW

This project forked from buberdds/angular-bootstrap-colorpicker

0.0 2.0 0.0 482 KB

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

License: MIT License

CSS 68.24% JavaScript 31.76%

angular-bootstrap-colorpicker's Introduction

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

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" />

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.