Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Alberplz/angular2-color-picker
Angular 2 Color Picker Directive, no dependences required.
https://github.com/Alberplz/angular2-color-picker
Last synced: 2 months ago
JSON representation
Angular 2 Color Picker Directive, no dependences required.
- Host: GitHub
- URL: https://github.com/Alberplz/angular2-color-picker
- Owner: Alberplz
- License: mit
- Created: 2016-02-26T03:45:24.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-02T18:14:16.000Z (about 7 years ago)
- Last Synced: 2024-10-12T19:46:39.506Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.91 MB
- Stars: 185
- Watchers: 8
- Forks: 82
- Open Issues: 53
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - angular2-color-picker - Angular 2 Color Picker Directive, no dependences required. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-color-picker - Angular 2 Color Picker Directive, no dependences required. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-color-picker - Angular 2 Color Picker Directive, no dependences required. (Uncategorized / Uncategorized)
- awesome-angular-components - Alberplz/angular2-color-picker - Angular 2 Color Picker Directive, no dependences required. (UI Components / Form)
README
# angular2-color-picker
Angular 2 Color Picker Directive/Component with no dependencies required.
This is a Color Picker Directive/Component for Angular 2.
# Demo page
http://alberplz.github.io/angular2-color-picker/examples/index.html
# Installation
```bash
npm i --save angular2-color-picker
```
# Usage
* Use it in your HTML elements, for example:
```html
```
* Or:
```html
```
* Add ColorPickerModule in your app.module.ts:
```javascript
import {ColorPickerModule} from 'angular2-color-picker';
@NgModule({
...
imports: [ColorPickerModule]
})
```
* Set color the variable. You can use ColorPickerService in your component if you want extra functions.
```javascript
import {Component} from '@angular/core';
import {ColorPickerService} from 'angular2-color-picker';
@Component({
selector: 'my-app',
templateUrl: 'app/demo.html'
})
export class AppComponent {
private color: string = "#127bdc";
constructor(private cpService: ColorPickerService) {
}
}
```
* Configure system.config.js
```javascript
var map = {
...
'angular2-color-picker': 'node_modules/angular2-color-picker'
};
var packages = {
...
'angular2-color-picker': {main:'index.js', defaultExtension: 'js'}
};
```
#Build
```bash
git clone https://github.com/Alberplz/angular2-color-picker.git
npm install
cd agular2-color-picker
npm run build
gulp copylib
```
#Options
Default option is the first item.
```html
[cpOutputFormat]="'hex', 'rgba', 'hsla'"
[cpPosition]="'right', 'left', 'top', 'bottom'"
[cpPositionOffset]="'0%'"
[cpPositionRelativeToArrow]="false, true"
[cpWidth]="'230px'"
[cpHeight]="'auto'"
[cpSaveClickOutside]="true, false"
[cpOKButton]="false, true"
[cpOKButtonClass]="''"
[cpOKButtonText]="'OK'"
[cpCancelButton]="false, true"
[cpCancelButtonClass]="''"
[cpCancelButtonText]="'Cancel'"
[cpFallbackColor]="'#fff'"
[cpPresetLabel]="'Preset colors'"
[cpPresetColors]="[]", e.g: "['#fff', '#000']"
[cpToggle] = "false, true"
[cpIgnoredElements]="[]"
[cpDialogDisplay]="'popup,' 'inline'"
[cpAlphaChannel]="'hex6', 'hex8', 'disabled'"
```
#Extra content
If you want to change precalculated images for color picker sliders, you can find a little script in this project:
https://github.com/Alberplz/angular-colorpicker-directive
#Tested in:
* Chrome
* Firefox
* Microsoft Edge
* Opera
* Safari
* Internet Explorer
#For previous version of Angular:
https://github.com/Alberplz/angular-colorpicker-directive