Toast

A Toast is a notification designed to inform the user. Toasts are used to direct the user’s attention to a specific action that happened within the system without the user having to navigate to a notifications page or component and away from the current screen.

Setup

First, you must tell your Vue application to use the CiToastrPlugin. Toastr is used to mount toasts on top of the current UI. Create a file called ci-setup.js in a /plugins directory.

// ci-setup.js
import Vue from "vue";
import { CiToastrPlugin } from "@ci/stratus-components";

Vue.use(CiToastrPlugin);

Then define this plugin in your app.

plugins: [
  '~plugins/ci-setup.js'
],

Opening a Toast

Use the global function this.$toastr.show() from the Toastr plugin to open a toast. It accepts an object with your Toast's options.

<template>
  <ci-button @click="openToast"> Open Toast </ci-button>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
      });
    },
  },
};
</script>

Variants

Use the variant prop to change the appearance of your toast. info and success toasts will last for 5 seconds, while warning and error toasts will persist until dismissed.

<template>
  <div>
    <ci-button @click="openToast('info')">Info Toast</ci-button>
    <ci-button @click="openToast('success')">Success Toast</ci-button>
    <ci-button @click="openToast('warning')">Warning Toast</ci-button>
    <ci-button @click="openToast('error')">Error Toast</ci-button>
  </div>
</template>

<script>
export default {
  methods: {
    openToast(toastVariant) {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
        variant: toastVariant,
      });
    },
  },
};
</script>

Action

Toasts have an optional action which only accepts the ToastAction object. The toast will automatically include an actionable link for the user that will execute the ToastAction.callback function.

<template>
  <ci-button @click="openToast"> Open Toast </ci-button>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
        variant: "error",
        action: {
          text: "Action",
          callback: this.showAlert,
          pxClass: 'General,CustomPX,Link'
        },
      });
    },
    showAlert() {
      alert("Action clicked");
    },
  },
};
</script>

Closing a Toast

The toast plugin exposes a hide() method that can be used to hide the toast manually.

<template>
  <div>
    <ci-button @click="openToast"> Open Toast </ci-button>
    <ci-button @click="closeToast"> Close Toast </ci-button>
  </div>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt mollis sapien, sit amet porta massa posuere eget. Nunc auctor vestibulum elit, nec sollicitudin felis tincidunt vel. Praesent rutrum sem vel purus volutpat sodales. Praesent malesuada vestibulum enim, at aliquam lacus auctor vel.",
        variant: "warning",
      });
    },
    closeToast() {
      this.$toastr.hide();
    },
  },
};
</script>

Bottom offset

By default toast has offset of 30px from bottom of page, but if it is needed to change bottomOffset property can be used and passed number will be used as bottom offset value.

<template>
  <ci-button @click="openToast">
    Open 100px Offset Toast
  </ci-button>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
        bottomOffset: 100
      });
    },
  },
};
</script>

Queue Functionality

When multiple toasts are triggered, they are queued and displayed one on top of the other. The text showing the toast's position in the queue and the total number of toasts can be customized.

<template>
  <div>
    <ci-button @click="openToast('info', true)">Info Toast</ci-button>
    <ci-button @click="openToast('success', true)">Success Toast</ci-button>
    <ci-button @click="openToast('warning', true)">Warning Toast</ci-button>
    <ci-button @click="openToast('error', true)">Error Toast</ci-button>
    <ci-button @click="openMultipleToasts()">Open Multiple Toasts</ci-button>
  </div>
</template>

<script>
export default {
  methods: {
    openToast(toastVariant, persistent) {
      this.$toastr.show({
        text: `This is a ${toastVariant} toast`,
        variant: toastVariant,
        persistent: persistent
      });
    },
    openMultipleToasts() {
      this.openToast('info', true);
      this.openToast('success', true);
      this.openToast('warning', true);
      this.openToast('error', true);
    }
  },
};
</script>

Custom Closing and Queue Text

You can customize the closing text and queue text on your toasts by using the customClosingText and customQueueText options respectively.

<template>
  <ci-button @click="openToast">
    Double Click Me
  </ci-button>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
        closingText: "This toast will disappear in $$",
        queueText: "This toast is number $x of $y"
      });
    },
  },
};
</script>

Persistent Toasts

If you want a toast to persist until the user manually dismisses it, you can set the persistent option to true.

<template>
  <ci-button @click="openToast">
    Open Persistent Toast
  </ci-button>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
        variant: "success",
        persistent: true,
      });
    },
  },
};
</script>

Non-Persistent Toasts

Non-persistent toasts will disappear after a certain period of time. By default, this time is 5 seconds.

<template>
  <ci-button @click="openToast">
    Open Non-Persistent Toast
  </ci-button>
</template>

<script>
export default {
  methods: {
    openToast() {
      this.$toastr.show({
        text: "Lorem ipsum dolor sit amet consectetur.",
        variant: "info"
      });
    },
  },
};
</script>