I componenti di Laravel sono una funzionalità avanzata, che viene aggiunta dalla settima versione di laravel. In questo articolo andremo a vedere cos’è il componente, come crearlo, come utilizzare i componenti nel modello blade e come parametrizzare il componente passando dei parametri.
Un componente è un pezzo di codice che possiamo riutilizzare in qualsiasi template blade. È qualcosa di simile a sezioni, layout e include. Ad esempio, utilizziamo la stessa intestazione per ogni modello, quindi possiamo creare un componente Header, che possiamo riutilizzare.
Un altro utilizzo dei componenti per una migliore comprensione è come se fosse necessario utilizzare un pulsante di registrazione sul sito Web in molti punti, come nell’intestazione, nel piè di pagina o in qualsiasi altro punto del sito Web. Quindi crea un componente di quel codice pulsante e riutilizzalo.
Ad esempio, creiamo un componente Header
con l’Artisan
:
php artisan make:component Header
Questo comando crea due file nel tuo progetto laravel:
Header.php
all’interno della directory app/http/View/Components
;header.blade.php
all’interno della directory resources/views/components/
.Puoi anche creare componenti in una sottodirectory, come ad esempio:
php artisan make:component Forms/Button
Questo comando creerà un componente pulsante nella directory App\View\Components\Forms
e il file blade verrà inserito nella directory resources/views/components/forms.
Per il rendering del componente nel file blade HTML, useremo questa sintassi:
<x-ComponentName/>
Per prima cosa inseriamo del codice HTML nel file header.blade.php
del componente.
<div><h1> Header Component </h1></div>
ora crea un file di visualizzazione users.blade.php
nella cartella delle risorse, in cui possiamo utilizzare il componente header.
<x-header /><h1>User Page</h1>
ora, tramite il sistema di routing di laravel, richiamiamo il blade per visualizzare nel browser il risultato
Per passare i dati al componente Blade
si usa la seguente sintassi, specificando il valore relativo al parametro all’interno dell’elemento HTML
:
<x-header message=”Utenti” />
Ad esempio, abbiamo utilizzato il componente precedente nel file users.blade.php.
Dovresti definire i dati del componente nel file header.php. Tutti i dati delle variabili pubbliche erano automaticamente disponibili per la vista del componente.
Aggiungere il codice nel file header.php all’interno della directory app/http/View/Components/ .
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Header extends Component{
/*** The alert type.** @var string*/
public $title = "";
public function __construct($message){
$this->title = $message;
}
}
Come puoi vedere, il metodo costruttore della classe imposta la variabile $title
con il valore del parametro passato al componente. Ora aggiungi la variabile $title
nel file del componente header.blade.php
per mostrare i dati passati.
<div> <h1> {{$title}}'s Header Component </h1> </div>
Ora questi dati dei componenti trasmessi verranno visualizzati nel browser.
Allo stesso modo, puoi utilizzare questo componente su un’altra pagina di visualizzazione con dati diversi, creando un altro file di visualizzazione blade
contact.blade.php
e aggiungere sotto il codice del componente per mostrare i dati passati.
<x-header message=”Contact Us” />
Nel componente, a volte è necessario specificare attributi HTML aggiuntivi, come il nome della classe CSS, è possibile aggiungerlo direttamente.
<x-header class=”styleDiv” />
Ercole Palmeri
Nasce l’Osservatorio del Nordest sull’economia dell’Innovazione Nim, (Numbers Innovation Motion) è un progetto di Galileo Visionary District realizzato in collaborazione…
ASKtoAI lancia le innovative funzionalità Memory e Personality, strumenti d'avanguardia per la creazione di contenuti digitali che promettono di migliorare…
Discuss , la piattaforma leader appositamente creata per trasformare le esperienze in insight, ha potenziato le sue capacità di scalare la…
Con le festività che si avvicinano rapidamente, Blue Lake Packaging è entusiasta di offrire un'alternativa ecologica al nastro da imballaggio…
Netlogistik , leader in potenti servizi che guidano le aziende verso la trasformazione digitale della catena di fornitura, ha recentemente tenuto…
Annuncia una soluzione integrata che combina FPGA di Lattice a bassa potenza e bassa latenza con la piattaforma NVIDIA Orin…
Con un successo clamoroso, il Textile Export Promotion Project (TEPP), guidato dalla Taiwan Textile Federation nel 2023, ha messo in…
Lattice presenta i nuovi FPGA mid-range Lattice Avant-G e Lattice Avant-X, stack di soluzioni specifiche per le applicazioni ampliate e…
Innovazione per i professionisti della gestione della conoscenza e dell'innovazione (KM&I). Nel settore legale è ora disponibile un riferimento completo…
La Eclipse Foundation , una delle più grandi fondazioni di software open source al mondo, ha annunciato oggi la formazione dell'Eclipse…