Components - Stack
Reny Ramos • December 2, 2020
laravel components layout programmingContinuando con el post anterior, la idea de tener una plantilla general es que tenga solo el código y librerías JS que serán necesarias en todas las vistas, y que desde cada vista se puedan incluir las librerías o código extra necesario, esto es muy importante para mantener las vistas lo mas ligeras y limpias posibles.
La idea aquí sera, que a partir de una vista principal que llama a los demás componentes podamos incluir librerías y código JS, ademas de hojas de estilo, utilizando para ellos componentes, para así poder administrar esto de una forma mucho mas cómoda, sencilla y visual.
Para crear cada uno de estos componentes lo primero es visitar la pagina oficial y comprobar en la documentación que código JS y estilos necesita para funcionar, ya con esto se crea el archivo el cual hará push a los stack correspondientes y estará listo para su uso.
Ya que realmente no es muy complicado iré directo a mostrar 2 ejemplos: Laravel Livewire y Select2, y como quedaría la vista que los incluye:
Funcionalidades (views/components/layouts/partials)
addSelect2.blade.php
@push('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
@endpush
addLivewire.blade.php
@push('style') @livewireStyles @endpush @prepend('scripts') @livewireScripts @endprepend
Vista (views/search)
index.blade.php
<x-layouts.app title='Busqueda sencilla'>
<x-slot name="body">
<div class="d-flex justify-content-center">
<div class="card col-6">
<div class="card-title">Busqueda sencilla</div>
<div class="card-body">
<livewire:digimons.search>
</div>
</div>
</div>
</x-slot>
<x-layouts.partials.addLivewire/>
<x-layouts.partials.addSelect2/>
</x-app>
En teoría suena algo muy simple y quizás no se le ve mucho el uso, pero en la practica es cuando realmente se puede ver como mejora el código, haciéndolo mas corto y entendible, para ver esto en efecto pueden ir al repositorio de DigiSearch, donde aplique lo aquí mostrado.