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-c240193c8b80c4ea4eaa6f7c96cf9246" class="btn btn-warning">A Button</button>

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>