Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Bootstrap 4 Color Palette

GitHub license Maintenance GitHub release (latest by date) npm

bootstrap-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'
    });