Entendiendo como reutilizar los componentes de Laravel Livewire, Claves
El siguiente paso o lo que vamos a trabajar aquí en esta sección Es sobre el estilo que tenemos aquí de momento en nuestra aplicación en la sección anterior nos enfocamos es en desarrollar la parte funcional pero también la parte visual es importante y forma parte de lo que es el stap Así que es lo siguiente que nosotros vamos a trabajar entonces Si revisamos cualquier formulario por ejemplo este aquí lo podemos analizar un poquito más rápido vemos aquí que tenemos un conjunto de clases con las cuales tenemos el siguiente estilo a mí realmente no me gusta mucho Siempre me molesta este espacio muerto que está aquí al lado y lo pudiéramos quitar sin problema al igual que hacemos aquí lo eliminamos pudiéramos terminar de adaptarlo pero por el enfoque del curso No quiero tampoco colocar mi estilo mi visión sobre la que ya tenga esta gente la del equipo de lw o de J stram por lo tanto yo voy a trabajar con el mismo pero es importante que también entiendas que esto lo puedes personalizar a tu gusto ya lo que es el enfoque del curso simplemente vamos a seguir los lineamientos es decir la estructura que ya tenemos aquí definida por defecto es importante también mencionar que esto es telwin básicamente un montón de dif con TailwindCSS y por lo tanto es el mismo estilo que también empleamos en otro stat como es inertia porque a la final esa parte del cliente es otra vez lo mismo que si lo presentamos con Vue o lo presentamos con con Blade es indiferente si estamos trabajando con telwin Entonces si ya vistes el de inertia o tienes que saber que es a la final el mismo estilo Claro está otra vez aquí vamos a trabajar es con la parte de Blade y TailwindCSS sería Entonces ya por aquí por ejemplo podemos ver un formulario con el cual vamos a trabajar y con el cual vamos a empezar a adaptar todo esto que tenemos acá y es simplemente replicar lo que ya tenemos una vez explicado esto yo lo que te recomendaría es que a medida que vaya vayamos adelantándonos en cada clase tú hagas estas implementaciones es decir aquí lo que tenemos que hacer es agarrar esa estructura que habías antes le di con el col de tamaño seis y vayas aquí tu contenido a la final y también esto que teníamos aquí este bloque feo ocupando aquí espacio y vayas haciendo esas adaptaciones aquí en tu desarrollo por lo tanto sería un reto para ti prácticamente toda esta sección Claro está que yo también voy a implementarlas porque si no no tiene sentido y para que te quede ahí también la implementación por si tienes alguna duda Pero es importante que entiendas eso que esto es o te recomiendo mucho que empieces a implementarlo tú por tu cuenta ya que de esta forma también vas a como quien dice conocer un poco más lo que nos ofrece El Stack Como quien dice de la mano entonces sin más que decir voy a comenzar aquí con la implementación aquí otra vez vamos esa parte duplicar el contenido que ya tenemos Así que simplemente Buscar aquí Bueno estos son los componentes lo que ya tenemos ahorita no tenemos que sacar ninguno en particular ya que estamos reutilizando una estructura existente vamos a buscar aquí alguno que sea a ver si los encuentro aquí Tenemos uno para login Me gustaría saber dónde está este el de profile aquí está profile tenemos show tenemos Este no sé cuál es para ver este Sería bueno otra forma es copiar esto cont control shi F debe estar por aquí y no encontro nada que desgracia algo deben encontrar Ahí está lo que pasa es que tiene estatus este Slash por Ah para el la com aquí lo tenemos Y esta es la estructura que te digo que vamos a conocer Entonces qué es lo que tenemos aquí aquí tenemos un formulario section aquí Fíjate que cambia un poquito Esto sí sería un cambio que tenemos que hacer ya que por aquí tenemos es un formulario típico que es como funciona lare en este caso como quien dice excluyendo todo lo que ya tenemos pero otra vez la idea es emplear esta estructura existente y Qué es esta estructura simplemente es componentes componentes del Livewire en este caso ya tenemos uno llamado Aquí está en el cual fíjate qué es lo que hace él recibe el prot el llamado sumi Recuerda que los prod es para pasar atributos de manera externa en este caso es para indicar A qué método tiene que llamar ya que bueno si revisas el código fuente vas a encontrar
que lo que es la clase controladora entiéndase el controlador lo que no es el blade vamos a tener ahí un método llamado update profile information que es el que se llamaría cuando le pegamos un click al botón de submit de este formulario entonces en vez de colocar esto que como que dice sería el enfoque clásico que tuviéramos que seguir si reutilizamos este componente tenemos que cambiar este Wi submit prevent por el submit simplemente por lo demás son slot que es para colocar aquí lo que es el título y demás que son el resto los componentes que tenemos acá y ya que este lo tenemos aquí abierto lo puedes buscar sin problema por aquí vas a ver el bueno section Esto otro componente que otra vez va a ser un section con un estilo y aquí tenemos los slot que Recuerda que son simplemente partes en donde nosotros colocamos el contenido al igual que funciona en Vue y frameworks del lado de cliente similares aquí tenemos este apartado para colocar algún contenido que queramos cambiar por ejemplo aquí pudieras colocar una imagen más texto lo que pasa es que no tengo una imagen a la mano y aquí puedes ver que va a aparecer entonces es para colocar como quien dice un contenido predefinido en cierta renglón de nuestra página qué más tenemos acá Bueno a través el slot para el formulario que sería este bloque que se encuentra aquí definido aquí puedes ver lo fácil que es cambiar esto porque si no te gusta nada de esto lo puedes eliminar a secas y por aquí también le cambie los espaciados en este caso ya no sería una columna de dos o de TR que es lo que tenemos acá viera que ver bien que es lo que está haciendo no haría falta emplear un grid ya que todo se emplearía en un mismo bloque pero otra vez yo no lo voy a cambiar para respetar un poquito el estilo del equipo de Livewire bien por lo demás aquí no tenemos mucho más que hacer aquí está preguntando por un condicional que se encuentra en una clase y ya es lo que es el formulario el X Label que no es lo que estamos empleando Aquí está aquí estamos empleando campos de html y esto si revisamos otra vez Si buscas Label por acá Qué es lo que tienes que hacer empieza a buscar vas a ver que simplemente es el elemento html normalito pero con algunas clases agregadas Recuerda que el merch lo que hace es que tú le puedes suministrar más clases y lo va a mezclar con lo que ya tenemos aquí que es el estilo predefinido por defecto pero claro aquí tienes que tener presente de que si por ejemplo le pasas text md entonces va a colisionar con esta y solamente se va a mostrar una o la otra Puede que sea la sm o la md dependiendo En qué parte de la hoja de estilo se encuentra ya que Recuerda que las oj de estilo es en cascada es decir el ccs va a mostrar el Bueno ella tiene varias definiciones pero por ponerlo en términos claros o sencillos voy a buscar aquí uno Bueno aquí no tengo nada Claro aquí para ver No no tengo nada si por ejemplo aquí tuviéramos el dmd y aquí el de El de sm en este el D smm algo así no importa lo que tengamos acá la clase que tuviera prioridad sería esta voy a colocar aquí por ejemplo blot sobre esta porque esta se encuentra definida después hay otras como quien dice condiciones que se colocan por ejemplo el nivel de de la regla es decir si tienes muchos muchos elementos aquí anidados pero como es Talwind no aplica mucho en esto porque a la final son clases de un solo nivel Entonces es bueno es eso básicamente otra vez te recomendaría que vayas aquí analizando poco a poco todo esto lo que tenemos aquí en el bueno poco a poco en esto por ejemplo en este llegamos desde acá estamos evaluando Este componente de aquí seguimos un poco la navegación te recomiendo que vayas haciendo eso y a la final vas a llegar que es un elemento html normalito con un montón de clases de terwin Entonces yo vo a comenzar a hacer la implementación en este video pero ya se me alargó mucho la introducción vamos a mejor dejarla para la siguiente Así que vamos allá.
Curso Laravel Livewire - Empleando los componentes en nuestros propios desarrollos
Aclarado un poco el funcionamiento vamos a empezar aquí a trabajar con todo esto voy a cerrar todo esto ya en este punto ya yo Considero que ya tú hiciste alguna navegación para ver cómo están formados sus elementos Entonces vamos a simplemente emplearlos así que por aquí vamos a adaptar un poco lo que es el diseño voy a para ver voy a duplicar este al menos ahorita esto ya lo tiene este la sección anterior Pero ahorita lo voy a duplicar por si cambió algo y lo quiero chequear luego lo elimino si todo va bien entonces Bueno ya por aquí tenemos esto los mensajes de acción vamos a ir a lo que sería el formulario Así que aquí colocamos es voy a ver si puedo seleccionar el de abajo buen está un poquito complicado Bueno aquí puedo le colocamos un x porque es un componente formulario section aquí lo tenemos y recordemos que solamente le pasamos un prop Así que quitamos esto y le colocamos directamente submit en este caso submit y submit que es el nombre del método en la clase por lo demás aquí un poco lo mismo voy a seleccionar todo esto con control d Bueno comand si estás en Mac y le colocamos aquí una x adelante Perdón una x y un con el input similar seleccionamos el input con el Def fill no sé qué estilo va a agarrar pero aquí hago lo mismo y ya con esto tenemos para ver me fui Bueno aquí ya tenemos un bonito error debe ser que me comí algo por [Música] ahí Ah es que no lo cerré claro esto hay que cerrarlo también ya que estoy aquí creo que es Acá hay que está dando problemas y parece que Okay título no está definido claro aquí ya puedes ver que es otro tipo de error ya sería el del formulario Aquí es importante que lo cierres bueno Esa sería una pequeña diferencia ahí porque es componente todos los componentes tienen que tener o la etiqueta de apertura y cerrado o el cierre aquí a nivel del local del de la misma definición Entonces ya nos está pidiendo aquí el resto de las cositas me V a permitir copiar y pegar esto as me ahorro el trabajo y lo colocamos aquí dentro sería si aquí dentro voy a pegar un momentico aquí ahora bueno otro error el del formulario es cuestión de ir viendo y y cambiando aquí le podemos colocar category aquí a ver si me sale el de Loren voy a quitar esto Loren Ahí está bueno texo de relleno ahí coloca lo que tú quieras como te digo me parece un poquito inútil pero ahí vamos entonces este formulario que nos está pidiendo acá Ah claro el falta es el slot del formulario que sería todo esto el importante voy a cortar esto Esto va en el action pero lo voy a cortar de igual manera y aquí colocamos un slot a ver si aparece prop y su nombre es formulario que es el que nos está chillando ahí y lo colocamos cortamos el botón que también tiene que ser un x Button bajamos acá voy a identar ahí lo tenemos Así es que tiene que quedar esto en el slot de formulario tal cual puedes ver y por aquí colocamos lo que sería otro slot y este se llama como actions esto otra vez lo puedes ver por acá control F actions que sería para la parte de las acciones inclusive tenemos ahí unos definidos para ver este es el mensaje y este es el otro esto es otra forma Ya esto es de de como quien dice de Nativo de Laravel Y es que si dejas ahí un valor una estructura por defecto entonces esa es la que se mantendría y si no empleamos la de nosotros actions y aquí coloco comand un x veamos ahora mira que ya Bueno no es que esté bonito pero al menos tenemos algo relativamente elegante Todavía falta arreglarlo un poco pero ahí vamos bien aquí el siguiente problema que es lo más fastidioso es la parte aquí de la columna y cómo se encuentra ordenado todo esto ya que canalizamos esto se encuentra aquí ordenado por grillas aquí lo puedes seleccionar y puedes ver cómo se encuentra definido Y esto es algo de Talwind Pero bueno lo que está haciendo es utilizar el sistema de grillas que tenemos nativamente en ccs su nombre nos indica bueno la estructura nos indica bastante él tiene una grilla de se columnas creo que puede tener hasta 12 y el Gap que es el padding de las columnas por ejemplo si quieres colocar a uno vas a ver que tienes un poquito más de espacio Entonces qué es lo que tenemos que hacer aquí definir que cada uno de nuestros elementos tenga el espacio que nosotros consideramos Y eso lo que puedes ver justamente para ver si encuentro algo por aquí Este no es formulario formulario información para ver aquí Ok Voy a buscar este [Música] de encuentro control F Aquí está aquí está el Conan de tamaño 6 qué es lo que hace este tamaño 6 creo que tenemos 12 ya lo vamos a ver pero es indicar que ocupar creo que está ocupando más de seis pero va a ocupar seis carriles porque aquí tiene menos espacio entonces son 10 ahorita revisamos entonces podemos otra vez emplear esta estructura Así que vamos a volver acá y para cada uno de nuestros elementos voy a cortarlo escribo aquí un div punto coloco call spam de6 punto sm y ahorita te digo lo que es el sm que es de Win a ver si sale col spam de4 de igual manera ahorita lo vemos en la práctica si colocamos esto al menos uno se ve bien este todavía sigue perdido la vida voy a colocar aquí 10 porque no estoy seguro cuántos tiene creo que hasta 10 sería No creo que ni siquiera tiene 10 Aquí está no s si tiene 10 coloco 12 lo que pasa es que el resto le está ocupando espacio Bueno ahorita vemos eso y lo que tenemos que hacer es exactamente lo mismo que tenemos acá Aquí cierro el div voy a pegarlo aquí primero y aquí cierro el di esta Sería para la imagen también pudiéramos colocarla Aunque lo voy a colocar como parte de la de arriba lo teng tengo y puedes ver que tiene un mejor estilo ahora por qué me aparece tan chiquito Aquí le dejo mira que le dejé el 10 No mentira está bien lo que pasa que esto no está ocupando todo el ancho que ellos aquí le habrán definido with full esto creo que se lo colocaron ellos aquí de manera manual control F with full Aquí está aquí sucede lo que te comentaba de igual manera lo voy a comentar otra vez aquí está empleando un x input que si lo buscamos input Blade sería justamente este ella tiene unas clases predefinidas pero entre ellas no se encuentra la de qu full esto es Wi otra vez full ese Wi 100% si tienes dudas sobre alguna clase puedes o o Buscar aquí la documentación oficial Twin ccs ya que son muchas Esto no se pierde en algún día geted por aquí buscas la parte de W 100 Perdón full y va a indicar que 100% ahí está la maté Perdón er zo que le quería dar acá y es eso o también puedes verlo aquí en el por acá clic derecho seleccionas aquí tiene las clases a veces se pierden un poco porque tien muchos anidamiento por ahí lo vas a encontrar Ahí está y bueno puedes activar o activar para ver qué es lo que hace en caso de que tengas dudas todavía con la definición pero lo que está haciendo es hacer el merch que te comentaba antes esta clases la va a agregar Claro que sí pero también le puedes pasar clases adicionales para personalizar el estilo que es lo que está haciendo Entonces Bueno ya que funciona así O puedes modificar esto también recuerda que puedes modificar este yo no lo hago por cuestiones del curso porque no quiero que como quien dice tocar mucho la estructura del Livewire y Prefiero hacer los cambios acá pero si es un proyecto real pudieras modificar estos atributos perfectamente de tus componentes todo lo que está fuera de la carpeta vendor lo puedes tocar sin problema Aunque otra vez como quien dice El pequeño problema que podíamos tener Es que hacer futuro actualizan Livewire y cambian algunas cosas acá entonces tuvieras que hacer ese cambio de manera manual también Para no perder tu trabajo entonces por acá voy a tomar este bueno otra vez un poco lo mismo selecciona aquí control d control d y vamos a colocarle las clases Class with full también porque quiero que ocupe todo el ancho y ahí lo puedes ver y no este no es el mío Perdón ahí lo puedes ver ahora esto tiene un tamaño de 10 y está ocupando el 100% qué es lo que puedes ver aquí está el input por acá Ahora aquí No fíjate que nos quedan dos grillas más 1 2 3 solamente tiene Ah claro porque la grilla es de seis la Grill es de seis aquí para ver ella aquí la la columna es de seis Entonces está ocupando aquí le dejé fue el spam a 10 aquí tenemos es el con spam de se Okay ya está aquí analizando un poquito el digo Aquí tenemos Son seis columnas o Bueno mejor dicho seis grillas Esto lo puedes ver fácilmente ya que aquí dice gr col seis si nos posicionamos aquí aquí puedes ver qué es lo que hace el navegador sobre la de arriba la que dice gr call 6 y les puedes ver 1 2 3 4 5 6 que son los espaciados que tenemos ahí como te digo Este es el espaciado puedes colocarle para probar uno vas a ver que ahora todo aparece más pegado y las que son las cositas en rosado las líneas es el padding entre comillas de las de las grillas entonces aquí yo estoy indicando que de las seis ocupe 10 claro como no hay más eh No pasa nada pero ni siquiera llega ahí porque la que se está mostrando es la del spam de cu esto Recuerda que lo del sm significa que es el el media query en este caso aquí la puedes ver que esta es la que se está utilizando por el tamaño mínimo definido es decir que por defecto sería de tamaño cuatro aquí para que lo vean más claramente pudieras si quieres que ocupe el 100% del espacio pudieras tomar esto que tampoco sé por no ocupa el 100% bueno no no sé por qué no lo colocaron así en el estilo por defecto Supongo que para que no aparezca tan estirado y vas a ver que ocupa el 100% del espacio claro puedes colocarle más pero como no hay más espacio no va a ser mucho Fíjate que queda ahí es cuestión de trabajar con el espacio que tú tenías ahí definido si le quieres colocar por ejemplo tres entonces aparecería una al lado del otro cosa que también queda bastante bien puedes jugar un poquito con eso ya jugar aquí con el de arriba no lo puedes porque este se encuentra aquí definido entonces tuvieras que cambiar este Y si cambias este puedes romper un estilo por ahí pero bueno lo puedes hacer pero yo no lo voy a hacer y el de 10 en caso de que te preguntes cuándo aparece es cuando no se cumple el media query el mediaquery se va a ejecutar Hasta que el tamaño de la pantalla tenga al menos 640 píxeles Entonces si venimos acá y le encogemos por ejemplo aquí tiene 375 píxeles ya puedes ver que se está aplicando el que no tiene elsm ya el smm no se encuentra definido Y si crecemos aquí un poquito voy a colocarle aquí el modo responsive esta por aquí vas a ver que cuando pase de los 620 creo que es que tenía ahí definido 640 ahí está se aplica el medio aquar y así funciona esto y eso es lo del sm en caso de que tengas ahí alguna duda entonces bueno es eso básicamente ya creo que con esto completamos lo que es el estilo para este componente y esta parte del espaciado Y eso creo que tampoco lo definí aquí eso lo vemos un poco más adelante que es colocarle ahí algunos containers y márgenes Pero bueno no quiero mezclar las cosas ya que como te indicaba aquí la idea es reutilizar un poquito la estructura que ya tenemos actualmente y de momento no cambiarla mucho para bueno que se entienda esto un poco mejor y en resumen recuerda que aquí tenemos las etiquetas la del título y description que es para este bloque ahí puedes colocar buen hac texo inútil el actions que es para colocar ahí el botón el formulario que es para el formulario y el submit por lo demás utilizamos son componentes aquí x input y poco más que decir y la estructura que ya tenemos ahí en base a grillas así que pues nada ya con esto vamos a la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter