README

A helper library that includes methods for generating the HTML for labels, select fields, text fields, links, and tables.

Installation

With Composer

Add the following to your composer.json then run composer install

{
    "require": {
        "indatus/widgets": "dev-master"
    }
}

Register the service provider in app/config/app.php

    [...]
    'providers' => array(
        [...]
        'Illuminate\View\ViewServiceProvider',
        'Illuminate\Workbench\WorkbenchServiceProvider',
        'Indatus\Widgets\WidgetsServiceProvider'
    ),
    [...]

Widget Gallery

Table

Tables can be created from multi-dimentional arrays. The keys will serve as the titles to be displayed in the table header. Additional options may be passed in the options parameter to be applied to the table element.

Data in controller passed to the view.

    $data = [
        ['name' => 'Alex', 'occupation' => 'Engineer'],
        ['name' => 'Judy', 'occupation' => 'Analyst'],
        ['name' => 'Pam', 'occupation' => 'Coach']
    ];
    
    $options = ['class' => 'table'];

Using the table generator inside of the blade template.

    {{ Indatus\Widgets\Table::generate($data, $options) }}

The resulting HTML.

    <table class="table">
        <thead>
        <tr>
                        <td>Name</td>
                        <td>Occupation</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>Alex</td>
                        <td>Engineer</td>
                    </tr>
                <tr>
                        <td>Judy</td>
                        <td>Analyst</td>
                    </tr>
                <tr>
                        <td>Pam</td>
                        <td>Coach</td>
                    </tr>
            </tbody>
    </table>

Select

Data in controller passed to the view.

    $select = [
        'Red' => 1,
        'Orange' => 2,
        'Yellow' => 3,
        'Green' => 4,
        'Blue' => 5,
        'Indigio' => 6,
        'Violet' => 7
    ];
    
    $selected = 5; // Used to set what option will be selected.

Using the select generator inside of the blade template.

{{ Indatus\Widgets\Select::generate($select, $selected) }}

The resulting HTML

    <select>
            <option value="1">Red</option>
            <option value="2">Orange</option>
            <option value="3">Yellow</option>
            <option value="4">Green</option>
            <option value="5" selected="">Blue</option>
            <option value="6">Indigio</option>
            <option value="7">Violet</option>
    </select>

Label and Input

Using the label and input generator inside of the blade template.

    {{ Indatus\Widgets\Label::generate('Email', 'email', ['class' => 'loud']) }}
    {{ Indatus\Widgets\TextField::generate('email', null, ['class' => 'email']) }}
    {{ Indatus\Widgets\TextField::generate('name', 'Steve') }}

The resulting HTML

    <label for="email" class="loud">Email</label>
    <input type="text" name="email" id="email" class="email">
    <input type="text" name="name" id="name" value="Steve">

Link

Using the link generator inside of the blade template.

    {{ Indatus\Widgets\Link::generate('Google', 'http://google.com/', ['class' => 'outbound']) }}

The resulting HTML

    <a href="http://google.com/" class="outbound">Google</a>

Assets

To publish this package's assets to run the artisan publish command targeting this package.

    php artisan asset:publish indatus/widgets 

Then to include the assets use the following inside of your templates

    {{ Indatus\Widgets\Asset::scripts() }}
    {{ Indatus\Widgets\Asset::styles() }}

The resulting HTML

    <script src="http://application-hostname.com/packages/indatus/widgets/widgets.js"></script>
    <link rel="stylesheet" href="http://application-hostname.com/packages/indatus/widgets/widgets.css">