Larastrap provides many "container" components: those having a child HTML block to be wrapped within the container itself. All of them share a few parameters.
obj is used in particular for x-larastrap::form , but can be used in any Container to define a source for values in child nodes.
@php
$obj = (object) ['name' => 'Foo', 'bio' => 'A very smart guy!', 'email' => 'foo@bar.baz'];
@endphp
<x-larastrap::accordion :obj="$obj">
<x-larastrap::accordionitem label="Contacts">
<x-larastrap::text name="name" readonly squeeze />
<x-larastrap::text name="email" readonly squeeze />
</x-larastrap::accordionitem>
<x-larastrap::accordionitem label="Bio">
<x-larastrap::text name="bio" readonly squeeze />
</x-larastrap::accordionitem>
</x-larastrap::accordion>
<div class="accordion" id="accordion-6a445adc06a2c3828dd83b65449437e6">
<div class="accordion-item">
<h2 class="accordion-header" id="head-accordionitem-88e1e0b91692bc7ea5649af4f3b8cfa5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-88e1e0b91692bc7ea5649af4f3b8cfa5" aria-expanded="false" aria-controls="accordionitem-88e1e0b91692bc7ea5649af4f3b8cfa5">Contacts</button>
</h2>
<div id="accordionitem-88e1e0b91692bc7ea5649af4f3b8cfa5" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-88e1e0b91692bc7ea5649af4f3b8cfa5" data-bs-parent="#accordion-6a445adc06a2c3828dd83b65449437e6">
<div class="accordion-body">
<input id="input-79710f8451566c9b39eca6f5c562d024" type="text" class="form-control-plaintext" name="name" value="Foo" readonly> <input id="input-a98fd74b49307943abeb1d2521cb06d0" type="text" class="form-control-plaintext" name="email" value="foo@bar.baz" readonly>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="head-accordionitem-6c9ea7e06dc06f3caeac55b62c72d8e7">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-6c9ea7e06dc06f3caeac55b62c72d8e7" aria-expanded="false" aria-controls="accordionitem-6c9ea7e06dc06f3caeac55b62c72d8e7">Bio</button>
</h2>
<div id="accordionitem-6c9ea7e06dc06f3caeac55b62c72d8e7" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-6c9ea7e06dc06f3caeac55b62c72d8e7" data-bs-parent="#accordion-6a445adc06a2c3828dd83b65449437e6">
<div class="accordion-body">
<input id="input-74b6812ab62770769c039e35540fc56c" type="text" class="form-control-plaintext" name="bio" value="A very smart guy!" readonly>
</div>
</div>
</div>
</div>All Containers have parameters prependNodes and appendNodes which can be populated with an array of plain custom HTML strings or with more arrays, each rappresenting a Larastrap node (with the same syntax adopted for Custom Elements).
Those are useful to define complex Custom Elements with once-implemented design, to be then reused multiple times in your own templates.
[
'customs' => [
'informativeform' => [
'extends' => 'form',
'params' => [
'prependNodes' => [
[
'extends' => 'larastrap::t',
'params' => [
'node' => 'div',
'classes' => ['alert', 'alert-info'],
'innerAppendNodes' => [
[
'extends' => 'larastrap::t',
'params' => [
'node' => 'p',
'classes' => ['m-0'],
'prelabel' => 'Internal ID: ',
'name' => 'id',
],
]
]
],
],
],
'appendNodes' => [
[
'extends' => 'larastrap::text',
'params' => [
'label' => 'Created At',
'name' => 'created_at',
'readonly' => true,
]
],
[
'extends' => 'larastrap::text',
'params' => [
'label' => 'Last Update',
'name' => 'updated_at',
'readonly' => true,
],
],
],
],
],
],
]
@php
$user = App\Models\User::inRandomOrder()->first();
@endphp
<x-larastrap::informativeform :obj="$user">
<x-larastrap::text name="name" label="Name" />
<x-larastrap::email name="email" label="E-Mail" />
</x-larastrap::informativeform>
<form id="form-6f4922f45568161a8cdf4ad2299f6d23" class="" method="post" name="form-6f4922f45568161a8cdf4ad2299f6d23">
<input type="hidden" name="_token" value="05lHushqY1aPKITICYlWlicC1nHgdFtqWb5t8WmU" autocomplete="off">
<div id="basenode-3418b0cdd2a1948d79648a7b881f0827" class="alert alert-info">
<p id="basenode-26daba67aa2bf5d3c8d9aa4afed9a99a" class="m-0">
Internal ID: 4
</p>
</div>
<div class="row mb-3">
<label for="input-4c701ffe6bfcb75b0ca3644362180dfd" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-4c701ffe6bfcb75b0ca3644362180dfd" type="text" class="form-control" name="name" value="Geraldine Abshire IV">
</div>
</div>
<div class="row mb-3">
<label for="input-cbb086637a111c2e3c7f695ca17c1999" class="col-4 col-form-label">E-Mail</label>
<div class="col-8">
<input id="input-cbb086637a111c2e3c7f695ca17c1999" type="email" class="form-control" name="email" value="lschultz@example.com">
</div>
</div>
<div class="row mb-3">
<label for="input-60df7a7951175ab0752855d5da50b031" class="col-4 col-form-label">Created At</label>
<div class="col-8">
<input id="input-60df7a7951175ab0752855d5da50b031" type="text" class="form-control-plaintext" name="created_at" value="2024-08-04 08:08:23" readonly>
</div>
</div>
<div class="row mb-3">
<label for="input-24fa3bef1021d3a0d1dcfeae9b1185bb" class="col-4 col-form-label">Last Update</label>
<div class="col-8">
<input id="input-24fa3bef1021d3a0d1dcfeae9b1185bb" type="text" class="form-control-plaintext" name="updated_at" value="2024-08-04 08:08:24" readonly>
</div>
</div>
<div class="col-12 text-end">
<button id="button-59550764f03db42dfe74fa6ffcfa0204" class="btn btn-primary" type="submit">Save</button>
</div>
</form>Note the difference among prependNodes /appendNodes parameters in Containers and innerPrependNodes /innerAppendNodes parameters: the latter are specific for Typography nodes, and intended for even more complex layouts and hierarchies of HTML nodes.