Larastrap
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 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 class="text-danger">Larastrap components</strong> , <strong class="">parameters</strong> and <code 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.
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 class="">cwalsh@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.
estel.barrows@example.org
lincoln.davis@example.net
henri86@example.net
[
'customs' => [
'ctitle' => [
'extends' => 't',
'params' => [
'node' => 'h5',
'classes' => ['card-title'],
'name' => 'name',
]
],
'cmail' => [
'extends' => 't',
'params' => [
'node' => 'p',
'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 class="card-title">
Miss Earnestine Lowe
</h5>
<p class="card-text">
langosh.rosalyn@example.com
</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">
Aiden Osinski
</h5>
<p class="card-text">
estel.barrows@example.org
</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">
Dr. Pasquale Borer IV
</h5>
<p class="card-text">
everette14@example.org
</p>
</div>
</div>
</div>