options

module:options

Colorpicker default options

Source:

Members

(static) addon :String

Child CSS selector for the colorpicker addon. If it exists, the child element background will be changed on color change.

Default Value:
  • '.colorpicker-trigger, .colorpicker-input-addon'
Source:
Type:
  • String

(static) autoHexInputFallback :boolean

If true, valid HEX3 colors will be converted to HEX6, even with autoInputFallback set to false if false, HEX3 colors will not be converted to HEX6, when autoInputFallback is false (this has been an issue, when using HEX6 colors with autoInputFallback set to false, HEX3 colors were automatically converting to HEX6)

Default Value:
  • false
Source:
Type:
  • boolean

(static) autoInputFallback :boolean

If true, the input content will be replaced always with a valid color, if false, the invalid color will be left in the input, while the internal color object will still resolve into a valid one.

Default Value:
  • true
Source:
Type:
  • boolean

(static) color :String|ColorItem|boolean

Sets a initial color, ignoring the one from the element/input value or the data-color attribute.

Default Value:
  • false
Source:
Type:

(static) container :String|boolean

Container where the colorpicker is appended to in the DOM.

If is a string (CSS selector), the colorpicker will be placed inside this container. If true, the .colorpicker-element element itself will be used as the container. If false, the document body is used as the container, unless it is a popover (in this case it is appended to the popover body instead).

Default Value:
  • false
Source:
Type:
  • String | boolean

(static) customClass :String|null

Custom class to be added to the .colorpicker-element element

Default Value:
  • null
Source:
Type:
  • String | null

(static) debug :boolean

If true, loads the 'debugger' extension automatically, which logs the events in the console

Default Value:
  • false
Source:
Type:
  • boolean

(static) extensions :Array.<Object>

Associative object with the extension class name and its config. Colorpicker comes with many bundled extensions: debugger, palette, preview and swatches (a superset of palette).

Source:
Type:
  • Array.<Object>
Example
extensions: [
    {
      name: 'swatches'
      options: {
        colors: {
          'primary': '#337ab7',
          'success': '#5cb85c',
          'info': '#5bc0de',
          'warning': '#f0ad4e',
          'danger': '#d9534f'
        },
        namesAsValues: true
      }
    }
  ]

(static) fallbackColor :String|ColorItem|boolean

Fallback color to use when the given color is invalid. If false, the latest valid color will be used as a fallback.

Default Value:
  • false
Source:
Type:

(static) format :'rgb'|'hex'|'hsl'|'auto'|null

Forces an specific color format. If 'auto', it will be automatically detected the first time only, but if null it will be always recalculated.

Note that the ending 'a' of the format meaning "alpha" has currently no effect, meaning that rgb is the same as rgba excepting if the alpha channel is disabled (see useAlpha).

Default Value:
  • 'auto'
Source:
Type:
  • 'rgb' | 'hex' | 'hsl' | 'auto' | null

(static) horizontal :boolean

Horizontal mode layout.

If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.

Default Value:
  • false
Source:
Type:
  • boolean

(static) inline :boolean

Forces to show the colorpicker as an inline element.

Note that if there is no container specified, the inline element will be added to the body, so you may want to set the container option.

Default Value:
  • false
Source:
Type:
  • boolean

(static) input :String

Child CSS selector for the colorpicker input.

Default Value:
  • 'input'
Source:
Type:
  • String

(static) popover :boolean

Bootstrap Popover options. The trigger, content and html options are always ignored.

Default Value:
  • Object
Source:
Type:
  • boolean

(static) sliders :Object

Vertical sliders configuration

Source:
Type:
  • Object

(static) slidersHorz :Object

Horizontal sliders configuration

Source:
Type:
  • Object

(static) template :String

Colorpicker widget template

Source:
Type:
  • String
Example
<!-- This is the default template: -->
<div class="colorpicker">
  <div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>
  <div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>
  <div class="colorpicker-alpha">
    <div class="colorpicker-alpha-color"></div>
    <i class="colorpicker-guide"></i>
  </div>
</div>

(static) useAlpha :boolean

If true, the alpha channel bar will be displayed no matter what.

If false, it will be always hidden and alpha channel will be disabled also programmatically, meaning that the selected or typed color will be always opaque.

If null, the alpha channel will be automatically disabled/enabled depending if the initial color format supports alpha or not.

Default Value:
  • true
Source:
Type:
  • boolean

(static) useHashPrefix :boolean

If true a hash will be prepended to hexadecimal colors. If false, the hash will be removed. This only affects the input values in hexadecimal format.

Default Value:
  • true
Source:
Type:
  • boolean