40 lines
1 KiB
Svelte
40 lines
1 KiB
Svelte
<script lang="ts">
|
|
import { Toast, ToastBody, ToastHeader, Icon } from '@sveltestrap/sveltestrap';
|
|
import { toasts, removeToast, type ToastColor } from './toasts';
|
|
|
|
const ICONS: Record<ToastColor, string> = {
|
|
primary: 'info-circle-fill',
|
|
secondary: 'info-circle-fill',
|
|
success: 'check-circle-fill',
|
|
danger: 'exclamation-triangle-fill',
|
|
warning: 'exclamation-circle-fill',
|
|
info: 'info-circle-fill',
|
|
light: 'lightbulb',
|
|
dark: 'question',
|
|
};
|
|
</script>
|
|
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
{#each $toasts as toast (toast.id)}
|
|
<Toast
|
|
isOpen={true}
|
|
autohide={!toast.persistent}
|
|
delay={5000}
|
|
color={toast.color}
|
|
on:close={() => removeToast(toast.id)}>
|
|
<ToastHeader toggle={() => removeToast(toast.id)} class={`text-${toast.color}`}>
|
|
<Icon slot="icon" name={ICONS[toast.color]} class="me-2" color={toast.color} />
|
|
{toast.header}
|
|
</ToastHeader>
|
|
<ToastBody>
|
|
{toast.body}
|
|
</ToastBody>
|
|
</Toast>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.toast-container {
|
|
z-index: 1090;
|
|
}
|
|
</style>
|