Download the PHP package zooxsmart/los-ui without Composer

LosUI

Introduction

This module provides a shortcut to several UI resources from Bootstrap.

In the version 2.*, this library provides only method for styling your HTML with bootstrap. The previous method (providing the js and css files) had a serious performance issue, because if hooked on the end of the request (404 error) to return the required files.

Requirements

Please see composer.json

Installation

For composer documentation, please refer to getcomposer.org.

1. Enter your project directory
2. Run php composer.phar require los/losui

Usage

This module provides two main View Helpers: LosHeadLink and LosHeadScript.

Jquery

The first argument indicates the use of minified version (default) or not, while the second indicates a specific version of a CDN file.

Just add the following to your layout.phtml file:

It will generate the following html:

You can have just the link, for example to pass it to other ViewHelper like HeadLink (from zendframework)

It will generate only the link:

Font Awesome

The first argument indicates the use of minified version (default) or not, while the second indicates a specific version.

Include the stylesheet with:

It will generate the following html:

To use their icon is simple, just use the LosIcon View Helper:

Will generate:

You can pass a second parameter to add any style:

Will generate:

If you need to add a class, pass it along with the icon:

Will generate:

Bootstrap

The first argument indicates the use of minified version (default) or not, while the second indicates a specific version.

Include the stylesheet with (can use append or prepend)

The first call will generate the following html:

For each section bellow, please refer to the bootstrap documentation for the classes specifications.

Forms

This module provides a Form View Helper that automatically adds bootstrap style to forms. Just use the default form but with the new view helper:

To make the form horizontal, just pass true in the second argument, and the number of columns the label will use (default is 2):

In the horizontal form, buttons and checkboxes will be aligned with the other fields, not using the label column. To better style checkboxes and radios, add the following to your stylesheet:

There is a LosFormRow view helper that prints just a row. It will add all necessary classes, including alerts for form errors.

If you need to change the order of the form elements, you can do (example for horizontal form with 4 columns for labels):

You can add bootstrap addons to form inputs. Just add the keys "addon-append" or "addon-prepend" to the input options and can combine them with icons (both glyphicon and fontawesome):

The same for annotations:

Alert

The default alert uses the warning style without the close icon (X). But you can use any alert:

If you want the dismissible alert just call:

Badge

Button

Icons

To use their icon is simple, just use the LosIcon View Helper:

Will generate:

You can pass a second parameter to add any style:

Will generate:

If you need to add a class, pass it along with the icon:

Will generate:

Image

As default, the image receives a img-responsive class. To remove it, call:

Label

The first call, will use the "default" style.

Navigation

For now, there is two Navigation View Helpers: Breadcrumbs and Menu.

The menu helper will use the "navbar" style form bootstrap, using the first level as navbar links and submenus as dropdown as in Bootstrap Navbar.

There is a new Page type that enable you to add a divider to the menu helper:

The breadcrumbs helper will follow Breadcrumbs.

If you define a page of type URI with just a '#' href, the breadcrumbs will print just it's label and not a link. Very useful if you have a category not linked to a route.

Paginator

You can use the Paginator View Helper to style as Default Paginator or Pager.

The default helper will use the 'Sliding' scroll system, and the 'default paginator' from bootstrap. To change this behavior, just use the second argument to the scroll system, null as the third (will use this lib view file).

The following options are available in the fourth parameter:

• 'type': 'pager'. If specified as pager, will use the Pager. If omited, will use the Default Paginator.
• 'aligned': true (default) or false. Will use the aligned version of the pager.
• 'size': 'sm' or 'lg'. Use the small or large, respectively.
• 'nextLabel': the label for the 'Next' buttton. Can be combined with glyphicon or FontAwesome.
• 'previousLabel': the same as nextLabel, but for the 'Previous' button.

Well