Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:php:frameworks:laravel:uso_de_vistas [2025/02/12 16:00] – [Usando vistas en los controladores] tempwin
+++ informatica:programacion:php:frameworks:laravel:uso_de_vistas [2025/03/03 14:24] (actual) – [Crear plantillas para las vistas] tempwin
@@ Línea 139: / Línea 139: @@
 ===== Blade: motor de plantillas =====
-[[https://laravel.com/docs/10.x/blade|Blade]] es el motor de plantillas que incluye Laravel
+[[https://laravel.com/docs/11.x/blade|Blade]] es el motor de plantillas que incluye Laravel
 ==== Variables ====
@@ Línea 241: / Línea 241: @@
 </code>
+==== Componentes ====
+Cuando queramos definir código que se repite en varios puntos de nuestro proyecto, Blade nos permite la creación de componentes.
+Para organizarlo, creamos una carpeta ''resources/views/components'' y creamos un fichero con un nombre significativo. Por ejemplo, si queremos crear un componente para las alertas, creamos un fichero ''alert.blade.php'':
+<code html>
+<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
+    <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
+</div>
+</html>
+</code>
+A partir de este momento, cada vez que queramos llamar a ese componente, utilizaríamos la etiqueta ''<x-nombre-del-archivo>'':
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
+         <div class="max-w-4xl mx-auto px-4">
+            <x-alert></x-alert>
+        </div>
+    </body>
+</html>
+</code>
+Para tener un contenido variable en un componente, tenemos que crear una variable en el lugar que va a cambiar:
+<code html>
+<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
+    <span class="font-medium">Info alert!</span> {{ $slot }}
+</div>
+</html>
+</code>
+Y le pasaríamos el contenido en la etiqueta de la vista donde la usamos:
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
+         <div class="max-w-4xl mx-auto px-4">
+            <x-alert>
+                Contenido de la alerta
+            </x-alert>
+        </div>
+    </body>
+</html>
+</code>
+Cuando queremos usar más de una variable, tenemos que utilizar la etiqueta ''<x-slot>'':
+<code html>
+<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
+    <span class="font-medium">{{ $title }}</span> {{ $slot }}
+</div>
+</html>
+</code>
+Y en la vista:
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
+         <div class="max-w-4xl mx-auto px-4">
+            <x-alert>
+                <x-slot name="title">
+                Título de la alerta
+                </x-slot>
+                Contenido de la alerta
+            </x-alert>
+        </div>
+    </body>
+</html>
+</code>
+También podríamos añadir atributos:
+<code html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+        <!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
+         <div class="max-w-4xl mx-auto px-4">
+            <x-alert type="info">
+                <x-slot name="title">
+                Título de la alerta
+                </x-slot>
+                Contenido de la alerta
+            </x-alert>
+        </div>
+    </body>
+</html>
+</code>
+En el componente (''alert.blade.php''):
+<code html>
+@props (['type'])
+@php
+    switch ($type) {
+        case 'info':
+            $class = "text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400";
+            break;
+        case 'danger':
+            $class = "text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400";
+            break;
+        case 'success':
+            $class = "text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400";
+            break;
+        case 'warning':
+            $class = "text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400";
+            break;
+        case 'dark':
+            $class = "text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400";
+            break;
+        default:
+            break;
+    }
+@endphp
+<div class="p-4 mb-4 text-sm {{ $class }}" role="alert">
+    <span class="font-medium">{{ $title }}</span> {{ $slot }}
+</div>
+</html>
+</code>
+==== Componentes de clase ====
+Con los componentes de clase podremos separar la lógica de la vista. En el apartado anterior, en ''resources/views/components/alert.blade.php'' hemos colocado lógica para establecer un estilo CSS según ciertas variables.
+<code>
+php artisan make:component Alert2
+</code>
+Se creará ''app/View/Component/Alert2.php''. Esta clase está renderizando una vista que está en ''resources/views/components/alert2.blade.php''.
+Ahora moveremos la lógica de ''resources/views/components/alert.blade.php'' a ''app/View/Component/Alert2.php'':
+<code php>
+</code>
+Y en la vista (''resources/views/components/alert2.blade.php'') tendremos:
+<code php>
+<div {{ $attributes->merge(['class' => 'p-4 text-sm ]
+    <span class="font-medium">{{ $title ?? 'Info Alert'
+</code>
+En la vista ''home.blade.php'', podríamos llamar al componente Alert2 de la siguiente manera:
+<code php>
+// ...
+<x-alert2 type="danger" class="mb-4">
+    <x-slot name="title">
+        Título de la alerta
+    </x-slot>
+    Contenido de la alerta
+</x-alert2>
+</code>
 ===== Crear plantillas para las vistas =====
 Para cuando tengamos componentes que se repitan.
-Creamos, por ejemplo, ''reseources/views/layouts/master.blade.php'':
+<WRAP center round info 60%>
+Parece ser que lo habitual no es hacer esto para la creación de plantillas sino usar componentes.
+</WRAP>
+Creamos, por ejemplo, ''resources/views/layouts/master.blade.php'':
 <code html5>