Toast

Demo

Installation

bash
npm i @sacrosactic/ui

Usage

/routes/+layout.svelte
svelte
<script>
	import { Toast } from '@sacrosactic/ui';
</script>
<Toast />

any svelte file
svelte
<script>
	import { addToast } from '@sacrosanctic/ui';
</script>
<button on:click={addToast(Options)}>Show Toast</button>

Types

ts
type Option = {
  /*
    Default: 2500
    In milliseconds. Set to 0 for persistent toast.
  */
	duration?: number
  /*
    Default: top-right
  */
	position?: string
  /*
    Use our predefined styles or incorporate your own custom component. An on:close event is exposed to the custom component to dismiss the toast.
  */
	template?: Template | ComponentType
  /*
    The available props are `title` and `text`, if a custom component is involved, then data is passed directly to the custom component.
  */
	data?: Props
}
type Template = 'default' | 'success' | 'info' | 'warning' | 'error'
type Position = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
type Props = {
	[key: string]: string
}