They have a slightly transparency and are queued to not confuse the user.
Note: They queue with Snackbars as well.
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>
<button class="button is-medium" @click="toast">
Launch toast (default)
</button>
<button class="button is-medium is-success" @click="success">
Launch toast (custom)
</button>
<button class="button is-medium is-danger" @click="danger">
Launch toast (custom)
</button>
</section>
</template>
<script>
export default {
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 bottom`,
position: 'is-bottom',
type: 'is-danger'
})
}
}
}
</script>
# From outside Vue instance
You can use it on Vuex or VueRouter using this syntax:
import { ToastProgrammatic as Toast } from 'buefy'
Toast.open('Toasty!') Name | Description | Type | Values | Default |
|---|---|---|---|---|
type | Type (color) of the toast | String | is-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 Sass | is-dark |
message | Message text | String | — | — |
position | Which position the toast will appear | String | is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-left | is-top |
duration | Visibility duration in milliseconds | Number | — | 2000 |
queue | If should queue with others notices (snackbar/toast/notification) | Boolean | — | true |
container | DOM 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. | String | — | body |
You can use these variables to customize this component.
Name | Default |
|---|---|
$toast-border-radius | 2em |
$toast-opacity | 0.92 |
$toast-box-shadow | 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) |
This page is open source. Noticed a typo or something's unclear?