Custom Elements

Given the multiple kind of components provided by Larastrap, it is possible to define your owns. Once, with a few lines in the configuration, and ready to be used across all of your application.

Custom Elements can be defined in the customs array in config/larastrap.php , in the form

<?php

return [
    'customs' => [
        'my-element-name' => [
            'extends' => 'a-larastrap-kind-of-element',
            'params' => [
                'first_parameter' => 'value',
                'second_parameter' => 'value',
            ]
        ]
    ]
];

or, for a more practical example

<?php

return [
    'customs' => [
        'mybutton' => [
            'extends' => 'button',
            'params' => [
                'color' => 'warning',
            ]
        ]
    ]
];

Given this configuration, every time you use x-larastrap::mybutton tag, you obtain a x-larastrap::button whose default color is warning

<x-larastrap::mybutton label="A Button" />

<button id="button-9dd9ba90d0ee8f8ba43b414886564052" class="btn btn-warning">A Button</button>

The most immediate use of this feature is the ability to provide a consistent semantic for your application, for example defining once the buttons to create, modify, delete items and specifing in a single place their graphical behavior (attaching specific CSS classes or using the Bootstrap one's).

Then, combining advanced features as Typography components, prependNodes /appendNodes for Containers and a bit of creativity, you are able to built complex composite widgets (often, faster and better than using Laravel Blade native Components) to be also shared in different applications.

You can also dynamically define your custom elements with the addCustomElement() provided by LarastrapStack service provider. This has to be used before Blade rendering, for example in the parent Controller or in a Laravel Service Provider.

app()->make('LarastrapStack')->addCustomElement('jerkbutton', [
    'extends' => 'button',
    'params' => [
        'color' => 'secondary',
        'postlabel' => ' (Click Here!)',
    ],
]);

<x-larastrap::jerkbutton label="A Button" />

<button id="button-164b728f1860a0ebd5561f14b75f0cfb" class="btn btn-secondary">A Button (Click Here!)</button>