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

Control used as a field type to display a choose input, based on <input[type="radio"]>.

Usage

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

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

                            'align' => [
                                'type' => 'choose',
                                'title' => __( 'Alignment' ),
                                'description' => __( 'Choose based on Font-Awesome v4.' ),
                                'options' => [
                                    'left' => 'fa-align-left',
                                    'center' => 'fa-align-center',
                                    'right' => 'fa-align-right',
                                ],
                                'control' => [
                                    'attributes' => [
                                        'style' => 'font-size:18px;',
                                    ]
                                ],
                            ],

                            'lock' => [
                                'type' => 'choose',
                                'title' => __( 'Lock' ),
                                'description' => __( 'Choose based on Dashicons.' ),
                                'options' => [
                                    'lock' => 'dashicons-lock',
                                    'unlock' => 'dashicons-unlock',
                                ],
                            ],

                            'layout' => [
                                'type' => 'choose',
                                'title' => __( 'Layout' ),
                                'description' => __( 'Choose based on custom images.' ),
                                'options' => [
                                    'left'  => [
                                        'title' => __( 'With left sidebar' ),
                                       'value' => assets_url( 'img/layout-left.png', __DIR__ )
                                    ],
                                    'center'  => [
                                        'title' => __( 'Without sidebar' ),
                                        'value' => assets_url( 'img/layout-center.png', __DIR__ )
                                    ],
                                    'right'  => [
                                        'title' => __( 'With right sidebar' ),
                                        'value' => assets_url( 'img/layout-right.png', __DIR__ )
                                    ],
                                ],
                                'control' => [
                                    'background' => '#ababab',
                                ],
                            ],

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

Option alternatives

Option	Description
Image	Any URL passed by as option will be displayed as an image.
Dashicon	A Dashicon icon string.
Font Awesome	A Font Awesome version 4 icon string.
Text	A text string.

You can opt to add a hover (mouse over) hint to an option by making defining its values as an array, like this:

'options' => [
    'left'  => [
        'title' => __( 'With left sidebar' ),
        'value' => assets_url( 'img/layout-left.png', __DIR__ )
    ],
    'center'  => [
        'title' => __( 'Without sidebar' ),
        'value' => assets_url( 'img/layout-center.png', __DIR__ )
    ],
    'right'  => [
        'title' => __( 'With right sidebar' ),
        'value' => assets_url( 'img/layout-right.png', __DIR__ )
    ],
]

Control options

Control	Data type	Description
background	string	Background CSS color for the choose container.
attributes	array	HTML attributes listed as an array.