El botón para agregar
Contenido del curso
El botón para agregar
Contenido del curso
José Reinaldo Duque Serna
Josue Cerron Tuesta
José Reinaldo Duque Serna
Josue Cerron Tuesta
Julian David Alzate Cuervo
Juan Guillermo Perez Cardozo
daniel alejandro diaz morales
SEG TI
Jose Alejandro Pantoja Giraldo
Comparto el style de Modal.vue
<style scoped> .modal { z-index: 2; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: white; } .head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 24px; box-sizing: border-box; } p { margin: 0; font-size: 1.5rem; color: var(--brand-blue); } </style>
Heroe!
Aquí el style de Action.vue
<style scoped> button { color: white; font-size: 1.25rem; background-color: var(--brand-blue); border: none; width: 100%; padding: 24px 60px; border-radius: 60px; box-sizing: border-box; } form { font-size: 1.24rem; width: 100%; } form .action { padding: 0 24px; } .field { display: flex; justify-content: space-between; flex-direction: column; padding: 16px 24px; } label { margin-bottom: 8px; } input, textarea { font-size: 1.24rem; border: 2px solid var(--brand-blue); border-radius: 8px; padding: 8px; } input[type="number"] { text-align: right; } .radio-label { display: flex; align-items: center; margin-top: 8px; } .radio-label span { margin-top: 4px; margin-left: 8px; } input[type="radio"] { appearance: none; width: 1.24rem; height: 1.24rem; color: var(--brand-blue); border: 2px solid var(--brand-blue); border-radius: 50%; } input[type="radio"]:checked { background-color: var(--brand-blue); } </style>
Gracias bro!
Los slots son un mecanismo de Vue JS que sirve para insertar contenido HTML dentro de los componentes. Es decir, con los props puedes pasar objetos y variables javascript a los componentes y con los slots puedes insertar contenido HTML dentro de otros componentes.
vamos bien, como dijo la profe el teleport es mas por practicar su uso.
si quiero agregar 3 modales en una vista principal ?
En mi componente Modal decidí pasar el nombre de titulo como props, para que no quede amarrado desde el componente, y cada que se reutilice, se defina el nombre o titulo cuando se llama desde actions.
El teleport es una chulada.
