Zf2-twb-bundle

Zend Framework 2 module for easy integration of Twitter Bootstrap

View project onGitHub

TwbBundle, v2.0 - Demonstration

This demonstration page shows how to render Twitter Boostrap elements. For each elements, you can see how to do it in "Source" tabs. These are supposed to be run into a view file.

Forms



Basic example


Example block-level help text here.

$oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-email',
    'attributes' => array(
        'type' => 'email',
        'placeholder' => 'Enter email',
        'id' => 'exampleInputEmail1'
    ),
    'options' => array('label' => 'Email address')
))->add(array(
    'name' => 'input-password',
    'attributes' => array(
        'type' => 'password',
        'placeholder' => 'Password',
        'id' => 'exampleInputPassword1'
    ),
    'options' => array('label' => 'Password',)
))->add(array(
    'name' => 'input-file',
    'attributes' => array(
        'type' => 'file',
        'id' => 'exampleInputFile'
    ),
    'options' => array(
        'label' => 'File input',
        'help-block' => 'Example block-level help text here.'
    )
))->add(array(
    'name' => 'input-checkbox',
    'type' => 'checkbox',
    'options' => array('label' => 'Check me out')
))->add(array(
    'name' => 'button-submit',
    'type' => 'button',
    'attributes' => array('type' => 'submit'),
    'options' => array('label' => 'Submit')
));

$this->form($oForm, null);
            

Inline form


                $oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-email',
    'attributes' => array(
        'type' => 'email',
        'placeholder' => 'Enter email',
        'id' => 'exampleInputEmail2'
    ),
    'options' => array('label' => 'Email address')
))->add(array(
    'name' => 'input-password',
    'attributes' => array(
        'type' => 'password',
        'placeholder' => 'Password',
        'id' => 'exampleInputPassword2'
    ),
    'options' => array('label' => 'Password')
))->add(array(
    'name' => 'input-checkbox',
    'type' => 'checkbox',
    'options' => array('label' => 'Remember me')
))->add(array(
    'name' => 'button-submit',
    'type' => 'button',
    'attributes' => array('type' => 'submit'),
    'options' => array('label' => 'Sign in')
));

$this->form($oForm, \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_INLINE);
            

Horizontal form


                $oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-email',
    'attributes' => array(
        'type' => 'email',
        'placeholder' => 'Enter email',
        'id' => 'inputEmail1'
    ),
    'options' => array(
    'label' => 'Email',
    'column-size' => 'sm-10',
    'label_attributes' => array('class' => 'col-sm-2')
  )
))->add(array(
    'name' => 'input-password',
    'attributes' => array(
        'type' => 'password',
        'placeholder' => 'Password',
        'id' => 'inputPassword1'
    ),
    'options' => array('label' => 'Password','column-size' => 'sm-10','label_attributes' => array('class' => 'col-sm-2'))
))->add(array(
    'name' => 'input-checkbox',
    'type' => 'checkbox',
    'options' => array('label' => 'Remember me','column-size' => 'sm-10 col-sm-offset-2')
))->add(array(
    'name' => 'button-submit',
    'type' => 'button',
    'attributes' => array('type' => 'submit'),
    'options' => array('label' => 'Sign in','column-size' => 'sm-10 col-sm-offset-2')
));

$this->form($oForm);
            

Supported form


                $oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-text',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => 'Text input',
    )
))->add(array(
    'name' => 'input-text-area',
    'type' => 'textarea',
    'attributes' => array(
        'row' => 3
    )
))->add(array(
    'name' => 'input-checkbox',
    'type' => 'checkbox',
    'options' => array('label' => 'Option one is this and that-be sure to include why it\'s great')
))->add(array(
    'name' => 'optionsRadios',
    'type' => 'radio',
    'options' => array(
        'value_options' => array(
            'option1' => 'Option one is this and that-be sure to include why it\'s great',
            'optionsRadios2' => 'Option two can be something else and selecting it will deselect option one'
        )
    )
))->add(array(
    'name' => 'optionsRadios',
    'type' => 'MultiCheckbox',
    'options' => array(
        'value_options' => array(
            array('label' => '1','value' => 'option1', 'attributes' => array('id' => 'inlineCheckbox1')),
            array('label' => '2','value' => 'option2', 'attributes' => array('id' => 'inlineCheckbox2')),
            array('label' => '3','value' => 'option3', 'attributes' => array('id' => 'inlineCheckbox3'))
        )
    )
))->add(array(
    'name' => 'optionsRadiosNoInline',
    'type' => 'MultiCheckbox',
    'options' => array(
        'value_options' => array(
            array('label' => '1','value' => 'option1', 'attributes' => array('id' => 'noInlineCheckbox1')),
            array('label' => '2','value' => 'option2', 'attributes' => array('id' => 'noInlineCheckbox2')),
            array('label' => '3','value' => 'option3', 'attributes' => array('id' => 'noInlineCheckbox3'))
        ),
        'inline' => false
    )
))->add(array(
    'name' => 'select',
    'type' => 'select',
    'options' => array('value_options' => array(1,2,3,4,5))
))->add(array(
    'name' => 'multiple-select',
    'type' => 'select',
    'options' => array('value_options' => array(1,2,3,4,5)),
    'attributes' => array('multiple' => true)
));

$this->form($oForm, null);
            

Static form

email@example.com

                $oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'static-element',
    'type' => '\TwbBundle\Form\Element\StaticElement',
    'attributes' => array('value' => 'email@example.com'),
    'options' => array('label' => 'Email','column-size' => 'lg-10','label_attributes' => array('class' => 'col-lg-2'))
))->add(array(
    'name' => 'input-password',
    'attributes' => array(
        'type' => 'password',
        'placeholder' => 'Password',
        'id' => 'inputPassword'
    ),
    'options' => array('label' => 'Password','column-size' => 'lg-10','label_attributes' => array('class' => 'col-lg-2'))
));

$this->form($oForm);
            

Form states


                $oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-text-disabled',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => 'Disabled input here...',
        'id' => 'disabledInput'
    )
));

$oFieldset = new \Zend\Form\Fieldset('fieldset-disabled');
$oForm->add($oFieldset->setAttributes(array('disabled' => true))->add(array(
    'name' => 'input-text-disabled',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => 'Disabled input',
        'id' => 'disabledTextInput'
    ),
    'options' => array('label' => 'Disabled input')
))->add(array(
    'name' => 'disabled-select',
    'type' => 'select',
    'options' => array(
        'label' => 'Disabled select menu',
        'value_options' => array('' => 'Disabled select')
    ),
    'attributes' => array('id' => 'disabled-select')
))->add(array(
    'name' => 'input-checkbox',
    'type' => 'checkbox',
    'options' => array('label' => 'Can\'t check this')
))->add(array(
    'name' => 'button-submit',
    'type' => 'button',
    'attributes' => array('type' => 'submit', 'class' => 'btn-primary'),
    'options' => array('label' => 'Submit')
)));
$this->form($oForm, null);
            

Validation states


                $oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-text-success',
    'attributes' => array(
        'type' => 'text',
        'id' => 'inputSuccess'
    ),
    'options' => array(
        'label' => 'Input with success',
        'validation-state' => 'success'
    )
))->add(array(
    'name' => 'input-text-warning',
    'attributes' => array(
        'type' => 'text',
        'id' => 'inputWarning'
    ),
    'options' => array(
        'label' => 'Input with warning',
        'validation-state' => 'warning'
    )
))->add(array(
    'name' => 'input-text-error',
    'attributes' => array(
        'type' => 'text',
        'id' => 'inputError'
    ),
    'options' => array(
        'label' => 'Input with error',
        'validation-state' => 'error'
    )
));
$this->form($oForm, null);
            

Control sizing


                //Height sizing
$oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-text-lg',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => '.input-lg',
        'class' => 'input-lg'
    )
))->add(array(
    'name' => 'input-text-default',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => 'Default input'
    )
))->add(array(
    'name' => 'input-text-sm',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => '.input-sm',
        'class' => 'input-sm'
    )
))->add(array(
    'name' => 'lg-select',
    'type' => 'select',
    'options' => array('value_options' => array('' => '.input-lg')),
    'attributes' => array('class' => 'input-lg')
))->add(array(
    'name' => 'default-select',
    'type' => 'select',
    'options' => array('value_options' => array('' => 'Default select'))
))->add(array(
    'name' => 'sm-select',
    'type' => 'select',
    'options' => array('value_options' => array('' => '.input-sm')),
    'attributes' => array('class' => 'input-sm')
));
$this->form($oForm, null);

//Column sizing
$oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-text-col-lg-2',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => '.col-lg-2'
    ),
    'options' => array('column-size' => 'lg-2')
))->add(array(
    'name' => 'input-text-col-lg-3',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => '.col-lg-3'
    ),
    'options' => array('column-size' => 'lg-3')
))->add(array(
    'name' => 'input-text-col-lg-4',
    'attributes' => array(
        'type' => 'text',
        'placeholder' => '.col-lg-4'
    ),
    'options' => array('column-size' => 'lg-4')
));
$this->form($oForm, \TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_INLINE);
            

Help text


A block of help text that breaks onto a new line and may extend beyond one line.

$oForm = new \Zend\Form\Form();
$oForm->add(array(
    'name' => 'input-text',
    'attributes' => array('type' => 'text'),
    'options' => array(
        'help-block' => 'A block of help text that breaks onto a new line and may extend beyond one line.'
    )
));
$this->form($oForm, null);

Buttons



Options


$oButton = new \Zend\Form\Element\Button('default',array('label' => 'Default'));
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('primary',array('label' => 'Primary'));
$oButton->setAttribute('class','btn-primary');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('success',array('label' => 'Success'));
$oButton->setAttribute('class','btn-success');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('info',array('label' => 'Info'));
$oButton->setAttribute('class','btn-info');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('warning',array('label' => 'Warning'));
$oButton->setAttribute('class','btn-warning');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('danger',array('label' => 'Danger'));
$oButton->setAttribute('class','btn-danger');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('link',array('label' => 'Link'));
$oButton->setAttribute('class','btn-link');
$this->formButton($oButton);


Sizes










//Large
$oButton = new \Zend\Form\Element\Button('large-button-primary',array('label' => 'Large button'));
$oButton->setAttribute('class','btn-primary btn-lg');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('large-button-default',array('label' => 'Large button'));
$oButton->setAttribute('class','btn-lg');
$this->formButton($oButton);

//Default
$oButton = new \Zend\Form\Element\Button('button-primary',array('label' => 'Default button'));
$oButton->setAttribute('class','btn-primary');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('button-default',array('label' => 'Default button'));
$this->formButton($oButton);

//Small
$oButton = new \Zend\Form\Element\Button('small-button-primary',array('label' => 'Small button'));
$oButton->setAttribute('class','btn-primary btn-sm');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('small-button-default',array('label' => 'Small button'));
$oButton->setAttribute('class','btn-sm');
$this->formButton($oButton);

//Extra small
$oButton = new \Zend\Form\Element\Button('extra-small-button-primary',array('label' => 'Extra small button'));
$oButton->setAttribute('class','btn-primary btn-xs');
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('extra-small-button-default',array('label' => 'Extra small button'));
$oButton->setAttribute('class','btn-xs');
$this->formButton($oButton);

//Block level
$oButton = new \Zend\Form\Element\Button('block-level-button-primary',array('label' => 'Block level button'));
$oButton->setAttribute('class','btn-primary btn-block');
$sContent .= $this->formButtonHelper->__invoke($oButton).PHP_EOL;

$oButton = new \Zend\Form\Element\Button('block-level-button-default',array('label' => 'Block level button'));
$oButton->setAttribute('class','btn-block');
$this->formButton($oButton);


Active state


$oButton = new \Zend\Form\Element\Button('large-button-primary-active',array('label' => 'Primary button'));
$oButton->setAttributes(array(
    'class' => 'btn-primary btn-lg active',
));
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('large-button-default-active',array('label' => 'Button'));
$oButton->setAttributes(array(
    'class' => 'btn-lg active',
));
$this->formButton($oButton);

Disabled state


$oButton = new \Zend\Form\Element\Button('large-button-primary-disabled',array('label' => 'Primary button'));
$oButton->setAttributes(array(
    'class' => 'btn-primary btn-lg',
    'disabled' => true
));
$this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('large-button-default-disabled',array('label' => 'Button'));
$oButton->setAttributes(array(
    'class' => 'btn-lg',
    'disabled' => true
));
$this->formButton($oButton);

Glyphicons



How to use


echo $this->glyphicon('search');

Examples



echo '<div class="btn-toolbar" role="toolbar"><div class="btn-group">';

//Align left
echo $this->formButton(new \Zend\Form\Element\Button('align-left',array('glyphicon' => 'align-left')));

//Align center
echo $this->formButton(new \Zend\Form\Element\Button('align-left',array('glyphicon' => 'align-center')));

//Align right
echo $this->formButton(new \Zend\Form\Element\Button('align-left',array('glyphicon' => 'align-right')));

echo '</div></div><br/><div class="btn-toolbar" role="toolbar">';

//Large
$oButton = new \Zend\Form\Element\Button('large-button-default',array('label' => 'Star', 'glyphicon' => 'star'));
$oButton->setAttribute('class','btn-lg');
echo $this->formButton($oButton);

//Default
$oButton = new \Zend\Form\Element\Button('button-default',array('label' => 'Star', 'glyphicon' => 'star'));
echo $this->formButton($oButton);

//Small
$oButton = new \Zend\Form\Element\Button('small-button-default',array('label' => 'Star', 'glyphicon' => 'star'));
$oButton->setAttribute('class','btn-sm');
echo $this->formButton($oButton);

//Extra small
$oButton = new \Zend\Form\Element\Button('extra-small-button-default',array('label' => 'Star', 'glyphicon' => 'star'));
$oButton->setAttribute('class','btn-xs');
echo $this->formButton($oButton);

echo '</div>';



Exemple


Alignment options


Headers


Disabled menu items


Button dropdowns



Single button dropdowns

$aDropDownOptions = array(
    'items' => array(
      'Action',
    'Another action',
    'Something else here',
    \TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,
    'Separated link'
  )
);

$oButton = new \Zend\Form\Element\Button('default',array('label' => 'Default','dropdown' => $aDropDownOptions));
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('primary',array('label' => 'Primary','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-primary');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('success',array('label' => 'Success','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-success');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('info',array('label' => 'Info','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-info');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('warning',array('label' => 'Warning','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-warning');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('danger',array('label' => 'Danger','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-danger');
echo $this->formButton($oButton);

Split button dropdowns

$aDropDownOptions = array(
  'split' => true,
  'items' => array(
    'Action',
    'Another action',
    'Something else here',
    \TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,
    'Separated link'
  )
);

$oButton = new \Zend\Form\Element\Button('default',array('label' => 'Default','dropdown' => $aDropDownOptions));
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('primary',array('label' => 'Primary','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-primary');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('success',array('label' => 'Success','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-success');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('info',array('label' => 'Info','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-info');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('warning',array('label' => 'Warning','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-warning');
echo $this->formButton($oButton);

$oButton = new \Zend\Form\Element\Button('danger',array('label' => 'Danger','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-danger');
echo $this->formButton($oButton);

Sizing

$aDropDownOptions = array(
  'items' => array(
    'Action',
    'Another action',
    'Something else here',
    \TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,
    'Separated link'
  )
);

//Large
$oButton = new \Zend\Form\Element\Button('large-button-default',array('label' => 'Large button','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-lg');
echo $this->formButton($oButton);

//Small
$oButton = new \Zend\Form\Element\Button('small-button-default',array('label' => 'Small button','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-sm');
echo $this->formButton($oButton);

//Extra small
$oButton = new \Zend\Form\Element\Button('extra-small-button-default',array('label' => 'Extra small button','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-xs');
echo $this->formButton($oButton);

Dropup variation

$aDropDownOptions = array(
  'dropup' => true,
  'split' => true,
  'items' => array(
    'Action',
    'Another action',
    'Something else here',
    \TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,
    'Separated link'
  )
);


$oButton = new \Zend\Form\Element\Button('default',array('label' => 'Dropup','dropdown' => $aDropDownOptions));
echo $this->formButton($oButton);

$aDropDownOptions['list_attributes'] = array('class' => 'pull-right');
$oButton = new \Zend\Form\Element\Button('primary',array('label' => 'Right dropup','dropdown' => $aDropDownOptions));
$oButton->setAttribute('class','btn-primary');
echo $this->formButton($oButton);


Input groups



Basic example


@

.00

$.00
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => '@'));
$oInput->setAttribute('placeholder','Username');
echo $this->formElement($oInput).'<br/>';

$oInput = new \Zend\Form\Element\Text('input-prepend',array('add-on-append' => '.00'));
echo $this->formElement($oInput).'<br/>';

$oInput = new \Zend\Form\Element\Text('input-append-prepend',array('add-on-prepend' => '$','add-on-append' => '.00'));
echo $this->formElement($oInput).'<br/>';

Sizing


@

@

@
//Large
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => '@'));
$oInput->setAttributes(array('placeholder' => 'Username', 'class' => 'input-lg'));
echo $this->formElement($oInput).'<br/>';

//Default
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => '@'));
$oInput->setAttribute('placeholder','Username');
echo $this->formElement($oInput).'<br/>';

//Small
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => '@'));
$oInput->setAttributes(array('placeholder' => 'Username', 'class' => 'input-sm'));
echo $this->formElement($oInput).'<br/>';

Checkboxes and radio addons


echo '<div class="row"><div class="col-lg-6">';
//Checkbox
$oInput = new \Zend\Form\Element\Text(
  'input-username',
  array('add-on-prepend' => new \Zend\Form\Element\Checkbox('checkbox'))
);
echo $this->formElement($oInput).'</div><div class="col-lg-6">';

//Radio
$oInput = new \Zend\Form\Element\Text(
  'input-username',
  array('add-on-prepend' => new \Zend\Form\Element\Radio('radio',array('value_options' => array(1 => ''))))
);
echo $this->formElement($oInput).'</div></div>';

Button addons



//Prepend
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => new \Zend\Form\Element\Button('prepend-button',array('label' => 'Go!'))));
echo $this->formElement($oInput).'<br/>';

//Append
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-append' => new \Zend\Form\Element\Button('append-button',array('label' => 'Go!'))));
echo $this->formElement($oInput);

Buttons with dropdowns

$aButtonOptions = array('label' => 'Action','dropdown' => array(
    'label' => 'Dropdown',
    'name' => 'dropdownMenu1',
    'attributes' => array('class' => 'clearfix'),
    'list_attributes' => array('aria-labelledby' => 'dropdownMenu1'),
    'items' => array('Action','Another action','Something else here',\TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,'Separated link')
));

echo '<div class="row"><div class="col-lg-6">';

//Prepend
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => new \Zend\Form\Element\Button('prepend-button',$aButtonOptions)));
echo $this->formElement($oInput).'</div><div class="col-lg-6">';

//Append
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-append' => new \Zend\Form\Element\Button('append-button',$aButtonOptions)));
echo $this->formElement($oInput).'</div></div>';

Segmented buttons

$aButtonOptions = array('label' => 'Action','dropdown' => array(
    'label' => 'Dropdown',
    'name' => 'dropdownMenu1',
    'split' => true,
    'attributes' => array('class' => 'clearfix'),
    'list_attributes' => array('aria-labelledby' => 'dropdownMenu1'),
    'items' => array('Action','Another action','Something else here',\TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,'Separated link')
));

echo '<div class="row"><div class="col-lg-6">';

//Prepend
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-prepend' => new \Zend\Form\Element\Button('prepend-button',$aButtonOptions)));
echo $this->formElement($oInput).'</div><div class="col-lg-6">';

//Append
$oInput = new \Zend\Form\Element\Text('input-username',array('add-on-append' => new \Zend\Form\Element\Button('append-button',$aButtonOptions)));
echo $this->formElement($oInput).'</div></div>';

Button groups



Basic example


echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('left', array('label' => 'Left')),
    new \Zend\Form\Element\Button('middle', array('label' => 'Middle')),
    new \Zend\Form\Element\Button('right', array('label' => 'Right')),
));

Button toolbar


echo '<div class="btn-toolbar" role="toolbar">';

//First group
echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('1', array('label' => '1')),
    new \Zend\Form\Element\Button('2', array('label' => '2')),
    new \Zend\Form\Element\Button('3', array('label' => '3')),
    new \Zend\Form\Element\Button('4', array('label' => '4')),
));

//Second group
echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('5', array('label' => '5')),
    new \Zend\Form\Element\Button('6', array('label' => '6')),
    new \Zend\Form\Element\Button('7', array('label' => '7')),
));

//Third group
echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('8', array('label' => '8')),
));

echo '</div>';

Sizing





//Large
echo '<div class="btn-toolbar" role="toolbar">' . $this->buttonGroup(array(
            new \Zend\Form\Element\Button('left', array('label' => 'Left')),
            new \Zend\Form\Element\Button('middle', array('label' => 'Middle')),
            new \Zend\Form\Element\Button('right', array('label' => 'Right')),
                ), array('attributes' => array('class' => 'btn-group-lg'))) . '</div><br/>';

//Normal
echo '<div class="btn-toolbar" role="toolbar">' . $this->buttonGroup(array(
            new \Zend\Form\Element\Button('left', array('label' => 'Left')),
            new \Zend\Form\Element\Button('middle', array('label' => 'Middle')),
            new \Zend\Form\Element\Button('right', array('label' => 'Right')),
        )) . '</div><br/>';

//Small
echo '<div class="btn-toolbar" role="toolbar">' . $this->buttonGroup(array(
            new \Zend\Form\Element\Button('left', array('label' => 'Left')),
            new \Zend\Form\Element\Button('middle', array('label' => 'Middle')),
            new \Zend\Form\Element\Button('right', array('label' => 'Right')),
                ), array('attributes' => array('class' => 'btn-group-sm'))) . '</div><br/>';

//Extra small
echo '<div class="btn-toolbar" role="toolbar">' . $this->buttonGroup(array(
            new \Zend\Form\Element\Button('left', array('label' => 'Left')),
            new \Zend\Form\Element\Button('middle', array('label' => 'Middle')),
            new \Zend\Form\Element\Button('right', array('label' => 'Right')),
                ), array('attributes' => array('class' => 'btn-group-xs'))) . '</div>';

Nesting

echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('1', array('label' => '1')),
    new \Zend\Form\Element\Button('2', array('label' => '2')),
    new \Zend\Form\Element\Button('dropdown', array('label' => 'Dropdown', 'dropdown' => array('items' => array('Dropdown link', 'Dropdown link'))))
));

Vertical variation

echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('button', array('label' => 'Button')),
    new \Zend\Form\Element\Button('button', array('label' => 'Button')),
    new \Zend\Form\Element\Button('dropdown', array('label' => 'Dropdown', 'dropdown' => array('items' => array('Dropdown link', 'Dropdown link')))),
    new \Zend\Form\Element\Button('button', array('label' => 'Button')),
    new \Zend\Form\Element\Button('button', array('label' => 'Button')),
    new \Zend\Form\Element\Button('dropdown', array('label' => 'Dropdown', 'dropdown' => array('items' => array('Dropdown link', 'Dropdown link')))),
    new \Zend\Form\Element\Button('dropdown', array('label' => 'Dropdown', 'dropdown' => array('items' => array('Dropdown link', 'Dropdown link')))),
    new \Zend\Form\Element\Button('dropdown', array('label' => 'Dropdown', 'dropdown' => array('items' => array('Dropdown link', 'Dropdown link')))),
), array('attributes' => array('class' => 'btn-group-vertical')));

Justified button groups


echo $this->buttonGroup(array(
    new \Zend\Form\Element\Button('left', array('label' => 'Left')),
    new \Zend\Form\Element\Button('middle', array('label' => 'Middle')),
    new \Zend\Form\Element\Button('right', array('label' => 'Right')),
), array('attributes' => array('class' => 'btn-group-justified')));