Colorpicker

<sw-colorpicker>

ready
Color picker input field.

Usage

Loading...
<sw-colorpicker label="Color picker" value="#dd4800"></sw-colorpicker>

Component properties

Property name Type Default
value String
alpha Boolean false
editorFormat String hex
colorCallback String hex
disabled Boolean false

Methods

Method name Parameters
mountedComponent No parameters
destroyedComponent No parameters
colorWatcher No parameters
setColor value
onOpen No parameters
onInput event
onChange value
onClose value

Imports

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

Watcher

  • value
  • color
  • disabled

Mixins

  • sw-form-field

SASS variables

Variable name Value
$sw-colorpicker-color-border $color-steam-cloud ($color-gray-300)
$sw-colorpicker-color-focus $color-shopware-blue ($color-shopware-brand-500)
$sw-colorpicker-color-text $color-gutenberg ($color-darkgray-200)
$sw-colorpicker-color-background $color-white (#FFF)
$sw-colorpicker-transition border-color 0.3s ease-out
$sw-colorpicker-border-radius $border-radius-default (4px)
$sw-colorpicker-color-placeholder lighten($sw-colorpicker-color-text, 25%)
$sw-colorpicker-color-label $color-kashmir ($color-darkgray-200)
$sw-colorpicker-color-error $color-crimson ($color-crimson-500)
$sw-colorpicker-font-family $font-family-default ('Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif)
$sw-colorpicker-font-size 14px

Twig blocks

  • sw_colorpicker