Blog / Laravel / Componentes de las vistas (ViewComponents)

Laravel, desde la versión 7, dispone de los ViewComponents para crear fragmentos que pueden ser usados en los templates de Blade y recibir parámetros.

Ejemplo de componente

Voy a usar un ViewComponent que recibirá un número, por ejemplo, para mostrar el precio de un producto.

Necesito este component básicamente porque el formato de números que uso es diferente del que trae Laravel, cambiare los puntos por comas y viceversa, además quiero mostrar un número de decimales, por defecto 2, aunque estos sean 0. Para esto en la vista tenía:


@purple({{)
    number_format(
        (float) $number,
        @lilac(2),
        @yellow('.'),
        @yellow(',')
    )
@purple(}})
@endcode

        

Voy a encapsular esto en un componente, después de esto en la vista pondré: @icode <x-number :amount="$price" /> € , para mostrar el precio de un producto, por ejemplo.

Crear un componente

Creo el componente con el comando:

php artisan make:component NumberComponent

Se han creado los ficheros "resources/views/components/number-component.blade.php" y "app/Views/Components/NumberComponent.php". Dentro de este último, pondré lo siguiente:


<?php

namespace App\View\Components;

use Illuminate\View\Component;

class NumberComponent extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(
        $amount,
        $decimalsNumber = 2,
        $decimals  = '.',
        $thousands = ','
    )
    {
        $this->amount = number_format(
            (float) $amount,
            $decimalsNumber,
            $decimals,
            $thousands
        );
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.number')
            ->with('amount', $this->amount);
    }
}

Modifica el template "resources/views/components/number-component.blade.php" cambiando su contenido por este otro: @purple({{)  $amount @purple(??) @yellow('')  @purple(}}) @endicode . Listo, solo queda recargar el autoload:

composer dump-autoload

Sitios consultados



15-11-2020

Entradas relacionadas:
@endsection IronWoods.es - Blog / Laravel / Componentes de las vistas de Laravel

IronWoods.es

Desarrollo web

Moisés Alcocer, 2024 | Mapa web

Sitio libre de scripts. Solo efectos HTML / CSS