Uso práctico de componentes y slots de Blade en Laravel

Es común trabajar las vistas de Laravel usando layouts y secciones de Blade, pero hay una forma diferente de trabajar usando componentes de Blade que nos ayudan a crear elementos que podemos reutilizar en las vistas, sin necesidad de repetir código a través de toda la aplicación. En el siguiente video aprenderás cómo trabajar con componentes de Blade para crear layouts dinámicos:

Notas

Por Clemir Rondón.

El componente Styde\Html te permite crear formularios de una manera más simple y rápida. Es una extensión del componente Laravel Collective pues te permite además crear: menús, grupos de checkbox y radios, mensajes de alerta, manejo de roles, entre otros. Puedes ver los tutoriales de cómo instalar y trabajar con este componente:

Una de las ventajas de Styde\Html es que puedes crear nuevos temas según el framework de CSS que estés usando en tu proyecto. Por defecto viene con Bootstrap 3, pero a través de su archivo de configuración config/html.php puedes configurar la variable theme y especificar y configurar un tema con un framework de CSS diferente (por ejemplo bootstrap4 el cual es soportado actualmente).

Si ya eres parte de Styde, participa en el canal #open_source de nuestro Slack en el desarrollo de la nueva versión de Styde\Html:

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Con Blade podemos crear layouts dinámicos mediante una variable que compartimos a todas las vistas como vimos en el tutorial Compartir datos entre vistas de Laravel Blade con View::share.

Los componentes de Blade son una funcionalidad agregada en la versión 5.4 de Laravel; de ella hablamos en la lección del curso de novedades Componentes y slots en Laravel 5.4. Esta funcionalidad permite trabajar con secciones de una vista como componentes reutilizables, lo cual nos da flexibilidad para evitar la redundancia de código y que este sea más limpio.

Para crear un componente Blade simplemente creamos una vista, como recomendación en un directorio especial llamado components para distinguirlas de los otros tipos de vistas. Esta vista contiene los elementos HTML que queremos reutilizar.

Por ejemplo para crear nuestro componente card de Bootstrap 4 creamos un archivo llamado card.blade.php en el directorio components con lo siguiente:

<div class="card">
    <div class="card-header">{{ $header }}</div>
    <div class="card-body">{{ $body }}</div>
</div>

Entonces para usar el componente usamos la directiva @component de Blade pasándole como argumento la ubicación del componente por ejemplo @component('components.card') y además cerramos en el lugar adecuado con la directiva @endcomponent

Adicionalmente, debemos usar las directivas @slot y @endslot para indicar las variables y el contenido que queremos agregar a la vista del componente. El contenido a inyectar al componente a través de slots puede ser un simple texto como el título de un formulario o HTML como el cuerpo del formulario.

Si es texto puedes usar la directiva @slot en línea, es decir, pasando el contenido como segundo argumento, por ejemplo:

@component('components.card')
    @slot('header', 'Sign Up')
@endcomponent

Por otro lado si el contenido contiene varias líneas entonces usas la directiva @slot de la siguiente manera:

@component('components.card')
    @slot('body') 
        // Aquí 
        // va el
        // contenido
    @endslot
@endcomponent

De esta manera podemos crear y usar componentes propios adaptados a una aplicación de una manera práctica y sencilla.

Ahora para trabajar con componentes dinámicamente podemos definir en una variable el componente que queremos usar y dependiendo del contenido o la estructura del HTML que queremos mostrar llamamos a un componente u otro, haciendo uso del método View::share.

Por ejemplo, usamos un archivo de configuración para definir la variable que controlará el componente a usar y siguiendo el caso del video trabajamos con la variable panel-component que puede tener el valor panel (cuando estamos usando Bootstrap 3) o card (cuando estamos usando Bootstrap 4) y con el método View::share enviamos una nueva variable panelComponent a la vista y su valor (la ubicación del componente generada dinámicamente) de esta manera:

view()->share('panelComponent', 'components.'.config('html.panel-component'))

Entonces, teniendo en el directorio components tanto el archivo card.blade.php y panel.blade.php cada uno con el HTML según la versión de Bootstrap se mostrará en la vista el componente que se haya definido en el archivo de configuración.

Aunque no es algo típico que necesites soportar 2 versiones de Bootstrap en un mismo proyecto, con estos sencillos trucos podrías tener un proyecto que soporte multiples temas y de cualquier manera puedes ver el poder de Blade y Laravel para re-usar código.