Appearance
Toast
The Toast
component provides a lightweight and easily customizable alert message to push notifications to your users.
Composable Components
The Toast is made up of several components that allow you to compose different types of toast layouts.
Component | Description |
---|---|
ToastRoot | The root component element |
ToastHeader | The element that contains the toast header content |
ToastContent | The element that contains the main content of the toast |
ToastAction | The trigger button that can be used to handle dismissing a toast |
Examples
html
<ToastRoot v-model="showToast" :autoClose="4" @toast-root:close="handleToastClose">
<ToastContent class="toast" :class="`toast-${getNotification.type}`">
<i class="fa-solid fa-exclamation" v-if="getNotification.type === 'error'"></i>
<i class="fa-solid fa-check" v-if="getNotification.type === 'success'"></i>
<p class="inline">{{ getNotification.message }}</p>
</ToastContent>
</ToastRoot>
An example can be seen in /frontend/App.vue
ToastRoot
Component Props
Prop | Description | Options |
---|---|---|
position | the position to place the toast | bottom-left , bottom-right , top-right , top-left |
autoClose | auto close toast after N seconds. Defaults to 0 |
Component Events
Event | Description | Args |
---|---|---|
toast-root:close | emits when the toast closes |
CSS Classes
Class | Description |
---|---|
.toast-root | the class applied to the root element |
.toast-root-position-top | the class applied to the root element when positioned top |
.toast-root-position-right | the class applied to the root element when positioned right |
.toast-root-position-left | the class applied to the root element when positioned left |
.toast-root-position-bottom | the class applied to the root element when positioned bottom |
ToastHeader
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.toast-header | the class applied to the root element |
ToastContent
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.toast-content | the class applied to the root element |
ToastAction
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.toast-action | the class applied to the root element |