Laravel blade Componenten.

Laravel blade componenten zorgen ervoor dat je makkelijker overzicht houdt als je werkt in je blade views. Ze zijn vooral handig voor het bouwen van een consistente lay-out met herbruikbare elementen. Hierdoor wordt onderhoud makkelijker doordat je maar op 1 plek aanpassingen hoeft te doen.

Ik wordt altijd weer enthousiast als ik weer een component gebruik en hup, snel weer verder!

vergroten

Component in vs code.

X

In dit blog, gaan we een "code blok" maken met een balk aan de bovenkant voor extra informatie. De component gaan we gelijk meerdere malen herhalen op deze pagina voor uitleg over blade componenten. De stijl van het code blok is gedaan met tailwind, en ziet er als volgt uit:

...
...

1. Een blade component maken.

Het volgende commando voer je uit op de command line, in de directory van de Laravel installatie.

Shell zsh in de Laravel directory.
php artisan make:component code --view

Dit commando heeft een view-only component gemaakt. Je vindt het nieuwe code.blade.php bestand in resources/views/components/.

Het volgende commando voer je uit op de command line, in de directory van de Laravel installatie.

Shell zsh in de Laravel directory.
php artisan make:component code --view

Dit commando heeft een view-only component gemaakt. Je vindt het nieuwe code.blade.php bestand in resources/views/components/.

We bouwen het skelet voor de component, en passen styling toe met behulp van Tailwind CSS.

resources/views/components/code.blade.php.
<pre class='text-gray-700 bg-gray-200 shadow-sm rounded-xl dark:text-gray-200 dark:bg-black dark:shadow-gray-300/20'>
	<div class="relative flex items-center justify-between px-4 py-2 font-sans text-sm bg-gray-300 dark:bg-gray-800 rounded-t-xl">
		<span>...</span>
	</div> 
	<div class="p-4 overflow-auto ">
		<code class="whitespace-pre!">...</code>
	<div>
</pre>

We gebruiken de "x-code" notatie om de component in te voegen. Merk op dat we Tussen die x-code "named slot components" geïntegreerd hebben zoals <x-slot:title> en <x-slot:content>.

We gebruiken slots om aanpassing van de componentinhoud mogelijk te maken.

resources/views/blog/laravel-componenten.blade.php.
....
	<x-code> 
		<x-slot:title>resources/views/blog/laravel-componenten.blade.php.</x-slot:title>
		<x-slot:content>...</x-slot:content>
	</x-code>
....

We hebben in ons component dus 2 named slots; title en content. Voor de titel van ons code blok, plaatsen de variabele gegevens tussen de open <x-slot:title> en de de sluit </x-slot:title>. Ditzelfde gebeurt bij het <x-slot:content>.

5. Definiëren van de named variabele slot in de component.

De variabele $title word gevuld met de gegevens die tussen de open <x-slot:title> en de de sluit </x-slot:title> van de view staan.

resources/views/components/code.blade.php
....
	<x-code> 
	...
		<span>{{ $title ?? '...' }}</span>
		...
		<span>{{ $content ?? '...' }}</span>
	...
	</x-code>
....

In het component bestand vullen we de variabele in met {{ $title ?? '...' }} In geval we geen titel variabele meegeven, vullen we met de ?? conditie '...' in.

Met de css klassen volledig in de blade component, kan het soms handig zijn klassen toe te voegen in de view. We doen dit door de Laravel "$attributes->merge" methode te gebruiken in de component. We typen dit op de volgende manier:

resources/views/components/code.blade.php
<pre {{ $attributes->merge(['class' => 'text-gray-700 bg-gray-200 rounded-xl']) }}>

Daarna voegen we tailwind css classes zoals we altijd doen in de view: "class="border-2 border-green-300" en krijgen de groene rand om ons component.

resources/views/blog/laravel-componenten.blade.php.
....
	<x-code class="border-2 border-green-300"> 
	...	
	</x-code>
....

• Houd de componenten klein en gefocust op één enkele verantwoordelijkheid.
• Gebruik named slots om aanpassing van de componentinhoud mogelijk te maken.
• Documenteer componenten goed, vooral als ze door andere teamleden worden gebruikt.

Componenten met (named) slots zijn ideaal om consistentie en overzicht te bewaren en onderhoud te vereenvoudigen. Bij gebruik van componenten wordt o.a. de lay-out niet meer herhaald. Dit draagt bij aan de werkwijze WOO (Write Only Once) of ook wel DRY (Don't Repeat Yourself) principe. Maar goed, ik val in herhaling 😊