Toast Svelte Component

Toast Components
Toast Props
Toast Slots
Examples

Toasts provide brief feedback about an operation through a message on the screen.

Toast Components

There are following components included:

Toast

Toast Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-black'
colors.bgMaterial	string	'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIos	string	'text-white'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
opened	boolean	false	Allows to open/close Toast and set its initial state
position	'left' \| 'right' \| 'center'	'left'	Toast position (only on wide screens). Can be `left`, `center` or `right`
translucent	boolean	true	Makes Toast background translucent (with `backdrop-filter: blur`) in iOS theme

Toast Slots

Name	Description
button	Toast button content

Examples

Toast.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Button,
    Toast,
    Block,
  } from 'konsta/svelte';

  let toastLeftOpened = false;
  let toastCenterOpened = false;
  let toastRightOpened = false;

  const openToast = (setter) => {
    // close other toast
    toastLeftOpened = false;
    toastCenterOpened = false;
    toastRightOpened = false;
    setter();
  };
</script>

<Page>
  <Navbar title="Toast" />

  <Block strongIos outlineIos class="space-y-4">
    <Toast position="left" opened={toastLeftOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastLeftOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is left toast!</div>
    </Toast>
    <Toast position="center" opened={toastCenterOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastCenterOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is center toast!</div>
    </Toast>
    <Toast position="right" opened={toastRightOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastRightOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is right toast!</div>
    </Toast>
    <p>
      Toasts provide brief feedback about an operation through a message on the
      screen.
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastLeftOpened = true))}>
        Toast on Left
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastCenterOpened = true))}>
        Toast on Center
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastRightOpened = true))}>
        Toast on Right
      </Button>
    </p>
  </Block>
</Page>