bootstrap-color-palette

Bootstrap 4 Color Palette

BCP is a simple color palette for Bootstrap 4, like in Google doc, built on the top of Bootstrap 4 Popover plugin.

Documentation

Full documentation and examples are available at https://packages.bgaze.fr/bootstrap-color-palette

Quick start

BCP requires jQuery v1.9.1+, Bootstrap 4 popover component, and Bootstrap's CSS.

Just make sure to import required dependencies, then library's core files. If you don't include the optional default palette, you'll need to define your own to make the plugin work.

Several installation methods are available:

With npm or yarn:

npm i bootstrap-color-palette
yarn add bootstrap-color-palette

Then require the plugin and a palette:

require('bootstrap-color-palette/dist/bcp');
require('bootstrap-color-palette/dist/bcp.en');

Via CDN:

Core script: https://cdn.jsdelivr.net/gh/bgaze/bootstrap-color-palette@1/dist/bcp.min.js
Core CSS: https://cdn.jsdelivr.net/gh/bgaze/bootstrap-color-palette@1/dist/bcp.min.css
Default palette (english): https://cdn.jsdelivr.net/gh/bgaze/bootstrap-color-palette@1/dist/bcp.en.min.js
Default palette (french): https://cdn.jsdelivr.net/gh/bgaze/bootstrap-color-palette@1/dist/bcp.fr.min.js

Usage:

• Use data-color attribute via Javascript or HTML to define component initial color.
• Use pcb.refresh event to manage impact on your application appearance.
• Use pcb.selected event to define your callback on color change.
• Use bcp jQuery plugin to instantiate your component(s).
• The color method allows to set/get programmatically a component color.

$('[data-toggle="bcp"]')
    .attr('data-color', '#000')
    .on('pcb.refresh', function () {
        let color = $(this).bcp('color');

        if (color) {
            $(this)
                .text(color.label)
                .css({
                    backgroundColor: color.value,
                    color: color.dark ? '#fff' : '#000'
                });
        }
    })
    .on('pcb.selected', function () {
        $.post('my/endpoint/url', {data: $(this).bcp('color')});
    })
    .bcp({
        placement: 'right'
    });