Adquiere este curso para tener acceso a todas las lecciones
Comprar curso118. Crear plantilla Admin
En este capítulo veremos como crear nuesta propia plantilla administrativa. Para lo cual partiremos de algunas plantillas de Tailwind, como es un sidebar.
8 comentarios
Inicia sesión para comentar
Comentarios:
-
Victor Arana Flores hace 1 año Destacado
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.
-
Victor Arana Flores hace 11 meses
Hola Guillermo. En este curso no usamos AdminLTE
-
-
Camilo Andres Ruiz Bernal hace 3 meses
ya voy por la mitad del curso, está muy bueno. Si consigo chamba, te hago una donacion para los cafes
-
Daniel hace 9 meses
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-
Victor Arana Flores hace 8 meses
Hola Daniel, eso no lo sabía. Muchas gracias por el aporte
-
-
Jose hace 1 año
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.
-
Victor Arana Flores hace 1 año
Hola Jose, te comparto el repo
https://github.com/coders-free/laravel-avanzado -
Jose hace 1 año
Muchas gracias Victor, todo está Ok, gran contenido en tus cursos.
Saludos
-
Jaime Salazar hace 10 meses
el archivo vendor no existe, por favor podrías cargar de nuevo el repositorio, gracias
-
Victor Arana Flores hace 10 meses
Hola Jaime, el archivo vendor no se sube al repositorio.
-
-
Danilo hace 1 año
¿Existe algún paquete de plantilla administrativa prediseñado para trabajar con Jetstream?
-
Dev_andres hace 1 año
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
-
Victor Arana Flores hace 1 año
Hola amigo, no tengo un repositorio del curso ya que es netamente teorico. Pero si gustas puedes esperar un par de días ya que estoy regrabando todo el curso y agregando nuevos temas y ahi puedo subirlo a un repositorio.
Estaré en este capítulo aproximadamente la proxima semana. -
Dev_andres hace 1 año
Gracias
-
Bernal Fuentes hace 1 año
recuerde el npm run build para que tailwind tome los estilos
-
Ing. Alexander Barajas hace 1 año
Victor buen día, no me funcionan las vistas a pesar de hacer paso a paso lo que dices, subiste ya algún repositorio para ver que puede esta pasando? Gracias.
-
Ing. Alexander Barajas hace 1 año
Ya me funciono, al parecer era una mala instalación del tailwind en el proyecto.
-
-
Christian Hernán Abanto Segura hace 1 año
Buenas, queria consultar el porque me salen unos sihnos en el cuerpo de la pagina (+++). Adjunto imagen.
-
Danilo Vega hace 1 año
Estas copiando todo el codigo, solo copia el aside
-
-
Abraham Najera hace 1 año
Hola, que pasaria si tengo un menú con multinivel? como quedaría la estructura del arreglo?
-
Victor Arana Flores hace 1 año
pues podrías crear dentro del array un elemento llamado submenu al cual le asignas tambien un array.
-
Ing. Alexander Barajas hace 1 año
Victor buen día, hice lo del submenú pero la verdad no se como leerlo, lo estoy haciendo con el componente dropdown pero no se como leer el submenu. Te agradezco me des una luz de como hacerlo por favor. Gracias por la guía.
-