118. Crear plantilla Admin

En este capítulo aprenderás cómo crear tu propia plantilla administrativa para tu proyecto en Laravel 10. Para ello, utilizaremos algunas plantillas de Tailwind CSS, como el sidebar, para construir una interfaz de usuario atractiva y fácil de usar.

Primero, crearemos un archivo de diseño principal que contendrá la estructura básica de nuestra plantilla, incluyendo la barra de navegación y el contenido principal. Utilizaremos Tailwind CSS para estilizar nuestro diseño y agregar elementos de diseño como fuentes, colores y márgenes.

A continuación, integraremos el diseño principal en nuestras vistas de Laravel utilizando Blade, el motor de plantillas predeterminado de Laravel. Podemos crear secciones en nuestras vistas para incluir contenido específico, como formularios o tablas, y extender la plantilla principal para que se aplique a todas nuestras vistas.

Finalmente, agregaremos funcionalidades adicionales a nuestra plantilla, como la capacidad de cambiar el tema o ajustar la configuración de la interfaz de usuario. También podemos agregar componentes interactivos, como ventanas modales y paneles deslizantes, para mejorar la experiencia del usuario.

En resumen, crear nuestra propia plantilla administrativa es una excelente manera de personalizar la interfaz de usuario de nuestro proyecto en Laravel 10. Con la ayuda de Tailwind CSS y Blade, podemos crear una interfaz de usuario atractiva y fácil de usar que se adapte perfectamente a nuestras necesidades.

ya voy por la mitad del curso, está muy bueno. Si consigo chamba, te hago una donacion para los cafes

Hola Victor, gracias por compartir. Otra forma de evitar el parpadeo del elemento en el minuto 37:20 es usando la directiva x-cloak de Alpine, la documentación oficial describe esa directiva para abordar esos inconvenientes:

"A veces, cuando estás usando AlpineJS para una parte de tu plantilla, hay un "blip" donde podrías ver tu plantilla no inicializada después de que la página se carga, pero antes de que Alpine se cargue.

x-cloak aborda este escenario ocultando el elemento al que está unido hasta que Alpine esté completamente cargado en la página."

Por lo tanto el elemento queda así:

<div x-cloak x-show = "open" x-on:click = "open = false" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30 sm:hidden"></div>

Referencia de la directiva:

https://alpinejs.dev/directives/cloak

Hola Victor , visualicé que hace un par de meses habías indicado que subirías a un repositorio el código de este proyecto , quería saber si aun estaba ya que quiero revisar algunas cosas con mi codigo que no me cuadran no me stá abriendo el sidebar y tengo el código igual, quedo atento saludos cordiales.

¿Existe algún paquete de plantilla administrativa prediseñado para trabajar con Jetstream?

Hola, Maestro de casualidad tiene un repositorio con el código de esta clase? Para revisar en que estoy fallando porque con tailwind no logro llegar al resultado del video

Buenas, queria consultar el porque me salen unos sihnos en el cuerpo de la pagina (+++). Adjunto imagen.

Hola, que pasaria si tengo un menú con multinivel? como quedaría la estructura del arreglo?