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:
-
String
|ColorItem
|boolean
(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:
-
String
|ColorItem
|boolean
(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) 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