@webc-lit/modal-portfolio-wcll v1.0.3

\\

WebComponent basado en LitElement para implementar una ventana modal desarrollada con el proposito de mostrar información acerca de tus proyectos, que puedes integrar en tu portafolio personal.

Demo

Visita la página con el demo

Uso

Instalar desde npm:

npm i @webc-lit/modal-portfolio-wcll

Coloque el script en su página HTML o incluya el archivo modal-portfolio-wcll.js en su paquete JS. Después de eso, puede usar la etiqueta modal-portfolio-wcll, así:

  <modal-portfolio-wcll class="modal-default" titleDetail="Descripción del proyecto">
    <div>
      <p>Descripción o información que desee mostrar</p>
    </div>
  </modal-portfolio-wcll>

Lo que se coloque dentro de la etiqueta <modal-portfolio-wcll><modal-portfolio-wcll> se renderizara dentro de la seccion details, este titulo puede ser cambiado desde la propiedad titleDetail. Este contenido puede ser estilado al gusto de cada quien, la recomendación es encerrar este contenido dentro de un <div></div> como se muestra en el ejemplo de arriba.

Para correr la app ejecutar:

npm run app

La ruta por defecto:

http://127.0.0.1:8081/

La ruta del demo por defecto:

http://127.0.0.1:8081/demo/

Para mas ejemplos revisar el demo.

Metodos

• openModal(): Abre el modal.
• closeModal(): Cierra el modal y controla el tiempo de animación de cierre.

Ejemplos de uso:

document.getElementById("myModal").openModal();

const modal = document.getElementById("myModal");
modal.openModal();

Propiedades

Para la propiedad details si agregas una prop del objeto con el nombre Link este renderizará una etiqueta <a target="_blank"></a> por lo que el valor sera la url el sitio al cual sera redirigido. (Consulta el demo para ejemplo practico).

Para la propiedad timeAnimation cada 100 representa .1 segundos, lo recomendando es ajustar una suma de 200 al tiempo que se le designe a la variable css --animation-duration. Por ejemplo el valor por defecto de --animation-duration es de .3 por lo que la propiedad timeAnimation su valor es de 500.

Estilos personalizados