TwbBundle, 1.0

Zend Framework 2 module for easy integration of Twitter Bootstrap v2.3.2

This project is maintained by Neilime

TwbBundle, 1.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

Default style

LegendExample block-level help text here.

Search form

Inline form

Horizontal form

Prepended and appended inputs

@
.00

Combined

$.00

Buttons instead of text

Button dropdowns

Segmented dropdown groups

Appended search button

Form actions

Help text

Inline help text

Block help

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

Validation states

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!

Default style

$form = new \Zend\Form\Form();
				$fieldset = new \Zend\Form\Fieldset('legend');
				$form->add($fieldset->setLabel('Legend')->add(array(
				'name' => 'input-text',
				'attributes' => array(
				'placeholder' => 'Type something...'
				),
				'options' => array(
				'label' => 'Label name',
				'twb' => array(
				'help-block' => 'Example block-level help text here.'
				)
				)
				))
				->add(array(
				'name' => 'input-checkbox',
				'type' => 'checkbox',
				'options' => array(
				'label' => 'Check me out',
				'use_hidden_element' => false
				)
				))
				->add(array(
				'name' => 'button-submit',
				'type' => 'button',
				'attributes' => array(
				'type' => 'submit'
				),
				'options' => array(
				'label' => 'Submit'
				)
				)));
				echo $this->form($form,null);

Search form

$form = new \Zend\Form\Form();
				$form->add(array(
				'name' => 'input-text',
				'attributes' => array(
				'class' => 'search-query input-medium'
				)
				))
				->add(array(
				'name' => 'button-submit',
				'type' => 'button',
				'attributes' => array(
				'type' => 'submit'
				),
				'options' => array(
				'label' => 'Search'
				)
				));
				echo $this->form($form,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_SEARCH);

Inline form

$form = new \Zend\Form\Form();
				$form->add(array(
				'name' => 'input-text-email',
				'attributes' => array(
				'class' => 'input-small',
				'placeholder' => 'Email'
				)
				))
				->add(array(
				'name' => 'input-text-password',
				'attributes' => array(
				'class' => 'input-small',
				'placeholder' => 'Password'
				)
				))
				->add(array(
				'name' => 'input-checkbox',
				'type' => 'checkbox',
				'options' => array(
				'label' => 'Remember me',
				'use_hidden_element' => false
				)
				))
				->add(array(
				'name' => 'button-submit',
				'type' => 'button',
				'attributes' => array(
				'type' => 'submit'
				),
				'options' => array(
				'label' => 'Sign in'
				)
				));
				echo $this->form($form,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_INLINE);

Horizontal form

$form = new \Zend\Form\Form();
				$form->add(array(
				'name' => 'input-text-email',
				'attributes' => array(
				'class' => 'input-small',
				'placeholder' => 'Email'
				),
				'options' => array(
				'label' => 'Email'
				)
				))
				->add(array(
				'name' => 'input-text-password',
				'attributes' => array(
				'class' => 'input-small',
				'placeholder' => 'Password'
				),
				'options' => array(
				'label' => 'Password'
				)
				))
				->add(array(
				'name' => 'input-checkbox',
				'type' => 'checkbox',
				'options' => array(
				'label' => 'Remember me',
				'use_hidden_element' => false
				)
				))
				->add(array(
				'name' => 'button-submit',
				'type' => 'button',
				'attributes' => array(
				'type' => 'submit'
				),
				'options' => array(
				'label' => 'Sign in'
				)
				));
				echo $this->form($form);

Prepended and appended inputs

$elementPrepend = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'prepend' => '@'
				)
				));
				$elementAppend = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'append' => '.00'
				)
				));
				echo $this->formRow($elementPrepend);
				echo $this->formRow($elementAppend);

Combined

$element = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'prepend' => '$',
				'append' => '.00'
				)
				));
				echo $this->formRow($element);

Buttons instead of text

$elementOne = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'append' => array(
				'type' => 'buttons',
				'buttons' => array('go' => array('options' => array('label' => 'Go!')))
				)
				)
				));
				$elementTwo = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'append' => array(
				'type' => 'buttons',
				'buttons' => array(
				'search' => array('options' => array('label' => 'Search')),
				'options' => array('options' => array('label' => 'Options'))
				)
				)
				)
				));
				echo $this->formRow($elementOne);
				echo $this->formRow($elementTwo);

Button dropdowns

$elementPrepend = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'prepend' => array(
				'type' => 'buttons',
				'buttons' => array(
				'action' => array('options' => array(
				'label' => 'Action',
				'twb' => array('dropdown' => array(
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				))
				))
				)
				)
				)
				));
				$elementAppend = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'append' => array(
				'type' => 'buttons',
				'buttons' => array(
				'action' => array('options' => array(
				'label' => 'Action',
				'twb' => array('dropdown' => array(
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				))
				))
				)
				)
				)
				));
				$elementCombined = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'prepend' => array(
				'type' => 'buttons',
				'buttons' => array(
				'action' => array('options' => array(
				'label' => 'Action',
				'twb' => array('dropdown' => array(
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				))
				))
				)
				),
				'append' => array(
				'type' => 'buttons',
				'buttons' => array(
				'action' => array('options' => array(
				'label' => 'Action',
				'twb' => array('dropdown' => array(
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				))
				))
				)
				)
				)
				));
				echo $this->formRow($elementPrepend);
				echo $this->formRow($elementAppend);
				echo $this->formRow($elementCombined);

Segmented dropdown groups

$elementPrepend = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'prepend' => array(
				'type' => 'buttons',
				'buttons' => array(
				'action' => array('options' => array(
				'label' => 'Action',
				'twb' => array('dropdown' => array(
				'segmented' => true,
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				))
				))
				)
				)
				)
				));
				$elementAppend = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'append' => array(
				'type' => 'buttons',
				'buttons' => array(
				'action' => array('options' => array(
				'label' => 'Action',
				'twb' => array('dropdown' => array(
				'segmented' => true,
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				))
				))
				)
				)
				)
				));
				echo $this->formRow($elementPrepend);
				echo $this->formRow($elementAppend);

Appended search button

$form = new \Zend\Form\Form();
				$form->add(array(
				'name' => 'input-search-append',
				'attributes' => array(
				'class' => 'search-query input-medium'
				),
				'options' => array('twb' => array(
				'append' => array(
				'type' => 'buttons',
				'buttons' => array(
				'search-submit-append' => array('options' => array('label' => 'Search'),'attributes' => array('type' => 'submit'))
				)
				)
				))
				))->add(array(
				'name' => 'input-search-prepend',
				'attributes' => array(
				'class' => 'search-query input-medium'
				),
				'options' => array('twb' => array(
				'prepend' => array(
				'type' => 'buttons',
				'buttons' => array(
				'search-submit-prepend' => array('options' => array('label' => 'Search'),'attributes' => array('type' => 'submit'))
				)
				)
				))
				));
				echo $this->form($form,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_SEARCH);

Form actions

$form = new \Zend\Form\Form();
				$form->add(array(
				'name' => 'button-submit',
				'type' => 'button',
				'attributes' => array(
				'type' => 'submit',
				'class' => 'btn-primary'
				),
				'options' => array(
				'label' => 'Save changes',
				'twb' => array('formAction' => true)
				)
				))->add(array(
				'name' => 'button-cancel',
				'type' => 'button',
				'options' => array(
				'label' => 'Cancel',
				'twb' => array('formAction' => true)
				)
				));
				echo $this->form($form,null);

Help text

$element = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'help-inline' => 'Inline help text'
				)
				));
				echo $this->formRow($element);

Block help

$element = new \Zend\Form\Element('input-text',array(
				'placeholder' => 'Username',
				'twb' => array(
				'help-block' => 'A longer block of help text that breaks onto a new line and may extend beyond one line.'
				)
				));
				echo $this->formRow($element);

Validation states

$element = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'help-inline' => 'Something may have gone wrong',
				'state' => 'warning'
				),
				'label' => 'Input with warning'
				));
				echo $this->formRow($element,null,null,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL);

				$element = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'help-inline' => 'Please correct the error',
				'state' => 'error'
				),
				'label' => 'Input with error'
				));
				$this->formRow($element,null,null,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL);

				$element = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'help-inline' => 'Username is taken',
				'state' => 'info'
				),
				'label' => 'Input with info'
				));
				echo $this->formRow($element,null,null,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL);

				$element = new \Zend\Form\Element('input-text',array(
				'twb' => array(
				'help-inline' => 'Woohoo!',
				'state' => 'success'
				),
				'label' => 'Input with success'
				));
				echo $this->formRow($element,null,null,\TwbBundle\Form\View\Helper\TwbBundleForm::LAYOUT_HORIZONTAL);

Buttons

Default

Primary

Icon

Dropdown

Dropdown in a button group

Dropup menus

Default

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

Primary

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

Icon

$oButtonIcon = new \Zend\Form\Element\Button('button-icon',array(
				'label' => '',
				'twb' => array('icon' => 'icon-star')
				));
				$oButtonIconLabel = new \Zend\Form\Element\Button('button-icon-label',array(
				'label' => 'Star',
				'twb' => array('icon' => 'icon-star')
				));
				echo $this->formButton($oButtonIcon);
				echo $this->formButton($oButtonIconLabel);

Dropdown

$oButton = new \Zend\Form\Element\Button('dropdown',array(
				'label' => 'Action',
				'twb' => array(
				'dropdown' => array(
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				)
				)
				));
				$this->formButton($oButton);

Dropdown in a button group

$oButton = new \Zend\Form\Element\Button('button-icon-label-segmented-dropdown',array(
				'label' => 'User',
				'twb' => array(
				'icon' => 'icon-user icon-white',
				'dropdown' => array(
				'segmented' => true,
				'actions' => array(
				'edit' => array('label' => 'Edit', 'icon' => 'icon-pencil'),
				'delete' => array('label' => 'Belete', 'icon' => 'icon-trash'),
				'Ban' => array('label' => 'Ban', 'icon' => 'icon-ban-circle'),
				'-',
				'Make admin'
				)
				)
				)
				));
				$oButton->setAttribute('class','btn-primary');
				$this->formButton($oButton);

Dropup menus

$dropup = new \Zend\Form\Element\Button('segmented-dropup',array(
				'label' => 'Dropup',
				'twb' => array(
				'dropup' => array(
				'segmented' => true,
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				)
				)
				));
				$dropupRight = new \Zend\Form\Element\Button('segmented-right-dropup',array(
				'label' => 'Right dropup',
				'twb' => array(
				'dropup' => array(
				'segmented' => true,
				'pull' => 'right',
				'actions' => array('Action','Another action','Something else here','-','Separated link')
				)
				)
				));
				$this->formButton($dropup);
				$this->formButton($dropupRight);

Alerts

Default

Test message

Block

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Error or danger

Oh snap! Change a few things up and try submitting again.

Success

Well done! You successfully read this important alert message.

Information

Heads up! This alert needs your attention, but it's not super important.

Without close button

Test message

Default

echo $this->alert('Test message');

Block

echo $this->alert(
				'<h4>Warning!</h4><p>Best check yo self, you\'re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>',
				'block-alert'
				);

Error or danger

echo $this->alert(
				'<strong>Oh snap!</strong> Change a few things up and try submitting again.',
				'alert-error'
				);

Success

echo $this->alert(
				'<strong>Well done!</strong> You successfully read this important alert message.',
				'alert-success'
				);

Information

echo $this->alert(
				'<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.',
				'alert-info'
				);

Without close button

echo $this->alert('Test message',null,false);