Control: Colorpicker - 10quality/wpmvc-addon-metaboxer GitHub Wiki

Control used as a field type to display a Colorpicker.

Usage

class Post extends Model
{
    // Class properties and methods...

    protected function init()
    {
        $this->metaboxes = [
            'metabox_id' => [
                'tabs' => [
                    'tab_id' => [
                        'fields' => [

                            'field_id' => [
                                'type' => 'colorpicker',
                                'title' => __( 'Color picker', 'my-domain' ),
                                'description' => __( 'Color picker using selenium.' ),
                            ],

                            'cp_alpha' => [
                                'type' => 'colorpicker',
                                'title' => __( 'With alpha', 'my-domain' ),
                                'description' => __( 'Color picker using alpha.' ),
                                'control' => [
                                    'attributes' => [
                                        'data-show-alpha' => 1,
                                        'data-format' => 'rgb',
                                    ],
                                ],
                            ],

                            // Other fields...
                        ],
                    ],
                ],
            ],
        ];
    }
}

Control options

Control Data type Description
attributes array HTML attributes listed as an array. JS colorpicker options can be set as a data attribute.

Supported HTML attributes

Attribute Data type Description
data-show-input int Shows input field. See spectrum documentation showInput. Default: 1
data-allow-empty int Allow transparent. See spectrum documentation allowEmpty. Default: 0
data-show-alpha int Show Alpha range picker. See spectrum documentation showAlpha. Default: 0
data-format string Output format. See spectrum documentation preferredFormat. Default: hex
data-flat int Show flat squared input. See spectrum documentation flat. Default: 0
data-container-class string See spectrum documentation containerClassName. Default: 1