Skip to content

Latest commit

 

History

History
194 lines (146 loc) · 12.9 KB

COMPONENT_INDEX.md

File metadata and controls

194 lines (146 loc) · 12.9 KB
Raw

Docs

Store

Components

ToastStore

import { toasts } from 'svelte-toasts';

Store toasts contains an array of toasts objects. It has following methods:

Name Type Description
add
Function
This is key function to show toast. You can pass options and modify the generated toast.
removeAll
Function
This function removes all toasts and clears store state to empty array
removeLast
Function
This function removes one toast (if any) that was generated at the end
getById
Function
This function returns toast data for given id. Every toast has a unique uid
setDefaults
Function
This function sets default options so you don't need to pass those options again and again, e.g. theme, placement etc.
success
Function
Show success/green toast.
info
Function
Show info/blue toast.
error
Function
Show error/red toast.
warning
Function
Show warning/orange toast.

BootstrapToast

import { BootstrapToast } from 'svelte-toasts';

Props

Prop name Kind Reactive Type Default value Description
theme let No Theme 'light' Default theme for all toasts
data let No ToastProps {} Default theme for all toasts

Slots

Slot name Default Props Fallback
close-icon No -- <svg
xmlns="http://www.w3.org/2000/svg"
class="bx--toast-notification__close-icon"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
/>
</svg>
extra No -- --
icon No -- Svg icons based on type

Events

None.

FlatToast

import { FlatToast } from 'svelte-toasts';

Props

Prop name Kind Reactive Type Default value Description
theme let No Theme 'light' Default theme for all toasts
data let No ToastProps {} Default theme for all toasts

Slots

Slot name Default Props Fallback
close-icon No -- <svg
xmlns="http://www.w3.org/2000/svg"
class="bx--toast-notification__close-icon"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
/>
</svg>
extra No -- --
icon No -- Svg icons based on type

Events

None.

ToastContainer

import { ToastContainer } from 'svelte-toasts';

Props

Prop name Kind Reactive Type Default value Description
theme let No Theme 'dark' Default theme for all toasts
placement let No Placement 'bottom-right' Default placement for all toasts
type let No ToastType 'info' Default type of all toasts
showProgress let No boolean false Show progress if showProgress is true and duration is greater then 0
duration let No number 3000 Default duration for all toasts to auto close. 0 to disable auto close
width let No 'string' '320px' Width of all toasts

Slots

Slot name Default Props Fallback
-- Yes { data: ToastProps } --

Events

None.

Types

Theme

export type Theme = 'dark' | 'light';

ToastType

export type ToastType = 'success' | 'info' | 'error' | 'warning';

Placement

export type Placement =
  | 'bottom-right'
  | 'bottom-left'
  | 'top-right'
  | 'top-left'
  | 'top-center'
  | 'bottom-center'
  | 'center-center';

ToastProps

export interface ToastProps {
  uid: number;
  title?: string;
  description: string;
  duration: number;
  type: ToastType;
  theme?: Theme;
  placement: Placement;
  showProgress?: boolean;
  remove?: Function;
  update?: Function;
  onRemove?: Function;
  onClick?: Function;
}

ToastStore

export interface ToastStore extends Writable<ToastProps[]> {
  add(options: Partial<ToastProps>): ToastProps;
  success(options: Partial<ToastProps>): ToastProps;
  success(description: string): ToastProps;
  success(description: string, options: Partial<ToastProps>): ToastProps;
  success(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  info(options: Partial<ToastProps>): ToastProps;
  info(description: string): ToastProps;
  info(description: string, options: Partial<ToastProps>): ToastProps;
  info(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  error(options: Partial<ToastProps>): ToastProps;
  error(description: string): ToastProps;
  error(description: string, options: Partial<ToastProps>): ToastProps;
  error(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  warning(options: Partial<ToastProps>): ToastProps;
  warning(description: string): ToastProps;
  warning(description: string, options: Partial<ToastProps>): ToastProps;
  warning(
    title: string,
    description: string,
    options?: Partial<ToastProps>
  ): ToastProps;

  getById(uid: number): ToastProps;
  clearAll(): void;
  clearLast(): void;
  setDefaults(options: Partial<ToastProps>): void;
}