Enzyme UI

# Toast notifications

Toast notifications are useful whenever you need to inform user about some kind of event inside your application.

Toast notification component is plugin based component and provides a programmatic interface to create notification popups.

Note

You must add <ToastNotificationsContainer/> component somewhere in the root of your application as this will be the container for all toast notifications. In default project it is added inside App.vue.

You can invoke ToastNotification by using globally available $toasts property in any of your components. This $toasts property is registered as global Vue property when toast notification plugin is added in src/components/toast/plugin.js.

Use this.$toasts.add(configurationObject) method to add a toast notification and this.$toasts.remove(configurationObject) to programatically remove toast notification. configurationObject must be an object which can have the following properties:

  • body - String for toast body text. Can include html.
  • title - String for toasts head title.
  • position - (default: top-right) Toast position: top-left | top-right | top-center | bottom-left | bottom-right | bottom-center.
  • timeout - (default: 5000) Time in milliseconds when tooltip will be closed automatically. If set to -1 tooltip won't be closed automatically.
  • closeOnClick - (default: false) Whether toast should be closed on click.
  • classes - Appendable classes to toast notification
  • showCloseButton - (default: true) Whether close button should be shown or not
  • type - (default: primary) One of available bootstrap theme-colors: default primary secondary success info warning danger light dark

Below is a small example of ToastNotification creation:

Toast notifications
Notification header title
Notification body
Auto hide timeout in milliseconds
Automatically hides toast after provided amount of milliseconds. If -1 is provided, toast will not be hidden
Positioning
Other settings
Toast notification type
default 
<ToastNotificationsContainer/>
<Card>
<template slot="header">
    Toast notifications
</template>
<div class="row">
    <div class="col-sm-6">
        <Input v-model="toastHeader" label="Notification header title"/>
        <Input tag="textarea" v-model="toastBody" label="Notification body"/>
        <Input v-model="toastAutoHideTimeout" label="Auto hide timeout in milliseconds"
               info-text="Automatically hides toast after provided amount of milliseconds. If -1 is provided, toast will not be hidden"/>
    </div>
    <div class="col-sm-6">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h5>Positioning</h5>
            </div>
            <div class="col-sm-6">
                <Radio v-model="toastPosition" radio-value="bottom-center">Bottom Center</Radio>
                <Radio v-model="toastPosition" radio-value="bottom-right">Bottom Right</Radio>
                <Radio v-model="toastPosition" radio-value="bottom-left">Bottom Left</Radio>
            </div>
            <div class="col-sm-6">
                <Radio v-model="toastPosition" radio-value="top-center">Top Center</Radio>
                <Radio v-model="toastPosition" radio-value="top-right">Top Right</Radio>
                <Radio v-model="toastPosition" radio-value="top-left">Top Left</Radio>
            </div>
            <div class="col-sm-12 mt-4">
                <h5>Other settings</h5>
            </div>
            <div class="col-sm-12">
                <Checkbox v-model="toastShowCloseButton">Show close button</Checkbox>
                <Checkbox v-model="toastCloseOnClick">Close on click</Checkbox>
            </div>
            <div class="col-sm-12 mt-4">
                <h5>Toast notification type</h5>
                <Select @change="toastType = $event" :data="toastTypes" :selected="toastType" is-searchable>
                    <template v-slot:placeholder="{selectedItem}">
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <div :class="[`bg-${selectedItem.toString().toLowerCase()}`, 'rounded', 'mr-2']"
                                 style="width: 16px;height: 16px;"></div>
                            {{selectedItem}}
                        </div>
                    </template>
                    <template v-slot:default="{item}">
                        <div class="d-flex flex-row justify-content-between align-items-center">
                            <div :class="[`bg-${item.toString().toLowerCase()}`, 'rounded', 'mr-2']"
                                 style="width: 16px;height: 16px;"></div>
                            <span class="mr-auto">{{item}}</span>
                        </div>
                    </template>
                </Select>
            </div>
        </div>
        <Button @click="showToast">Show toast</Button>
    </div>
</div>
</Card>
<script>
    export default {
        name: "Tooltips",
        data() {
            return {
                toastHeader: 'Notification title',
                toastBody: 'Notification body text',
                toastPosition: 'top-center',
                toastAutoHideTimeout: 5000,
                toastShowCloseButton: true,
                toastCloseOnClick: false,
                toastType: 'default',

                toastTypes: [
                    'default',
                    'primary',
                    'secondary',
                    'success',
                    'info',
                    'warning',
                    'danger',
                    'light',
                    'dark',
                ],
            }
        },
        methods: {
            showToast() {
                this.$toasts.add({
                    body: this.toastBody,
                    title: this.toastHeader,
                    position: this.toastPosition,
                    timeout: this.toastAutoHideTimeout,
                    showCloseButton: this.toastShowCloseButton,
                    closeOnClick: this.toastCloseOnClick,
                    type: this.toastType,
                });
            },
        }
    }
</script>

← Tooltip →