Layout
Contenido del curso
Layout
Contenido del curso
José Reinaldo Duque Serna
Jose Morales Varon
Juan Guillermo Perez Cardozo
José Reinaldo Duque Serna
Jose Morales Varon
Cristian Fernando Gonzalez Paez
Miguel Angel Reyes Moreno
MAXIMILIANO JAYME DAHLQUIST
Aberto Jorge Saavedra Angel
Claudia Gomez
Diana Martinez
Alexander Agrazal
Diana Martinez
Jose Morales Varon
Aquí el style de Movements.vue
<style scoped> .movements { max-height: 100%; padding: 0 8px; margin-bottom: 14px; } .title { margin: 8px 16px 24px 16px; color: var(--brand-blue); } .content { max-height: 68vh; display: flex; flex-direction: column; gap: 8px; overflow-y: scroll; } </style>
Gran aporte!
impresionante e inspirador ver como se integra todo lo aprendido
Comparto el style de Resume/Index.vue
<style scoped> main { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } h1, p { margin: 0; text-align: center; } h1 { margin-top: 14px; color: var(--brand-green); } .graphic { display: flex; justify-content: center; align-items: center; width: 100%; padding: 48px 24px; box-sizing: border-box; } </style>
Gran aporte!
Al momento de importar los componentes, no es necesario añadir la extensión .vue Incluso, sí importas un componente llamado index.vue, sólo basta con poner el nombre de la carpeta contenedora
import Layout from "./Layout"; import Header from "./Header"; import Resume from "./Resume/"; import Movements from "./Movements";
En algunos casos es necesario así que me parece que es más recomendable sí dejar la extensión .vue
Hice un punto intermedio con la animación de movements. Al hacer click en el head sube y baja.
<template> <div class="header"> <slot name="header"></slot> </div> <div class="resume"> <slot name="resume"></slot> </div> <div class="movements" :class="{ 'movements-visible': showMovements, 'movements-hidden': !showMovements }"> <div class="head" @click="showMovements = !showMovements"> <div class="grip"></div> </div> <div class="body"> <slot name="movements"></slot> </div> </div> </template> <script setup> import { ref } from "vue"; const showMovements = ref(false); </script> <style scoped> .header, .resume, .movements { display: flex; justify-content: space-around; align-items: center; padding: 14px 0; box-sizing: border-box; } .header { position: fixed; width: 100vw; } .resume { min-height: 100vh; } .movements { z-index: 1; position: fixed; display:flex; flex-direction: column; left: 0%; width: 100vw; background-color: white; box-shadow: 0 -4px 14px #e5e5e5; border-radius: 24px 24px 0px 0px; } .movements .head { display: flex; justify-content: center; align-items: center; padding: 24px; width: 100%; box-sizing: border-box; } .movements .body { height: 75vh; width: 100%; } .movements .head .grip { width: 120px; height: 8px; background-color: #e5e5e5; border-radius: 4px; } .movements { transition: transform 0.3s ease-out; } .movements-hidden { transform: translateY(-76px); } .movements-visible { transform: translateY(-100%); } </style>
nice
¿Por qué utilizamos slots y no componentes dentro de otros componentes en el Layout?
Se podría hacer de las dos formas, pero, cómo menciono en el curso, al utilizar slots, podemos separar la lógica de cómo se posicionan los componentes (layout), de los componentes que se vayan a usar.
Por ejemplo, podríamos tener dos versiones del componente Header, y así podríamos poner cualquiera de los dos en el slot al usarlo, sin tener que modificar el componente Layout, así, mantenemos el código corto y reutilizable, porque el componente Layout nunca se tiene que "enterar" exactamente qué habrá en el slot.
Si lo hiciéramos poniendo directamente los componentes en el template del Layout, estaríamos fijando que se vea ese y solo ese componente, y si quisiéramos poder tener dos o más versiones del Header, por ejemplo, comenzaríamos a agregar mucha lógica de condicionales para decidir cuál poner.
Terminaríamos con un componente Layout demasiado acoplado al resto de los componentes, y cada que crearamos una nueva versión de Header, habría que volver a Layout y agregar más y más código condicional.
Mientras tanto, al usar slots, nos olvidamos de todas esas complicaciones y resolvemos el problema antes de que exista.
Al final es cuestión de decisiones al programar, yo esto lo aprendí en años de trabajo en la industria, pero mucha gente lo haría de la otra forma.
cómo se hace el return cuando se usa script setup
<script setup >
por que usando export default sería asi:
export default { setup() { return { } }}
En resumen, cuándo usas script setup, todo el cuerpo de ese tag es tu función script, y el export se hace automáticamente de todo el scope, así que basta declarar una variable o función, para que sea accesible cómo si le hubieras hecho return.
Para más detalles, hay una clase sobre este tema en el curso anterior a este, que es parte de esta saga: https://platzi.com/clases/2820-vuejs-componentes-composition/46970-script-setup/
Básicamente en COMPOSITION API no necesitas hacerlo, no es necesario ya que se hace automáticamente. Todo lo que esté dentro del script está disponible para poder ser usado dentro del componente. 🤩
