Toast #
Component for sending a notification to the user. To make it easier to create toast we have a shorthands. For options API it is $vaToast. For composition api we have useToast hook. Hook and global object have similar API.
In options API you can use VaToastPlugin (automatically installed with createVuestic). $vaToast have a few methods: init, close, closeAll.
In composition API you can use useToast hook.
export default {
methods: {
onButtonClick() {
this.$vaToast.notify('Toast example!')
},
},
beforeRouteLeave (to, from, next) {
this.$vaToast.closeAll()
next()
},
}| Method name | Api Type | description |
|---|---|---|
| init(options: string | NotificationOptions) |
| Creates new toast instance. Returns toast instance id |
| close(id: string) |
| Closes specific using its id. |
| closeAll(allApps?: boolean = false) |
| Closes all instances created in this Vue App. If you want to close all toasts on webpage, set allApps to true. |
| closeAllCreatedInThisHook() |
| Using this method you can close all toasts created in one setup context |
Init Options #
| name | type |
|---|---|
| title |
|
| message |
|
| iconClass |
|
| customClass |
|
| duration |
|
| closeable |
|
| dangerouslyUseHtmlString |
|
| render |
|
| onClose |
|
| onClick |
|
| offsetX |
|
| position |
|
| offsetY |
|
| visible |
|
| color |
|
Examples #
Basic usage #
By default, run this component in events by using the init method with a setting object.
Color #
Set different colors using color prop. You can either user theme string HEX color value.
Offset #
Use offset property to set the offset of the toast.
Position #
Use position property to set the custom position of the toast. Available are top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.
Close #
You can use close method to close the notification and you can set custom onClose event.
Click #
You can set custom onClick event to handle the click on button.
Accessibility #
Toasts are intended to be small interruptions to your visitors or users, it's wrap with an aria-live region, so that changes to live regions are automatically announced by screen reader without needding to move the user's focus or otherwise interrupt the user. If the conveying messages is important, you should not add the role attribute that can either be alert or alertdialog depending on closeable prop, aria-live will be computed and set to assertive. if messages is not important, you should manually set the role attribute to status, and aria-live should be computed to polite.
Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaCloseLabel | The aria-label of the close button |
|
|
| closeable | Provides the ability to close the component |
|
|
| color | Color of the component (theme string or |
|
|
| customClass | Applies custom class to the component |
|
|
| dangerouslyUseHtmlString | Sets the ability to use |
|
|
| duration | Sets the duration of the notification display |
|
|
| icon | Sets the close icon |
|
|
| inline |
|
| |
| message | Notification message |
|
|
| multiLine | Sets more space for the Toast component |
|
|
| offsetX | Sets the X offset |
|
|
| offsetY | Sets the Y offset |
|
|
| onClick | Applies a function to use when clicked |
| - |
| onClose | Applies a function to use when pressed a close button |
| - |
| position | Sets the position of the notification |
|
|
| preset | Named preset combination of component props. |
| - |
| render | Render function to use a custom content |
| - |
| role | Sets the |
| - |
| title | Sets the title for the notification |
|
|
Events #
| Name | Description |
|---|---|
onClick | Emits when toast is clicked |
onClose | Emits when close button is clicked |
Css Variables #
| Name | Default Value |
|---|---|
| --va-toast-display | flex |
| --va-toast-width | 330px |
| --va-toast-padding | 14px 1.25rem 14px 1.25rem |
| --va-toast-border-radius | 8px |
| --va-toast-border-color | transparent |
| --va-toast-border | 1px solid var(--va-toast-border-color) |
| --va-toast-background-color | var(--va-background-secondary) |
| --va-toast-box-shadow | 0 2px 12px 0 var(--va-shadow) |
| --va-toast-transition | opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s |
| --va-toast-z-index | calc(var(--va-z-index-teleport-overlay) + 100) |
| --va-toast-title-font-weight | bold |
| --va-toast-title-font-size | 1rem |
| --va-toast-title-color | #303133 |
| --va-toast-title-margin | 0 0 6px |
| --va-toast-content-font-size | 1rem |
| --va-toast-content-line-height | 1.3125 |
| --va-toast-content-padding-right | 20px |
| --va-toast-icon-height | 24px |
| --va-toast-icon-width | 24px |
| --va-toast-icon-font-size | 24px |
| --va-toast-close-icon-top | 18px |
| --va-toast-close-icon-right | 15px |
| --va-toast-close-icon-font-size | 1rem |
FAQ #
What is the difference between a component and a service? #
The difference is in implementation. The service behaves more flexibly and it is easier to bind it to certain events than to render the whole element. Each prop you provide to the component you can provide to the service too by using the setting object.