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?