Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsjavi/bootstrap-colorpicker
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
https://github.com/itsjavi/bootstrap-colorpicker
bootstrap bootstrap-colorpicker bootstrap-components bootstrap-plugin bootstrap3 bootstrap4 color color-picker colorpicker jquery twitter-bootstrap
Last synced: 4 months ago
JSON representation
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
- Host: GitHub
- URL: https://github.com/itsjavi/bootstrap-colorpicker
- Owner: itsjavi
- License: mit
- Archived: true
- Created: 2012-06-01T10:30:19.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2022-04-07T23:45:47.000Z (almost 3 years ago)
- Last Synced: 2024-08-01T02:11:14.087Z (5 months ago)
- Topics: bootstrap, bootstrap-colorpicker, bootstrap-components, bootstrap-plugin, bootstrap3, bootstrap4, color, color-picker, colorpicker, jquery, twitter-bootstrap
- Language: JavaScript
- Homepage: https://itsjavi.com/bootstrap-colorpicker/
- Size: 4.85 MB
- Stars: 1,379
- Watchers: 63
- Forks: 372
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - itsjavi/bootstrap-colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap. (JavaScript)
README
# Bootstrap Colorpicker
[Bootstrap Colorpicker](https://github.com/itsjavi/bootstrap-colorpicker/) is a modular color picker plugin for Bootstrap 4.
[![Build Status](https://img.shields.io/travis/itsjavi/bootstrap-colorpicker/master.svg?style=flat-square)](https://travis-ci.org/itsjavi/bootstrap-colorpicker)
[![npm](https://img.shields.io/npm/v/bootstrap-colorpicker.svg?style=flat-square)](https://www.npmjs.com/package/bootstrap-colorpicker)> THIS PROJECT IS NOT MAINTAINED ANYMORE.
> After almost 10 years, it won't receive any further update. I recommend you using more modern solutions like [React Color](https://casesandberg.github.io/react-color/). You are still free to adapt this project and create forks and variants of it.## Install
You can get the latest version in many different ways:- Downloading the tarball from npm the registry: https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz (you can change the version in the url to any released tag)
- Cloning using Git: `git clone https://github.com/itsjavi/bootstrap-colorpicker.git`
- Installing via NPM: `npm install bootstrap-colorpicker`
- Installing via Yarn: `yarn add bootstrap-colorpicker`
- Installing via Composer: `composer require itsjavi/bootstrap-colorpicker`Note that the `dist` files are only distributed via the NPM and Yarn installations.
For the rest methods, you will need to generate the files initializing the project with `yarn install`
and then building the code using `npm run build`.## Versions
Colorpicker version
Compatible Bootstrap version
Dependencies
v2.x
Documentation
Bootstrap 3 or 4
- jQuery >= 1.10
- Bootstrap CSS (input addon)
v3.x
Documentation
Bootstrap 4 or without Bootstrap
- jQuery >= 2.1.0
- Bootstrap CSS (input addon, popover)
- Bootstrap JS Bundle (popover)
Note that the plugin may work without Bootstrap if your code is not using any of the mentioned Bootstrap
dependencies.
## Examples
### With Bootstrap
The Bootstrap JS dependency is optional and it is mainly needed for the popover support.
No Bootstrap CSS is required for the plugin to work.
```html
Bootstrap Colorpicker Demo (with Bootstrap)
$(function () {
// Basic instantiation:
$('#demo-input').colorpicker();
// Example using an event, to change the color of the #demo div background:
$('#demo-input').on('colorpickerChange', function(event) {
$('#demo').css('background-color', event.color.toString());
});
});
```
### Without Bootstrap
To use the plugin without Bootstrap, the `popover` option should be set to `false` or `null` and, depending on your implementation,
you will usually need to set inline to `true` and a `container` selector option.
```html
Bootstrap Colorpicker Demo (without Bootstrap)
$(function() {
$('#demo').colorpicker({
popover: false,
inline: true,
container: '#demo'
});
});
```
## Contributions
* [Issues](https://github.com/itsjavi/bootstrap-colorpicker/issues)
* [Pull Requests](https://github.com/itsjavi/bootstrap-colorpicker/pulls)
* [Milestones](https://github.com/itsjavi/bootstrap-colorpicker/milestones)
This project exists thanks to all the [people who contribute](https://github.com/itsjavi/bootstrap-colorpicker/graphs/contributors).
Please read [CONTRIBUTING](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/.github/CONTRIBUTING.md)
before sending a pull request or issue.
## License
The MIT License (MIT).
Please see the [License File](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/LICENSE) for more information.
## Credits
Written and maintained by [Javi Aguilar](https://itsjavi.com) and all other contributors.
*Based on Stefan Petre's color picker (2013).*
*Thanks to JetBrains for supporting this project.*