Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
import {NotificationService} from "@dflare/svelte-enhanced-notifications";

let notficationService;
let myNotification = {
title: "Warning notification",
message: "This is a warning notification",
variant: "warning",
autoDismissible: true,
showCloseButton: true, // It can be omitted if you want to use the default value of true
showCountdown: true, // It can be omitted if you don't want to display the countdown timer.
countdownDuration: 5000 // It can be omitted if you want to use the default value of 3000 milliseconds.
};

function showNotification() {
notficationService?.push(myNotification);
}
</script>

<NotificationService bind:this={notficationService}/>
<button on:click={showNotification}>Show Notification</button>
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */