zerodevx / svelte-toast

Simple elegant toast notifications
https://zerodevx.github.io/svelte-toast/
ISC License
835 stars 49 forks source link

Top middle? #84

Closed HBartolin closed 1 year ago

HBartolin commented 1 year ago

Is it possible to adjust toast on top middle on the screen?

zerodevx commented 1 year ago

Did you see the "position to bottom" demo example? So something like this would work:

<button on:click={() => toast.push('Hello')}>Toast</button>

<div class="wrap">
  <SvelteToast options={{ intro: { y: -192 } }} />
</div>

<style>
  .wrap {
    --toastContainerTop: 8rem;
    --toastContainerRight: auto;
    --toastContainerBottom: auto;
    --toastContainerLeft: calc(50vw - 8rem);
  }
</style>
HBartolin commented 1 year ago

Thanks, now is working.