Base Element

All components implemented in Larastrap share the same basic class, and the same essential parameters.

The ID of the HTML node. If not specified, a (semi) random one is generated so that all items are properly marked.

<x-larastrap::button label="Test" id="test-button" />

<button id="test-button" class="btn btn-primary">Test</button>

An associative array which is translated to an extra set of attributes to the node. Useful to attach your own data attributes, custom HTML attributes, hooks for your preferred Javascript framework and so on.

<x-larastrap::button label="Test" :attributes="['data-bs-toggle' => 'tooltip', 'data-bs-title' => 'Sample tooltip']" />

<button id="button-62bc3d2511a98e1f60b3c5491c60ef3b" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Test</button>

An array of CSS classes to be added to the HTML node, in addiction to those automatically generated. Can be defined as an array or a space separated string.

<x-larastrap::button label="Test" classes="btn-lg" />

<button id="button-324eeb857c7fb0bba835184f0b23460e" class="btn-lg btn btn-primary">Test</button>

An array of CSS classes to be applied to the HTML node, overriding those automatically generated. Can be defined as an array or a space separated string.

<x-larastrap::button label="Test" :override_classes="['my-custom-class']" />

<button id="button-0497368284c1f60e0660b668a5016905" class="my-custom-class">Test</button>

A boolean attribute which hides the element.

<x-larastrap::button label="This changes at every page load!" :hidden="rand(1, 2) % 2" />

<button id="button-21efe9584b018916de894b8cdb4a0041" class="btn btn-primary">This changes at every page load!</button>

A function to be called to directly handle and transform the parameters of the node. This have to take two parameters: the first is the instance of the component itself, the second is the indexed array of parameters. Must return the (eventually modified) array of parameters.

This feature is mostly intended for Custom Elements, and is the ultimate customization tool provided by Larastrap.

<x-larastrap::button label="Test" :reviewCallback="function($button, $params) {
    $params['label'] = $params['label'] . ' ' . date('d/m/Y H:i:s');
    return $params;
}" />

<button id="button-3f79aad7f9ba9f216c8538178969318f" class="btn btn-primary">Test 01/05/2024 22:28:02</button>