Add toast
This commit is contained in:
parent
9437316feb
commit
0a2f580f30
1 changed files with 46 additions and 0 deletions
46
frontend/src/lib/components/Toast.svelte
Normal file
46
frontend/src/lib/components/Toast.svelte
Normal file
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
export let message = "L'applicazione è pronta per funzionare offline!";
|
||||
let show = false;
|
||||
let nodeRef;
|
||||
|
||||
onMount(() => {
|
||||
show = true;
|
||||
setTimeout(() => {
|
||||
show = false;
|
||||
setTimeout(() => {
|
||||
nodeRef.parentNode.removeChild(nodeRef);
|
||||
}, 5000);
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
show = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={nodeRef} id="toast" class:show>
|
||||
<img src="/icons/checkmark.svg" alt="check" />
|
||||
<div>{message}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.show {
|
||||
transform: translateY(0vh) !important;
|
||||
}
|
||||
#toast {
|
||||
transform: translateY(10vh);
|
||||
transition: transform ease 0.4s;
|
||||
position: fixed;
|
||||
height: 10vh;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
background-color: #f6ae04;
|
||||
color: black;
|
||||
place-items: center;
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue