docs(toast-notification): add "Autoclose" example

This commit is contained in:
Eric Liu 2024-02-18 19:36:46 -08:00 committed by metonym
commit ced9673681
2 changed files with 40 additions and 0 deletions

View file

@ -0,0 +1,32 @@
<script>
import { Button, ToastNotification } from "carbon-components-svelte";
import { fade } from "svelte/transition";
let timeout = undefined;
$: showNotification = timeout !== undefined;
</script>
<Button
disabled="{showNotification}"
on:click="{() => {
timeout = 3_000; // 3 seconds
}}"
>
Show notification
</Button>
{#if showNotification}
<div transition:fade>
<ToastNotification
timeout="{timeout}"
kind="success"
title="Success"
subtitle="This notification will autoclose in {timeout.toLocaleString()} ms."
caption="{new Date().toLocaleString()}"
on:close="{(e) => {
timeout = undefined;
console.log(e.detail.timeout); // true if closed via timeout
}}"
/>
</div>
{/if}