Componentele Laravel sunt o caracteristică avansată, care este adăugată de a șaptea versiune a laravel. În acest articol vom vedea care este componenta, cum să o creăm, cum să folosiți componentele în modelul blade și cum să parametrizați componenta prin trecerea parametrilor.
O componentă este o bucată de cod pe care o putem reutiliza în orice șablon blade. Este ceva de genul secțiunilor, aspectului și includerilor. De exemplu, folosim același antet pentru fiecare șablon, astfel încât să putem crea o componentă Header, pe care o putem reutiliza.
O altă utilizare a componentelor pentru o mai bună înțelegere este ca și cum ar trebui să utilizați un buton de înscriere pe site în multe locuri, cum ar fi în antet, subsol sau oriunde altundeva pe site. Apoi creați o componentă a codului butonului respectiv și reutilizați-o.
De exemplu, să creăm o componentă Header
cuArtisan
:
php artisan make:component Header
Această comandă creează două fișiere în proiectul tău laravel:
Header.php
în interiorul directorului app/http/View/Components
;header.blade.php
în interiorul directorului resources/views/components/
.De asemenea, puteți crea componente într-un subdirector, cum ar fi:
php artisan make:component Forms/Button
Această comandă va crea o componentă de buton în director App\View\Components\Forms
iar fișierul blade va fi plasat în directorul resurse/views/components/forms.
Pentru a reda componenta în fișierul blade HTML, vom folosi această sintaxă:
Mai întâi inserăm un cod HTML în fișier header.blade.php
a componentei.
<div><h1> Header Component </h1></div>
acum creați un fișier de vizualizare users.blade.php
în folderul resurse, unde putem folosi componenta antet.
<x-header /><h1>User Page</h1>
acum, prin intermediul sistemului rutare de Laravel, apelăm lama pentru a afișa rezultatul în browser
Pentru a transmite date către componentă Blade
se utilizează următoarea sintaxă, specificând valoarea aferentă parametrului din interiorul elementului HTML
:
<x-header message=”Utenti” />
De exemplu, am folosit componenta anterioară în fișierul users.blade.php.
Ar trebui defiterminați datele componente în fișierul header.php. Toate datele variabilelor publice au fost disponibile automat pentru vizualizarea componentelor.
Adăugați codul în fișier header.php în directorul 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;
}
}
După cum puteți vedea, metoda constructorului clasei setează variabila $title
cu valoarea parametrului transmis componentului. Acum adăugați variabila $title
în fișierul component header.blade.php
pentru a arăta datele din trecut.
<div> <h1> {{$title}}'s Header Component </h1> </div>
Acum aceste date ale componentelor transmise vor fi afișate în browser.
În mod similar, puteți utiliza această componentă pe o altă pagină de vizualizare cu date diferite, creând un alt fișier de vizualizare blade
contact.blade.php
și adăugați mai jos codul componentei pentru a afișa datele transmise.
<x-header message=”Contact Us” />
În componentă, uneori trebuie să specificați atribute HTML suplimentare, cum ar fi numele clasei CSS, îl puteți adăuga direct.
<x-header class=”styleDiv” />
Ercole Palmeri
Luni trecută, Financial Times a anunțat un acord cu OpenAI. FT își licențiază jurnalismul de clasă mondială...
Milioane de oameni plătesc pentru serviciile de streaming, plătind taxe lunare de abonament. Este o părere comună că tu...
Coveware de la Veeam va continua să ofere servicii de răspuns la incidente de extorcare cibernetică. Coveware va oferi capacități criminalistice și de remediere...
Întreținerea predictivă revoluționează sectorul petrolului și gazelor, cu o abordare inovatoare și proactivă a managementului uzinelor...