Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Componente Modal

22/26
Recursos

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si quieren agregar el botón de whatsapp:

en Share.svelte:

//en el css  
.Share-content i {
    margin: 0 0.5em 0 0;
    font-size: 20px;
  }
  .Share-facebook i {
    color: #3b5998;
  }
  .Share-whatsapp i {
     color: #1bd741;
  }

// en el html

    <div class="Share-content">
        <div class="Share-facebook">
            <a href="https://www.facebook.com/sharer/sharer.php?&u=https://pugstagram.co/" target="_blank">
            <i class="fab fa-facebook-square" />
            Compartir en Facebook!
        </a>
        </div>
        <div class="Share-whatsapp">
            <a href="https://api.whatsapp.com/send?&text=mira%20este%20hermoso%20pug%20https://pugstagram.co/" target="_blank">
            <i class="fab fa-whatsapp-square" />
            Compartir en Whatsapp!
        </a>          
        </div>
    </div>

Resultado:

Al importar los componentes en svelte se puede hacer sin la extensión de la siguiente manera:

Una vez que compartimos en facebook al volver a la página hay que cerrar la ventana modal…
Para que eso no suceda en el <a … facebook… </a> agrega on:click

Estilo para poder hacer scroll y permanezca el modal

.Modal {
      position: fixed;
      z-index: 100;
      
    }

Para los que no les anduvo el efecto Blur, tanto al abrir el modal, como al cerrar el modal, teniendo está version de svelte:

"dependencies": {
    "svelte": "^3.18.2"
}

Solo tuve que editar al import del blur lo siguiente y funcionó correctamente:

// Segun documentación oficial de Svelte
import { blur } from 'svelte/transition';

Éxitos!

Lo hice hahahah sin estilos pero hice la logica. La verdad que me esta gustando muchisimo, casi como React.

Hola profesor, ningún momento explicas que transición hace blur, sería bueno que lo explicaras

<h1>Con el botón de facebook, twitter y whatsapp con su respectiva API para compartir:</h1>
<style>
  .share {
    border-radius: 4px;
    background-color: var(--white-color);
    margin: 0 0 2em 0;
    width: 300px;
    position: absolute;
    top: 300px;
    left: 25%;
    z-index: 3;
    padding: 1em;
  }
  .share__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .share__title {
    font-size: 16px;
  }
  .share__exit {
    cursor: pointer;
  }
  .share__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 14px;
    margin: 2em 0 0 0;
  }
  .share__icon-social {
    color: #3b5998;
    margin: 0 0.5em 0 0;
    font-size: 20px;
  }
</style>

<div class="share">
  <div class="share__head">
    <h2 class="share__title">Compartir</h2>
    <i class="fas fa-times-circle share__exit" on:click />
  </div>
  <div class="share__content">
    <a
      href="https://www.facebook.com/sharer.php?&t=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Facebook%20https://devstagram.com/&u=https://devstagtam.com"
      target="_blank"
      class="share__link">
      <i class="fab fa-facebook-square share__icon-social" />
      Compartir en Facebook
    </a>
    <a
      href="https://twitter.com/intent/tweet?text=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Twitter&url=devstagram.com"
      target="_blank"
      class="share__link">
      <i class="fab fa-twitter-square share__icon-social" />
      Compartir en Twitter
    </a>
    <a
      href="https://api.whatsapp.com/send?&text=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Whatsapp%20https://devstagram.com/"
      target="_blank"
      class="share__link">
      <i class="fab fa-whatsapp-square share__icon-social" />
      Compartir en Whatsapp
    </a>
  </div>
</div>
<h1>Resultado esperado:</h1>

👌

Se pierde mucho tiempo explicando cosas de HTML y no explica bien las partes de svelte…