We came across an interesting plugin created by Mattias Larentis: Bootstrap Switch. As it is a plugin that obviously comes into the bootstrap family, we have create a widget to include it in our library.

Note The widget can be also used as a form element (see form section).

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbSwitch',
    array(
        'name' => 'testToggleButton',
        'events' => array(
            'switchChange' => 'js:function($el, status, e){console.log($el, status, e);}'
        )
    )
);

Here's all configuration properties which you can set for TbEditableView widget.

Custom styling

$this->widget(
    'booster.widgets.TbSwitch',
    array(
        'name' => 'testToggleButtonB',
        'options' => array(
            'size' => 'large', //null, 'mini', 'small', 'normal', 'large
            'onColor' => 'success', // 'primary', 'info', 'success', 'warning', 'danger', 'default'
            'offColor' => 'danger',  // 'primary', 'info', 'success', 'warning', 'danger', 'default'
        ),
    )
);