Mes: febrero 2023

Es común requerir que nuestra SPA (Single Page Application) requiera destinar espacios para ser llenados de forma dinámica o dependiendo de alguna condición lógica, para ello podemos usar los Slot y Componentes dinámicos en VUE que ayudan a construir nuestra página web de forma ordenada.

Para aprender backend en Java siga este vínculo

1. Uso de Slot y llenado de espacios en VUE

Los slot permiten definir espacios en nuestros componentes que serán especificados como se llenarán desde el componente padre que utilice importe el componente hijo, de esta forma el padre puede indicar como llenar un espacio HTML al hijo dando gran versatilidad ya que el mismo componente puede tener un espacio que es llenado de forma diferente en función del padre donde se encuentre importado.

Crear un slot es algo muy simple y consta de dos pasos, el primero es definir en el componente hijo la zona HTML que dedicaremos para que quien use el componente lo defina. Esto se muestra en el siguiente código.

<template>
    <div>
      <transition name="efecto" mode="out-in">
        <div id="nav" class="tarjeta" :key="indice">
          <span :key="indice" > {{ datos[indice] }} </span>
        </div>
      </transition>
      <div>
        <slot name="slot1"></slot>
      </div>
    </div>
  </template>

El segundo paso consiste en especificar la sección HTML que llenará el slot en el lugar donde se use este componente hijo. El siguiente código muestra un ejemplo de esta especificación. Observe que el nombre del slot en este caso se usa sin comillas.

<template>
  <div id="nav" class="principal">
    <span>App </span>
    <span>{{ login }}</span>
    <br/>
    <span>Age {{ age }}</span>
    <tarjeta-datos>
      <template v-slot:slot1>
        <span>Componente en Slot</span>
      </template>
    </tarjeta-datos>
  </div>
</template>

2. Manejo de Componentes dinámicos en VUE

Para especificar un componente dinámico en VUE es suficiente con utilizar la etiqueta component y especificar en su atributo is cuál será el componente que se utilizará, esto resulta equivalente a dejar el componente fijo en el código pero con la ventaja que podemos utilizar una variable de la data para establecer el valor del componente y lograr que este cambie en función del valor de la variable.

En el ejemplo siguiente vemos como la variable actual, recibe el valor del nombre del componente, tenga presente que de cualquier manera el nombre del componente debe ser el mismo que se vaya a utilizar en el HTML y que debe ser previamente importado y definido en la sección components de la instancia de VUE.

<component :is="actual"></component>

import TarjetaDatos from './components/TarjetaDatos.vue';

export default {
  components: { TarjetaDatos },
  name: 'App',
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3),
      actual: 'tarjeta-datos'
    }
  },

3. Artículos de Interés

Cuando programamos en el front indiscutiblemente es necesario aprender a generar animaciones que mejoren la experiencia del usuario, en la sección de transiciones vimos como podemos manejar efectos para la aparición de elementos, estas transiciones se complementan muy bien cuando utilizamos Animaciones usando Keyframes CSS que permitiran una flexibilidad completa en nuestra animación

Para aprender backend en Java siga este vínculo

1. Definición de estilos de animación keyframes CSS

Lo primero antes de construir nuestras Animaciones es definir las keyframes CSS, lo cual es muy simple, tan solo con utilizar la etiqueta @keyframes indicar un nombre y definir los estados inicial y final de nuestra animación, tal como se muestra en el código de la siguiente sección.

@keyframes efecto-in {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Aquí es importante notar que existen muchas transformaciones y que la que se ha escogido en este ejemplo recibe un valor de 1 o 0 equivalente a 100% o 0%.

2. Agregado de Animaciones usando keyframes CSS a las transiciones

Para que nuestros @keyframes se puedan usar como animaciones es necesario asociarlos a las transiciones de forma muy similar a como se definió la propia transición.

.efecto-enter {
  opacity: 0;
}

.efecto-enter-active {
  transition: opacity 1s ease-out;
  animation: efecto-in 0.4s ease-out forwards;
}

.efecto-leave-active {
  transition: opacity 0.5s ease-out;
  animation: efecto-out 0.2s ease-out forwards;
  opacity: 0;
}

Note que la transición de salida leave-active debe especificar en este caso el valor de la propiedad opacity. Adicionalmente que la animación estar repetida en bucles infinitos y para evitarlo se hace uso de la directiva forwards.

Finalmente, a nivel del HTML se da un cambio pequeño en el cual podamos animar por completo el div que contiene la información, a su vez este div ( o el elemento sobre el que recaiga la animación debe tener un id para poder aplicarlo.

<transition name="efecto" mode="out-in">
  <div id="nav" class="tarjeta" :key="indice">
    <span :key="indice" > {{ datos[indice] }} </span>
  </div>
</transition>

3. Especificación de propiedades según avance de animación

Un último punto útil cuando hacemos animaciones usando @keyframes CSS es que podemos especificar diferentes valores del avance de la animación, cuando hemos usado from y to estos se entienden como 0% y 100% respectivamente, pero podemos especificarlo explicitamente y así indicar un valor de avance de la transformación a medida que la animación ocurre.

En el siguiente ejemplo se exagera un poco la transformación en Y justo antes que llegue que termine la animación.

@keyframes efecto-in {
  0% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1.4);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Estéticamente, estas animaciones exageradas deben usarse con cuidado en sitios específicos y aplicarlas una sola vez para que no cansen al usuario y su experiencia no se vea impactada.

4. Artículos de Interés