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-40d1d16e3420669bf929692d75bab442" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Test</button>

Actually, the attributes parameter is mostly intended to easy algorithmic definition and generation of addictional attributes, as any attribute passed to the Blade node and not processed by Larastrap will be anyway appended to the final HTML output.

Prepend a colon ( : ) to the name of the attribute to pass a PHP expression to be evaluated, as described in the Laravel documentation.

<x-larastrap::button label="Test" data-foo="bar" :baz="10 + 6" />

<button id="button-554c02e20b8780cbb6087503cb48d5c0" class="btn btn-primary" data-foo="bar" baz="16">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-d4287c1196f2ababf6dd1c25bd8232d7" class="my-custom-class">Test</button>

A boolean attribute which hides the element.

<x-larastrap::t node="div" classes="alert alert-info" :hidden="rand(1, 2) % 2 == 1">
    This may appear or not at every page load!
</x-larastrap::t>

<div id="basenode-e6f31d660b53a2a8ce7e19a7d61d3208" class="alert alert-info">
  This may appear or not at every page load!
</div>

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-53aa864c3647779ad8f0ef198c5852ee" class="btn btn-primary">Test 21/12/2024 14:19:29</button>

The reviewCallback can also be indicated in any form accepted as PHP Callable, such as [MyClass::class, 'a_static_method']: this is in particular suggested when using this parameter in your configuration file, to be able to cache it using the dedicated Laravel command.

<?php

class MyAttributes
{
    public static function formatDate($button, $params)
    {
        $params['label'] = $params['label'] . ' ' . date('d/m/Y H:i:s');
        return $params;
    }
}

?>

<x-larastrap::button label="Test" :reviewCallback="[MyAttributes::class, 'formatDate']" />

<button id="button-16dae6af898f3233a84b6fdfe0b2f044" class="btn btn-primary">Test 21/12/2024 14:19:29</button>