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

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

Usage

// Namespace and use statement...

class Settings extends Model
{
    // Class properties...

    protected function init()
    {
        // Other properties...

        $this->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.