No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
2H
29M
58S
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?

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鈥