Snackbar

When a Dialog seems a bit overkill for the task, Snackbars are good candidates

They have only one button, and by default are queued to not confuse the user.

Note: They queue with Toasts as well.

From inside Vue instance

<template>
    <section>
        <button class="button" @click="snackbar">
            Launch snackbar (default)
        </button>

        <button class="button is-warning" @click="warning">
            Launch snackbar (custom)
        </button>

        <button class="button is-danger" @click="danger">
            Launch snackbar (custom)
        </button>
    </section>
</template>

<script>
export default {
    methods: {
        snackbar() {
            this.$buval.snackbar.open(`Default, positioned bottom-right with a green 'OK' button`)
        },
        warning() {
            this.$buval.snackbar.open({
                message: 'Yellow button and positioned on top, click to close',
                type: 'is-warning',
                position: 'is-top',
                actionText: 'Retry',
                indefinite: true,
                onAction: () => {
                    this.$buval.toast.open({
                        message: 'Action pressed',
                        queue: false
                    })
                }
            })
        },
        danger() {
            this.$buval.snackbar.open({
                duration: 5000,
                message: 'Snackbar with red action, positioned on bottom-left and a callback.<br>Note: <em>Message can include html</em>.',
                type: 'is-danger',
                position: 'is-bottom-left',
                actionText: 'Undo',
                queue: false,
                onAction: () => {
                    this.$buval.toast.open({
                        message: 'Action pressed',
                        queue: false
                    })
                }
            })
        }
    }
}
</script>

From outside Vue instance

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

import { SnackbarProgrammatic as Snackbar } from '@apolokak/buval'
Snackbar.open('Look at me!')

API

Name
Description
Type
Value
Default
typeType (color) of the action button. Please notice that it is the name of the parent class also String is-white, is-black, is-light, is-dark, is-primary, is-mix, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-success
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 ——
positionWhich position the snackbar will appear String is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
durationVisibility duration in miliseconds Number —3500
queueIf should queue with others notices (snackbar/toast/notification) Boolean —true
indefiniteShow the Snackbar indefinitely until it is dismissed Boolean —false
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 Buval Constructor Options. See Constructor options for more details. String —body
actionTextSnackbar's button text, set null for buttonless String —OK
onActionCallback function when the button is clicked Function ——

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name
Default
$snackbar-background-color$dark
$snackbar-color$dark-invert
$snackbar-border-radius$radius