angular-schema-form-colorpicker

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #golang #android #machine-learning #linux #docker #java #awesome #kubernetes #awesome-list #pytorch #open-source

angular-schema-form-colorpicker

(★ 11)

Colorpicker add-on for Angular Schema Form using spectrum colorpicker.

angular-schema-form-colorpicker 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Colorpicker addon
=================

Colorpickers for everyone! This colorpicker addon uses the widely used jQuery-based plugin, [Spectrum](https://github.com/bgrins/spectrum) as well as Jimdo's excellent angular binder [angular-spectrum-colorpicker](https://github.com/Jimdo/angular-spectrum-colorpicker).

Spectrum support a wide variety of formats, such as hex, rgb(a), hsv(a), names and so forth, default is rgb. You can specify this as `colorFormat` in the form. More info below at [Form Type options](#form-type-options).

Installation
------------
The date picker is an add-on to the Bootstrap decorator. To use it, just include
`dist/bootstrap-colorpicker.min.js` *after* `dist/bootstrap-decorator.min.js`.

Easiest way is to install is with bower, this will also include dependencies:
```bash
$ bower install angular-schema-form-colorpicker
```

You'll need to load a few additional files to use colorpicker:

**Be sure to load this projects files after you load angular schema form**

1. jQuery
2. Angular
3. The Spectrum source files (see the
   [GitHub page](https://github.com/amsul/pickadate.js) for documentation)
4. The Spectrum-angular source files (see the
   [GitHub page](https://github.com/Jimdo/angular-spectrum-colorpicker) for documentation)
5. The spectrum CSS
6. Translation files for whatever language you want to use (optional)
7. **Angular Schema Form**
8. The Angular Schema Form Colorpicker files (this project)

Example

```HTML
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/bower_components/spectrum/spectrum.js"></script>
<script type="text/javascript" src="/bower_components/angular-spectrum-colorpicker/dist/angular-spectrum-colorpicker.min.js"></script>

Usage
-----
The colorpicker add-on adds a new form type, `colorpicker`, and a new default
mapping.

|  Form Type     |   Becomes    |
|:---------------|:------------:|
|  colorpicker    |  a colorpicker widget |

| Schema             |   Default Form type  |
|:-------------------|:------------:|
| "type": "string" and "format": "color"   |   colorpicker   |

Form Type Options
-------
The `colorpicker` form type takes two options: `colorFormat` and `spectrumOptions`.

### `colorFormat`
and `preferredFormat` in `spectrumOptions` supports the following values at this time:

- hex
- hex3 (3 characters if possible)
- hsl
- rgb
- name (Falls back to hex)
- none (Depends on input)

More info at http://bgrins.github.io/spectrum/#options-preferredFormat

### `spectrumOptions`
Spectrum supports a large amount of options that tweak a lot of the interface and behaviour. This addon uses a few standard options but these can be overwritten via the form key by the same name.
There are too many options to list here but they can all be found in the [spectrum documentation](http://bgrins.github.io/spectrum/#options).

### Examples

Here's an example:

```javascript
{
  key: "color",
  colorFormat: 'hsv',
  spectrumOptions: {
    preferredFormat: 'hex3',
    showAlpha: false,
    palette: [['black', 'white'], ['red', 'green']]
  }
}
```

angular-schema-form-colorpicker

angular-schema-form-colorpicker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

angular-schema-form-colorpicker

angular-schema-form-colorpicker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README