Components - Layout

Reny Ramos • December 2, 2020

laravel components layout programming

Usualmente para el desarrollo de aplicaciones se trabaja sobre una plantilla o layout base la cual a su vez puede estar compuesta por varias vistas parciales, inclusive se puede tener varias plantillas para diferentes secciones, al final lo importante es tener algo sobre lo que trabajar de lo cual se extiende y se modifica según sea necesario, sobre todo esto se encuentra una explicación bastante detallada en la documentación oficial.

Las mejoras realizadas sobre la parte de componentes en las ultimas versiones, ha permitido que sea mas fácil y cómodo trabajar con dichos componentes, lo cual abrió las puertas para nuevas aplicaciones, entre ellas el uso de componentes para el layout, lo cual sera el tema de hoy.

Comenzaremos con lo básico, la creación del archivo, en esta parte realmente no hay una regla como tal para el nombrado y ubicación de los archivos (fuera del hecho de que sera dentro de views/components, y las guidelines de spatie, para el resto toca usar el sentido común).

Para este caso creare mi archivo principal app.blade.php dentro de la carpeta components/layouts, dicho archivo contendrá la base del html y estará conformado por slots por cada seccion que se requiera, en cuanto a secciones o slots, estas variaran dependiendo del proyecto, de momento utilizare las mas comunes para mi:

Como nota adicional diré, que aun si estamos trabajando con componentes no tenemos porque huir de practicas anteriores como secciones y stack, ya que la idea es crear algo útil y cómodo para trabajar, no volvernos religiosos sobre un nuevo paradigma, es por eso que decidí agregar stack para js y css en el template.

Tomando todo eso en cuenta, el esqueleto de nuestra plantilla base quedara mas o menos asi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{ $meta ?? '' }}
    <title>{{ $title ?? config(‘app.name’) }}</title>
    @stack('style')
    {{ $style ?? '' }}
</head>
<body>
    {{ $body }}
    @stack('script')
    {{ $css ?? '' }}
</body>
</html>

Dentro de la plantilla solamente $body sera requerido, todo lo demás sera opcional, e inclusive colocamos el nombre de la app como default para titulo de la pagina, ya con esto estaríamos cubriendo lo mínimo necesario para que se utilizable. La vista resultante se puede ver en el siguiente gist, y la implementación de la misma en el repositorio de digimon.

En el siguiente post hablare sobre creación de add-on con componentes, una idea con la cual he estado experimentando y que me ha parecido bastante útil.