Colorpicker

<sw-colorpicker>

ready
The color picker field allows you to select a custom color.

Usage

Loading...
<sw-colorpicker
     value="#6ed59f"
     colorOutput="auto"
     :alpha="true"
     :disabled="false"
     :colorLabels="true"
     zIndex="100">
</sw-colorpicker>

Component properties

Property name Type Default
value String
colorOutput String auto
alpha Boolean true
disabled Boolean false
colorLabels Boolean true
zIndex [ {}, { "value": null, "display": null } ]

Methods

Method name Parameters
componentBeforeDestroy No parameters
debounceEmitColorValue No parameters
outsideClick e
setOutsideClickEvent No parameters
removeOutsideClickEvent No parameters
toggleColorPicker No parameters
moveSelector event
setDragging event
removeDragging No parameters
setSingleRGBValue newColorValue type
setHslaValues hue saturation luminance alpha
splitRGBValues rgbString
splitHSLValues hslString
convertHSLtoRGB previousHue previousSaturation previousLuminance previousAlpha
convertHSLtoHEX previousHue previousSaturation previousLuminance previousAlpha
convertHSL mode color
convertRGBtoHSL previousRed previousGreen previousBlue
convertHEXtoHSL previousHex

Imports

  • ./sw-colorpicker.html.twig
  • ./sw-colorpicker.scss

Watcher

  • value
  • hslValue
  • visible

Mixins

  • sw-form-field

Twig blocks

  • sw_colorpicker_input_prefix
  • sw_colorpicker_input_field
  • sw_colorpicker_contextual_field
  • sw_colorpicker_selector
  • sw_colorpicker_selection
  • sw_colorpicker_hue_slider
  • sw_colorpicker_alpha_slider
  • sw_colorpicker_preview
  • sw_colorpicker_inputs_hex
  • sw_colorpicker_inputs_red
  • sw_colorpicker_inputs_green
  • sw_colorpicker_inputs_blue
  • sw_colorpicker_inputs_alpha
  • sw_colorpicker_inputs
  • sw_colorpicker_colorpicker
  • sw_colorpicker_popover
  • sw_colorpicker