Larastrap provides a generic utility component called x-larastrap::t , able to be rendered as any preferred HTML tag type.
<x-larastrap::t node="span">a simple span</x-larastrap::t>
<span id="basenode-71cee914" class="">a simple span</span>
Of course this is not meant to be directly used in templates - as it would be tedious and unconvenient to write so much code just to open and close a span
- but is considered a base to define your own Custom Elements, so to define the typography style of your whole application and keep it consistent through the centralized configuration.
On this website, references to Larastrap components
, parameters
and examples of values
are defined once in the global configuration as Custom Elements.
[
'customs' => [
'element' => [
'extends' => 't',
'params' => [
'classes' => ['text-danger'],
'node' => 'strong',
]
],
'value' => [
'extends' => 't',
'params' => [
'node' => 'code',
]
],
'parameter' => [
'extends' => 't',
'params' => [
'node' => 'strong',
]
]
]
]
<p>
On this website, references to <x-larastrap::element>Larastrap components</x-larastrap::element>, <x-larastrap::parameter>parameters</x-larastrap::parameter> and <x-larastrap::value>examples of values</x-larastrap::value> are defined once in the global configuration as Custom Elements.
</p>
<p>
On this website, references to <strong id="basenode-ed7187f9" class="text-danger">Larastrap components</strong> , <strong id="basenode-443ffd08" class="">parameters</strong> and <code id="basenode-b6547e0b" class="">examples of values</code> are defined once in the global configuration as Custom Elements.
</p>x-larastrap::t can be used to handle, among the other, classic Bootstrap Alerts and Badges: get a look to the page of Custom Elements Examples.
The node parameter is just the HTML node type used to render the element. In can actually be any arbitrary string, in case you want to use it to render the anchor for your JS client-side web components.
A paragraph
[
'customs' => [
'my-p' => [
'extends' => 't',
'params' => [
'node' => 'p',
],
],
'my-div' => [
'extends' => 't',
'params' => [
'node' => 'div',
],
],
'my-span' => [
'extends' => 't',
'params' => [
'node' => 'span',
],
],
],
]
<x-larastrap::my-p>A paragraph</x-larastrap::my-p>
<x-larastrap::my-div>A div</x-larastrap::my-div>
<x-larastrap::my-span>A span</x-larastrap::my-span>
<p id="basenode-60053794" class="">
A paragraph
</p>
<div id="basenode-7355c460" class="">
A div
</div><span id="basenode-813e4763" class="">A span</span>When you just want a shortcut for a static label, you can use the content parameter to define once a string to be placed into the node.
[
'customs' => [
'badge_ok' => [
'extends' => 't',
'params' => [
'node' => 'span',
'classes' => ['badge', 'text-bg-success'],
'content' => 'OK',
],
],
'badge_ko' => [
'extends' => 't',
'params' => [
'node' => 'span',
'classes' => ['badge', 'text-bg-danger'],
'content' => 'NO GOOD',
],
],
],
]
<x-larastrap::badge_ok />
<br>
<x-larastrap::badge_ko />
<span id="basenode-5080c4b6" class="badge text-bg-success">OK</span><br>
<span id="basenode-37ef40ae" class="badge text-bg-danger">NO GOOD</span>Alternatively, you can define from which arbitrary HTML attribute retrieve the contents for the x-larastrap::t element.
This is handy when defining your own Custom Elements, and define custom attributes with a specific placement within the given hierarchy.
[
'customs' => [
'statusbadge' => [
'extends' => 't',
'params' => [
'node' => 'span',
'classes' => ['d-flex'],
'innerAppendNodes' => [
[
'extends' => 't',
'params' => [
'node' => 'span',
'content' => 'STATUS',
'classes' => ['badge', 'text-bg-primary', 'rounded-start-pill'],
],
],
[
'extends' => 't',
'params' => [
'node' => 'span',
'classes' => ['badge', 'text-bg-secondary', 'rounded-end-pill'],
'contentfrom' => 'status'
],
],
]
],
],
],
]
<x-larastrap::statusbadge status="OK" />
<br>
<x-larastrap::statusbadge status="PENDING" />
<span id="basenode-0c2c3ac8" class="d-flex" status="OK"><span id="basenode-b2c92c2c" class="badge text-bg-primary rounded-start-pill" status="OK">STATUS</span> <span id="basenode-6bfd067f" class="badge text-bg-secondary rounded-end-pill" status="OK">OK</span></span><br>
<span id="basenode-1f7cc93c" class="d-flex" status="PENDING"><span id="basenode-9ad82ea2" class="badge text-bg-primary rounded-start-pill" status="PENDING">STATUS</span> <span id="basenode-a2d77406" class="badge text-bg-secondary rounded-end-pill" status="PENDING">PENDING</span></span>x-larastrap::t is a Container, and an obj can be assigned (or inherited), but it also sports a few other parameters that permits you to display the value from a named attribute of the object (eventually: an Eloquent model) directly within the textual node
@php
$user = App\Models\User::inRandomOrder()->first();
@endphp
<x-larastrap::t :obj="$user" name="email" />
<span id="basenode-f2e7ad79" class="">genevieve.reinger@example.com</span>In this case, also, it is possible to define your own Custom Elements to always display the same attribute with the same style, decorations, addictional graphics and more.
[
'customs' => [
'ctitle' => [
'extends' => 't',
'params' => [
'node' => 'h5',
'classes' => ['card-title'],
'name' => 'name',
]
],
'cmail' => [
'extends' => 't',
'params' => [
'node' => 'small',
'classes' => ['card-text'],
'name' => 'email',
'prelabel' => '<i class="bi bi-envelope"></i> '
]
],
]
]
@php
$users = App\Models\User::inRandomOrder()->take(3)->get();
@endphp
<div class="card-group">
@foreach($users as $user)
<x-larastrap::enclose :obj="$user">
<div class="card">
<div class="card-body">
<x-larastrap::ctitle />
<x-larastrap::cmail />
</div>
</div>
</x-larastrap::enclose>
@endforeach
</div>
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 id="basenode-c9f2a35b" class="card-title">
Gerard McGlynn
</h5><small id="basenode-7c8d9790" class="card-text"> xwelch@example.org</small>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 id="basenode-7e9deb1c" class="card-title">
Jules Wunsch
</h5><small id="basenode-ed43383f" class="card-text"> daniel.arlie@example.net</small>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 id="basenode-db1b7647" class="card-title">
Jessyca Goyette
</h5><small id="basenode-b87134ee" class="card-text"> casper.lorine@example.net</small>
</div>
</div>
</div>As x-larastrap::t is a Container, it supports prependNodes /appendNodes parameters to attach items before and after the element itself. But the Typography node also has innerPrependNodes /innerAppendNodes parameters to be able to prepend and append items inside the element, and be able to define once complex layouts.
The above example of users' card can be squeezed into a single Larastrap Custom Element containing multiple informations.
kasandra.zboncak@example.com
lschultz@example.com
[
'customs' => [
'easy-user-card' => [
'extends' => 't',
'params' => [
'node' => 'div',
'classes' => ['card'],
'innerAppendNodes' => [
[
'extends' => 't',
'params' => [
'node' => 'div',
'classes' => ['card-body'],
'innerAppendNodes' => [
[
'extends' => 't',
'params' => [
'node' => 'h5',
'classes' => ['card-title'],
'name' => 'name',
],
],
[
'extends' => 't',
'params' => [
'node' => 'p',
'classes' => ['card-text'],
'name' => 'email',
'prelabel' => '<i class="bi bi-envelope"></i> '
],
],
],
],
],
],
],
],
],
]
@php
$users = App\Models\User::inRandomOrder()->take(2)->get();
@endphp
<div class="card-group">
@foreach($users as $user)
<x-larastrap::easy-user-card :obj="$user" />
@endforeach
</div>
<div class="card-group">
<div id="basenode-841c1261" class="card">
<div id="basenode-95dfd1a5" class="card-body">
<h5 id="basenode-c6f6cfff" class="card-title">
Shany Bosco
</h5>
<p id="basenode-cc53dc64" class="card-text">
kasandra.zboncak@example.com
</p>
</div>
</div>
<div id="basenode-b11f6dfe" class="card">
<div id="basenode-aa2bb418" class="card-body">
<h5 id="basenode-4a0240f6" class="card-title">
Geraldine Abshire IV
</h5>
<p id="basenode-ff7d743d" class="card-text">
lschultz@example.com
</p>
</div>
</div>
</div>