Curso de Laravel para Noobs - #25 Views V [Blade Template - Componentes]

Nesse tutorial aprenderemos a criar e utilizar componentes dentro de um template Blade no Laravel. Os componentes são utilizados para elementos que se repetem com frequência.

Componentes no Laravel

Para criação de um novo componente podemos utilizar o comando:

php artisan make:component Box

Após o comando ele vai criar dois arquivos:

app/View/Components/Box.php

Este é o arquivo lógico do componente:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Box extends Component
{
    public function __construct(public string $cor, public string $fonte)
    {
        //
    }

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

resource/views/components/box.blade.php

Esse é o arquivo html que será mostrado ao usuário final:

<div style="background: {{$cor}}; color:{{$fonte}}; padding: 15px;">
    <strong>{{$title}}</strong><br>
    {{$msg}}
</div>

resource/views/carros.blade.php

Esse é o html principal que vai chamar o componente:

<x-box cor="darkgreen" fonte="white">
    <x-slot:title>Sucesso</x-slot>
        <x-slot:msg>Você efetuou a inserção com sucesso!</x-slot>
</x-box>

Repare no exemplo anterior que estamos passando o parâmetro cor e fonte para dentro do nosso componente, personalizando-o.

Por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de um auxílio nos códigos? webdesignemfoco@gmail.com

"Portanto, vão e façam discípulos de todas as nações, batizando-os em nome do Pai e do Filho e do Espírito Santo, ensinando-os a obedecer a tudo o que eu ordenei a vocês. E eu estarei sempre com vocês, até o fim dos tempos." Mateus 28 19