I componenti blade

Un componente Blade è una classe o un file che rappresenta un frammento riutilizzabile di interfaccia utente. Può essere una card, un modulo, un alert, o qualsiasi altro blocco HTML che vuoi riutilizzare in più viste.

Laravel supporta due tipi principali:

• Componenti anonimi: definiti solo con file .blade.php, senza una classe PHP.
• Componenti basati su classe: hanno una classe PHP associata che può gestire logica e dati.

I componenti Blade anonimi

1. Crea un file in resources/views/components, ad esempio alert.blade.php.
2. Usa il componente con la direttiva blade <x-alert type="success" message="Operazione completata!" />

Puoi creare un componente Blade anonimo manualmente, oppure puoi generarlo con Artisan, con il comando:

php artisan make:component NomeComponente --view

• NomeComponente: è il nome del componente che vuoi creare (es. Alert, Card, Button).
• --view: indica che vuoi creare solo la vista del componente, senza la classe PHP associata.

Laravel genererà un file Blade in:

resources/views/components/nome-componente.blade.php

Ad esempio, se esegui:

php artisan make:component Alert --view

Laravel creerà:

resources/views/components/alert.blade.php

Supponiamo che il componente alert.blade.php sia così definito:

<div class="alert alert-{{ $type }}">
  {{ $message }}
</div>

Nel tuo template Blade, puoi richiamare il componente così:

<x-alert type="success" message="Operazione riuscita!" />

Otterrai il seguente codice HTML:

<div class="alert alert-success">
  Operazione riuscita!
</div>

La direttiva @props

La direttiva @props in Blade è una funzionalità introdotta per i componenti anonimi, che consente di definire e gestire gli attributi passati al componente.

Introducendo nel componente la seguente direttiva:

@props([
    'type' => 'info',
    'message' => 'Messaggio di default',
])

otterrai due risultati:

• Il componente si aspetta due attributi: type e message.
• Se non vengono forniti, type sarà "info" e message sarà "Messaggio di default".

I componenti Blade basati su classe

I componenti Blade basati su classe sono strutture riutilizzabili che combinano una classe PHP con una vista Blade, offrendo maggiore flessibilità e logica rispetto ai componenti anonimi.

Un componente basato su classe è composto da:

• Una classe PHP che gestisce la logica e i dati.
• Una vista Blade che definisce l’aspetto del componente.

Questo approccio consente di incapsulare comportamenti complessi, validazioni, trasformazioni e logica condizionale direttamente nella classe.

Laravel semplifica la creazione con Artisan:

php artisan make:component NomeComponente

Questo comando genera:

• app/View/Components/NomeComponente.php → la classe del componente
• resources/views/components/nome-componente.blade.php → la vista associata

Esempio pratico

1. Classe PHP (Alert.php)

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public string $type;

    public function __construct(string $type = 'info')
    {
        $this->type = $type;
    }

    public function render()
    {
        return view('components.alert');
    }
}

2. Vista Blade (alert.blade.php)

<div class="alert alert-{{ $type }}">
  {{ $slot }}
</div>

3. Uso nel template

<x-alert type="success">
  Operazione completata con successo!
</x-alert>

Vantaggi rispetto ai componenti anonimi

Vantaggio	Descrizione
Logica incorporata	Puoi gestire dati, condizioni e trasformazioni direttamente nella classe.
Pulizia del template	La vista rimane focalizzata solo sull’HTML, mentre la logica è separata.
Testabilità	Le classi possono essere testate come normali classi PHP.
Riutilizzabilità avanzata	Puoi creare componenti dinamici e intelligenti, con parametri e metodi.
Supporto per dipendenze	Puoi iniettare servizi o helper nella classe del componente.

Quando preferirli

Usa componenti basati su classe quando:

• Hai bisogno di logica complessa o condizionale.
• Vuoi centralizzare comportamenti comuni.
• Stai costruendo componenti dinamici (es. form, card, modal interattive).

Per componenti semplici e statici, i componenti anonimi sono più rapidi e leggeri.

La variabile Blade $slot

Se si vogliono passare al componente Blade più sezioni di contenuto, è possibile inserirle nel template all’interno dei tag <x-nome-componente> e </x-nome-componente>, il motore andrà a inserirle al posto del segnaposto $slot presente nel componente.

Esempio

Componente card.blade.php

<div class="card">
  <div class="card-body">
    {{ $slot }}
  </div>
</div>

Uso del componente nel template Blade:

<x-card>
  Questo è il contenuto della card.
</x-card>