Crear plantilla Admin
Comprar curso

120. 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.


7 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 11 meses 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 4 meses

      Hola Guillermo. En este curso no usamos AdminLTE

  • Daniel

    Daniel hace 1 mes

    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 4 semanas

      Hola Daniel, eso no lo sabía. Muchas gracias por el aporte

  • Jose

    Jose hace 5 meses

    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 5 meses

      Hola Jose, te comparto el repo

      https://github.com/coders-free/laravel-avanzado

    • Jose hace 5 meses

      Muchas gracias Victor, todo está Ok, gran contenido en tus cursos.

      Saludos

    • Jaime Salazar hace 3 meses

      el archivo vendor no existe, por favor podrías cargar de nuevo el repositorio, gracias 

    • Victor Arana Flores hace 3 meses

      Hola Jaime, el archivo vendor no se sube al repositorio.

  • Danilo

    Danilo hace 8 meses

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

  • Dev_andres

    Dev_andres hace 10 meses

    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 10 meses

      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 10 meses

      Gracias

    • Bernal Fuentes hace 10 meses

      recuerde el npm run build para que tailwind tome los estilos

    • Ing. Alexander Barajas hace 6 meses

      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 6 meses

      Ya me funciono, al parecer era una mala instalación del tailwind en el proyecto.

  • Christian Hernán Abanto Segura

    Christian Hernán Abanto Segura hace 11 meses

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

    • Danilo Vega hace 11 meses

      Estas copiando todo el codigo, solo copia el aside

  • Abraham Najera

    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 6 meses

      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.