Toast

Toasts are simple text messages to inform the user

They have a slightly transparency and are queued to not confuse the user.

Note: They queue with Snackbars as well.

# From inside Vue instance

<template>
    <section>
        <div class="buttons">
            <b-button
                label="Launch toast (default)"
                size="is-medium"
                @click="toast" />
            <b-button
                label="Launch toast (custom)"
                type="is-success"
                size="is-medium"
                @click="success" />
            <b-button
                label="Launch toast (custom)"
                type="is-danger"
                size="is-medium"
                @click="danger" />
        </div>
        <div class="buttons">
            <b-button
                label="Launch toast (indefinite)"
                type="is-success"
                size="is-medium"
                @click="indefinite" />
            <b-button
                label="Launch toast (pause on hover)"
                type="is-link"
                size="is-medium"
                @click="pause" />
            <b-button
                v-if="indefinteToast"
                label="close toast (indefinite)"
                type="is-danger"
                size="is-medium"
                @click="closeIndefinite" />
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                indefinteToast: null
            }
        },
        methods: {
            toast() {
                this.$buefy.toast.open('Something happened')
            },
            success() {
                this.$buefy.toast.open({
                    message: 'Something happened correctly!',
                    type: 'is-success'
                })
            },
            danger() {
                this.$buefy.toast.open({
                    duration: 5000,
                    message: `Something's not good, also I'm on <b>bottom</b>`,
                    position: 'is-bottom',
                    type: 'is-danger'
                })
            },

            indefinite() {
                this.indefinteToast = this.$buefy.toast.open({
                    indefinite: true,
                    message: `I won't close until you explicitly close me!`,
                    type: 'is-warning'
                })
            },
            pause() {
                this.$buefy.toast.open({
                    duration: 5000,
                    message: `I can be paused if you hover over me`,
                    type: 'is-link',
                    pauseOnHover: true
                })
            },
            closeIndefinite() {
                if (this.indefinteToast) {
                    this.indefinteToast.close();
                    this.indefinteToast = null;
                }
            }
        }
    }
</script>

# From outside Vue instance

You can use it on Vuex or VueRouter using this syntax:

import { ToastProgrammatic as Toast } from '@fantage9/buefy-vue3'
Toast.open('Toasty!')

# API

Name
Description
Type
Values
Default
typeType (color) of the toastStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-dark
messageMessage text (can contain HTML).
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.
String, Array
positionWhich position the toast will appearStringis-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-top
durationVisibility duration in millisecondsNumber2000
queueIf should queue with others notices (snackbar/toast/notification)Booleantrue
indefiniteShow indefinitely until it is dismissed programmaticallyBooleanfalse
pause-on-hoverPause and show on hover until hover off (it works when indefinite is false)Booleanfalse
containerDOM element the toast will be created on. Note that this also changes the position of the toast from fixed to absolute. Meaning that the container should be fixed. Also note that this will override the defaultContainerElement if you specified it in your Buefy Constructor Options. See Constructor options for more details.Stringbody

# Variables

You can use these variables to customize this component.

Name
Default
$toast-border-radius2em
$toast-opacity0.92
$toast-box-shadow0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)