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'
component	string	'div'	Component's HTML Element
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

Vue

<template>
  <i-page>
    <i-navbar title="Toast" />

    <i-block strong-ios outline-ios class="space-y-4">
      <i-toast position="left" :opened="opened.left">
        <template #button>
          <i-button clear inline @click="() => (opened.left = false)">
            Close
          </i-button>
        </template>
        <div class="shrink">Hello this is left toast!</div>
      </i-toast>
      <i-toast position="center" :opened="opened.center">
        <template #button>
          <i-button clear inline @click="() => (opened.center = false)">
            Close
          </i-button>
        </template>
        <div class="shrink">Hello this is center toast!</div>
      </i-toast>
      <i-toast position="right" :opened="opened.right">
        <template #button>
          <i-button clear inline @click="() => (opened.right = false)">
            Close
          </i-button>
        </template>
        <div class="shrink">Hello this is right toast!</div>
      </i-toast>
      <p>
        Toasts provide brief feedback about an operation through a message on
        the screen.
      </p>
      <p>
        <i-button @click="() => openToast('left')"> Toast on Left </i-button>
      </p>
      <p>
        <i-button @click="() => openToast('center')">
          Toast on Center
        </i-button>
      </p>
      <p>
        <i-button @click="() => openToast('right')"> Toast on Right </i-button>
      </p>
    </i-block>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iButton,
    iToast,
    iBlock,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iButton,
      iToast,
      iBlock,
    },
    setup() {
      const opened = ref({
        left: false,
        center: false,
        right: false,
      });
      const openToast = (side) => {
        // close other toast
        opened.value = { left: false, center: false, right: false };
        opened.value[side] = true;
      };
      return {
        openToast,
        opened,
      };
    },
  };
</script>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Toast,
  Block,
} from 'ina-ui/react';

export default function ToastPage() {
  const [toastLeftOpened, setToastLeftOpened] = useState(false);
  const [toastCenterOpened, setToastCenterOpened] = useState(false);
  const [toastRightOpened, setToastRightOpened] = useState(false);

  const openToast = (setter) => {
    // close other toast
    setToastLeftOpened(false);
    setToastCenterOpened(false);
    setToastRightOpened(false);
    setter(true);
  };
  return (
    <Page>
      <Navbar
        title="Toast"
        />

      <Block strongIos outlineIos className="space-y-4">
        <Toast
          position="left"
          opened={toastLeftOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastLeftOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is left toast!</div>
        </Toast>
        <Toast
          position="center"
          opened={toastCenterOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastCenterOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is center toast!</div>
        </Toast>
        <Toast
          position="right"
          opened={toastRightOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastRightOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="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(setToastLeftOpened)}>
            Toast on Left
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastCenterOpened)}>
            Toast on Center
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastRightOpened)}>
            Toast on Right
          </Button>
        </p>
      </Block>
    </Page>
  );
}