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
$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
$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
$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>';
Dropdowns
Exemple
$aDropDownOptions = 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'
)
);
$this->dropDown($aDropDownOptions);
Alignment options
$aDropDownOptions = array(
'label' => 'Dropdown',
'name' => 'dropdownMenu1',
'attributes' => array('class' => 'clearfix'),
'list_attributes' => array('aria-labelledby' => 'dropdownMenu1','class' => 'pull-right'),
'items' => array(
'Action',
'Another action',
'Something else here',
\TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,
'Separated link'
)
);
$this->dropDown($aDropDownOptions);
Headers
$aDropDownOptions = array(
'label' => 'Dropdown',
'name' => 'dropdownMenu1',
'attributes' => array('class' => 'clearfix'),
'list_attributes' => array('aria-labelledby' => 'dropdownMenu1'),
'items' => array(
array(
'type' => \TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_HEADER,
'label' => 'Dropdown header'
),
'Action','Another action','Something else here',
\TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_DIVIDER,
array(
'type' => \TwbBundle\View\Helper\TwbBundleDropDown::TYPE_ITEM_HEADER,
'label' => 'Dropdown header'
),
'Separated link'
)
);
$this->dropDown($aDropDownOptions);
Disabled menu items
$aDropDownOptions = array(
'label' => 'Dropdown',
'name' => 'dropdownMenu1',
'attributes' => array('class' => 'clearfix'),
'list_attributes' => array('aria-labelledby' => 'dropdownMenu1'),
'items' => array(
'Regular link',
'Disabled link' => array('attributes' => array('class' => 'disabled')),
'Another link'
)
);
$this->dropDown($aDropDownOptions);
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')));