Crear componente JetStream

Jetstream proporciona componentes que son muy útiles, pero hay veces que interesa crear los propios componente para darle estilos propios o agregar funcionalidades.

En este ejemplo vamos a tomar un componente jetstream de botón <x-jet-button>

Localizar componentes de jetstream

Los componetes se encuentran el la carpeta vendor, pero para poder utilizarlos hay que publicarlos primero, utilizando el comando

php artisan vendor:publish --tag=jetstream-views

Este comando ubica los ficheros de componentes en la carpeta resources\views\vendor\jetstream\components

Son componentes de blade, por lo que se utilizan con todas sus propiedades y características.

Puedes ver como utilizar la plantilla de jetstream en artículo Laravel Jetstream.

Reutilizar componente jetstream

Los componentes se pueden utilizar desde la vista con el código <x-jet-nombredelcomponente>. Pero ahora vamos a crear un componente a partir de uno existente, y lo llamaremos en la vista con el código <x-button>, es decir, sin el jet.

Component button

En este ejemplo vamos a reutilizar un jetstream component button para darle estilos.

Lo primero ir a la carpeta de componetes de jetstream y copiar el contenido del fichero button.blade.php

resources\views\vendor\jetstream\components\button.blade.php

<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition']) }}>
    {{ $slot }}
</button>

Después crear el fichero con el mismo nombre dentro de la carpeta de vistas components, si no existe, crearla manualmente.

resources\views\components\button.blade.php

Enviar información al componente

Para indicar que se va a enviar información al componente se utliza la directiva props al inicio del fichero y se le pasa por parámetro los nombres de variables. También se le puede pasar un valor por defecto por si la variable viene vacía.

En este ejemplo va a ser un color por defecto gris.

@props(['color => 'gray'])
<button {{ ...

Utilizar variables

Poner las variables en el código del botón teniendo en cuenta dos cosas

1. Poner signo del dolar $ delante del nombre
2. Utilizar comillas dobles para que tome el símbolo dólar $

'class' => "inline-flex items-center px-4 py-2 bg-$color-800"

Entonces el componente button queda así:

@props(['color' => 'gray'])

<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center px-4 py-2 bg-$color-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-$color-600 active:bg-$color-500 focus:outline-none focus:border-$color-500 focus:ring focus:ring-$color-300 disabled:opacity-25 transition"]) }}>
    {{ $slot }}
</button>

Utilizar el button en la vista

Como cualquier componente de blade se llama comenzando por x y seguido del nombre del componente.

En este ejemplo sería:

<x-button color="blue">
 Boton
</x-button>

Otras clases de personalización

Para que el botón se vea con ancho completo y texto centrado utilizar la clase justify-center

@props(['color' => 'gray'])

<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex justify-center items-center ...

Para mostrar el ancho completo utilizar en la vista la clase x-full

<x-button color="blue" class="w-full">
 Boton
</x-button>

Funcionalidad de un componente jetstream

Utilizar componentes jetstream es muy sencillo y solo hay que conocer los códigos y métodos que se pueden utilizar. Permite comunicarse con livewire perfectamente los que da gran versatilidad y facilidad de uso y resultado.

Funcionalidades de un component button

Para ver algunas funcionalidades vamos a utilizar el componente creado anteriormente.

Comunicación entre la vista y controlador a través del componente de jetstream button.

Componente controlador livewire

El Componente controla la parte lógica y en este ejemplo tenemos una propiedad y un metodo.

• Propiedad: accion, que guarda el valor a través del método. La propiedad es leida en la vista del componente.
• Función o método: guarda el valor 'E' en la propiedad.

public $accion = '';

public function in(){
 $this->accion = 'E';
}

Vista del componente livewire

La vista muestra al usuario dinamicamente lo que su controlador le envía.

En el ejemplo con el componente de jetstream button creado anteriormente.

Lo que hace el botón es habilitarse o deshabilitarse al hacer clic, y para ello se usan los siguientes métodos y eventos.

<x-button color="blue"
 x-bind:disabled="$wire.accion == 'E'" 
 wire:loading.attr="disabled" 
 wire:target="in" 
 class="w-full" 
 wire:click="in">
                
 Entrar

 </x-button>

• x-bind: es un condicional que activa la propiedad indicada si cumple la condición.
  disabled se activa si la propiedad es 'E'
• wire:loading.attr, se ejecuta mientras dura el evento. En este caso permanece deshabilitado para que no se pueda pulsar 2 veces seguidas y evite comportamiento indeseado.
• wire:target, se ejecuta especificamente para un metodo. En el ejemplo el método "in" del controlador.
  Si no se indica, se ejectuta para todo el componente.
• wire:click, captura el evento click que un usuario realiza al pulsar el botón.
  llama al método o función indicado del controlador, en este ejemplo al método "in".