Most of us make good use of CSS frameworks these days, whether they be Bootstrap, Foundation, UI Kit etc… I’ll confess, in the past I’ve found myself duplicating the mark-up for the same component, purely because the location has changed within the design, and I don’t have time to refactor the layouts with a new template section or something.

So, what I’ve been doing recently is breaking down all the components from a design into reusable sections, such as: buttons, panels, models, alert, banner, text block or anything that can be used over and over again. These sections, within the Blade template engine, are called components.

This will make it easier, if you need to make a change to attributes or classes, to quickly rollout the change(s) by updating a single file, instead of spending hours working from a project search making small refactors and taking up hours of your day.

I’ll demonstrate what I mean by looking at creating two components, a panel and a button.

First, create a file for the button markup `resource/views/button/default.blade.php`. I’ve opted for a directory of buttons, because there will ALWAYS be that one exception, which can live in the same location as your default but under a different name, say `icon.blade.php`.

In our button.default file, add the markup for your button.

    <a class="button" href="#">Link</a>

Ah, now we can see that we have some properties we need to pass through, but we will come back to this in a minute. In our master.blade.php template you can include the button simply but using the component method from the Blade engine.

    @component("button.default") @endcomponent
    @component("button.default") @endcomponent

    // This will output
    <a class="button" href="#">Link</a> <a class="button" href="#">Link</a>

Now, let’s address the issue of the parameters. When we add the component to the template, we can pass additional values to get rendered. We can achieve this in two ways, or both if you’re feeling brave.

Type 1: Component slots

    @component("button.default")
        @slot("link") http://google.com @endslot
        @slot("text") Button Text @endslot
    @endcomponent

or Type 2: Component parameters

    @component("button.default",["link"=>"http://google.com","text"=>"Button Text"]) @endcomponent 

Personally, I prefer to mix. Or, at the very least, I’d rather pass the main text/HTML, or bulk of the content as a slot, and the parameters for any options we need. Like:

    @component("button.default", ["link" => "http://google.com"]) Button Text @endcomponent

We can access the slots and parameters both in the same manner.

    <a class="button" href="{{ $link }}">{{ $slot }}</a>

Parameter/slot omitting and using default values.

    <a class="button" href="{{ $link or '#' }}">{{ $slot or 'Link' }}</a>

So to conclude with the button component. We have the template `button/default/blade.php` as:

    <a class="button" href="{{ $link or '#' }}">{{ $slot or 'Link' }}</a>

and in our `master.blade.php` template we have used the component syntax.

    @component("button.default", ["link" => "http://google.com"]) Button Text @endcomponent

To create the panel component, we don’t need to deviate to get the same result. Create `resource/views/panel/default.blade.php`, with:


<div class="panel panel-default">

    @isset($heading)
    <div class="panel-heading">{{ $heading }}</div>
    @endisset
    @isset("body")
    <div class="panel-body">{{ $body }}</div>
    @endisset

</div>

In our master template:

    @component("panel.default")
        @slot("heading") Panel Heading @endslot
        @slot("body")
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        @endslot
    @endcomponent 

    @component("panel.default") 
        @slot("body")
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        @endslot 
    @endcomponent

Lastly, we can nest components. So, in our panel, we can include the button component into the slots.


    @component("panel.default")
        @slot("body")
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

            @component("button.default") Read More @endcomponent 
            @component("button.default",["link" => "/"]) Back @endcomponent 
        @endslot 
    @endcomponent

If at anytime we need to update the panel component, you can: reorder, restyle, or omit sections/variables in a single file without find.replace on your project. #devilmaycare

Note: This approach is ideal for building your templates but you might find, depending on your logic, that ViewComposers may serve you better with more complex data handling.

Laravel Caching

Cache Laravel

Some examples for using cache with your models.

Products and Web Services

Some of the development services we offer.

Laravel Packages

Good things come in small Packagist...