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
# From outside Vue instance
You can use it on Vuex or VueRouter using this syntax:
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?