README

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist kak/colorpicker "*"

This package contains 2 widgets InputColor, InputGradient

Input Color

Preview

Usage

Once the extension is installed, simply use it in your code by :

<?= $form->field($model, 'color')->widget(InputColor::class, [
   'clientOptions' => [], // js options lib pickr 
   'theme' => InputColor::THEME_MONOLITH,  // default theme
   'addonPreview' => true, // displays a preview of the color next to the {input}
   // 'addonPreview' => false, // displays the {input} preview in the background and inverts the text color
]); ?>

clientOptions see js lib https://github.com/Simonwep/pickr#options

Input Gradient

Preview

Usage

Once the extension is installed, simply use it in your code by :

<?= $form->field($model, 'color_gradient')->widget(InputGradient::class, [
   'clientOptions' => [], // js options lib pickr 
   'theme' => InputColor::THEME_MONOLITH,  // default theme
   'createLabel' => '', // btn create point label
   'createOptions' => [], // btn create point options

]); ?>

clientOptions see js lib https://github.com/Simonwep/pickr#options

JS Events

• gradient:change (colors)
  • format argument event

  [{
      color: 'hex|rbg',
      stop: '13'
  }]