31. Componentes blade (de clase y anonimos)

En este capítulo de Laravel, te enseñaremos sobre los componentes Blade, una característica poderosa de Laravel que te permite reutilizar código HTML y PHP en tu aplicación web. Aprenderás cómo crear y utilizar los componentes Blade en tu proyecto Laravel, incluyendo cómo pasar datos a los componentes, cómo utilizar directivas de Blade dentro de los componentes y cómo personalizar la apariencia de los componentes.

Los componentes Blade son una forma eficiente y sencilla de reutilizar bloques de código en diferentes partes de tu aplicación web, lo que puede ahorrar tiempo y mejorar la organización del código. Además, los componentes Blade pueden mejorar la legibilidad del código, ya que los bloques de código se dividen en componentes más pequeños y específicos en lugar de estar todos juntos en un archivo grande. Al final de este capítulo, tendrás un conocimiento profundo de los componentes Blade y cómo utilizarlos en tu proyecto Laravel para crear aplicaciones web más eficientes y fáciles de mantener.


7 comentarios

Inicia sesión para comentar

Comentarios:

  • Juan Carlos Castañeda Jaquea

    Juan Carlos Castañeda Jaquea hace 4 semanas

    @props(['type' => 'info'])

    @php     ←-----  En esta linea

        switch ($type) {

            case 'info':

                # code...

                $clases = 'bg-blue-200 border-blue-500 text-blue-700'

                break;

            case 'danger':

                # code...

                $clases = 'bg-red-200 border-red-500 text-red-700'

                break;          

            default:

                # code...

                $clases = 'bg-blue-200 border-blue-500 text-blue-700'

                break;

        }

    @endphp


     

    <article class="border-l-4 p-4 {{$clases}}" role="alert">

        <h1 class="font-bold">{{$title}}</h1>

        {{$slot}}

    </article>

  • Juan Carlos Castañeda Jaquea

    Juan Carlos Castañeda Jaquea hace 4 semanas

    syntax error, unexpected token "break"

  • Eduardo Martínez

    Eduardo Martínez hace 1 año

    Buenas! Ha habido cambios en la manera que jetstream gestiona los componentes:

      - Los componentes de jetstream ahora vienen visibles desde el principio en resources/views/components

      - Para llamarlos ya no es necesario usar <x-jet-foo> sino que se les llama como a cualquier componente, <x-foo>.


     

     

  • Walter

    Walter hace 1 año

    ? Componentes creados por Breeze

    Con la instalación de Breeze encontramos componentes en resources/views/components

     

    ? Componentes creados por Jetstream

    Para ver todos los componentes creados en la instalación de Jetstream debemos publicarlos:

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

    Los componentes aparecerán en resources/views/vendor/jetstream/components

     

    Estos componentes se llaman de una manera un poco diferente:

    <x-jet-welcome />

     

  • Walter

    Walter hace 1 año

    ? Componentes de Clase

    Cuando queremos separar la lógica de la vista hacemos uso de los componentes de clase.

    php artisan make:component Alert2

    Se crea el archivo app/View/Components/Alert2.php con la lógica

    <?php
    
    namespace App\View\Components;
    use Illuminate\View\Component;
    
    class Alert2 extends Component
    {
    	public $clases;
    	public function __construct($type = 'info')
    	{
    		switch($type) {
    			case 'info':
    				$clases = "bg-blue-100 border-blue-500 text-blue-700";
    				break;
    			case 'danger':
    				$clases = "bg-red-100 border-red-500 text-red-700";
    				break;
    			default:
    				$clases = "bg-orange-100 border-orange-500 text-orange-700";
    				break;
    		}
    		$this->clases = $clases;
    	}
    	public function render()
    	{
    		return view('components.alert2');
    	}
    }

    y su vista en resources/views/components/alert2.blade.php 

    <article 
    	{{ $attributes->merge([
    		'class' => "border-l-4 p-4 $classes", 
    		'role' => "alert"
    	]) }} 
    >
    	<h1 class="font-bold">{{ $title }}</h1>
    	{{ $slot }}
    </article>

     

    Para su implementación llamamos al componente Alert2:

    <x-alert2 :type="$type" id="alerta" class="mb-4" role="prueba">
    
    	<x-slot name="title">
    		Este es el título desde el slot 2
    	</x-slot>
    	
    	<p>Este es un texto de prueba2</p>
    	
    </x-alert2>

     

  • Walter

    Walter hace 1 año

    ? Componentes

     

    Para generar un componente, por ejemplo de alerta, creamos la carpeta components en la ruta resources/views y ahí dentro haremos los archivos de blade para cada componente.

    Entonces creamos el archivo alert.blade.php conteniendo el siguiente código

    <div 
    	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
    	role="alert"
    >
      <p class="font-bold">Be Warned</p>
      <p>Something not ideal might be happening.</p>
    </div>

    Y lo llamamos desde, por ejemplo, dashboard.blade.php de la siguiente forma:

    <x-alert />

    Para configurar el contenido principal del alerta modificamos el código incluyendo {{ $slot }}

    <div 
    	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
    	role="alert"
    >
      <p class="font-bold">Be Warned</p>
      {{ $slot }}
    </div>

    Ahora podemos ocupar la variable $slot de la siguiente manera:

    <x-alert>
    	<p>Este es un texto de prueba</p>
    </x-alert>

    Para configurar el título podemos usar los atributos del componente:

    <x-alert title="Título de prueba">
    	<p>Este es un texto de prueba</p>
    </x-alert>

    Y lo recibimos en el componente haciendo uso de la directiva props:

    @props(['title'])
    
    <article 
    	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
    	role="alert"
    >
    	<h1 class="font-bold">{{ $title }}</h1>
    	{{ $slot }}
    </article>

     

    Otra forma de pasar información a los componentes es usar slots secundarios nombrados:

    <x-alert>
    	<x-slot name="title">
    		Este es el título desde el slot
    	</x-slot>
    	<p>Este es un texto de prueba</p>
    </x-alert>

    Y lo recibimos sin necesidad de la directiva props:

    <article 
    	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
    	role="alert"
    >
    	<h1 class="font-bold">{{ $title }}</h1>
    	{{ $slot }}
    </article>

    Usando todas estas formas:

    <x-alert type="info">
    	<x-slot name="title">
    		Este es el título desde el slot
    	</x-slot>
    	<p>Este es un texto de prueba</p>
    </x-alert>

    Recibimos la información de la siguiente manera en el componente:

    @props(['type'] => 'info')
    
    @php
    	switch($type) {
    		case 'info':
    			$clases = "bg-blue-100 border-blue-500 text-blue-700";
    			break;
    		case 'danger':
    			$clases = "bg-red-100 border-red-500 text-red-700";
    			break;
    		default:
    			$clases = "bg-orange-100 border-orange-500 text-orange-700";
    			break;
    	}
    @endphp
    
    <article class="border-l-4 p-4 {{ $clases }}" role="alert">
    	<h1 class="font-bold">{{ $title }}</h1>
    	{{ $slot }}
    </article>

    Si queremos usar variables en los atributos del componente:

    @php
    	$type = 'info';
    @endphp
    
    <x-alert :type="$type">
    	<x-slot name="title">
    		Este es el título desde el slot
    	</x-slot>
    	<p>Este es un texto de prueba</p>
    </x-alert>

    Si queremos pasarle un atributo, por ejemplo un id, en lugar de un valor:

    <x-alert :type="$type" id="alerta">

    Puedo recibirlo por props:

    @props(['type'] => 'info', 'id')
    ...
    <article id="{{ $id }}">

    Esta forma es poco práctica porque debemos definir todos los posibles atributos que esperamos recibir. 

    Los componentes tienen una variable llamada attributes. Si no definimos los valores enviados en props se guardarán en attributes.

    @props(['type'] => 'info')
    ...
    <article $attributes>

    Si queremos enviar un atributo de clase:

    <x-alert :type="$type" id="alerta" class="mb-4">

    Si ya definimos una clase en $attributes no podemos definir otras y se perderán los otros estilos:

    <article {{ $attributes }} class="border-l-4 p-4 {{ $classes }}" role="alert">

    Para solucionar esto:

    <article 
    	{{ $attributes->merge(['class' => "border-l-4 p-4 $classes"]) }} 
    	role="alert"
    >

    El merge combina los atributos que estamos pasando con los atributos base de clase. Otros tipos de atributos no se combinan sino que se reemplazan.

    <article 
    	{{ $attributes->merge([
    		'class' => "border-l-4 p-4 $classes", 
    		'role' => "alert"
    	]) }} 
    >

     

  • Mauricio Giraldo

    Mauricio Giraldo hace 1 año

    Victor una pregunta como haces para que te abra la vista cuando le daz click desde un modelo, alguna extension?

    • Alan Rodriguez hace 1 año

      Hola Mauricio, para eso yo utilizo las siguientes extensiones de Visual Studio Code: Laravel goto view y Laravel goto controller. Saludos