Laravel Transclude

This package allow to use transclusion from Blade template engines. It's very useful when you want to handle views as component. It's inspired by the Angular transclude logic.

Installing

This project can be installed using Composer. Add the following to your composer.json:

{
    "require": {
        "chstudio/laravel-transclude": "~2.0"
    }
}

or run this command:

composer require chstudio/laravel-transclude

After updating composer, add the ServiceProvider to the providers array in config/app.php.

Laravel 5.5+

This library is compatible with the package auto-discovery feature so you have nothing to do... If you prefer adding yourself your providers, please follow the official documentation guidelines.

Laravel <5.5:

Add this in the providers section of the config/app.php file :

CHStudio\LaravelTransclude\TranscludeServiceProvider::class,

Then you can use the new blade directives in your views !

Usage

This package register three new Blade directives :

• @transclude / @endtransclude to write inside a transcluded block,
• @transcluded to declare a space where the transclusion will be written.

For example, take the Bootstrap form elements, they are all using the same global structure. Then in that structure there are different html blocks depending on the form element.

Create template files

input-group.blade.php

<div class="form-group">
    <label for="{{ $name }}" class="control-label">{{$label}}</label>

    @transcluded
</div>

radio.blade.php

@transclude('input-group')
    @foreach($options as $option)
    <div class="radio">
        <label>
            <input name="{{$name}}" type="radio" {{$option['value']==$selected?' checked':''}} value="{{$option['value']}}" />
            {{$option['label']}}
        </label>
    </div>
    @endforeach
@endtransclude

Use the new blocks

Then after writing this 3 files, you can add an element using the @include directive :

<form>
    @include('radio', [
        'options' => [
            ['value' => '1', 'label' => 'Option 1']
        ],
        'selected' => '1',
        'label' => 'My radio button'
        'name' => 'my-radio'
    ])
</form>

This code will generate a full radio element with a combination of input-group and radio templates :

<form>
    <div class="form-group">
        <label for="my-radio" class="control-label">My radio button</label>

        <div class="radio">
            <label>
                <input name="my-radio" type="radio" checked value="1" />
                Option 1
            </label>
        </div>
    </div>
</form>

Contributing

We welcome everyone to contribute to this project. Below are some of the things that you can do to contribute.

• Read our contributing guide.
• Fork us and request a pull to the master branch.
• Submit bug reports or feature requests to GitHub.