diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue index cffd46cef..684bcfdef 100644 --- a/src/views/toast/ToastDoc.vue +++ b/src/views/toast/ToastDoc.vue @@ -2,14 +2,30 @@
+

ToastService

+

Toast messages are dynamically created using a ToastService that needs to be installed globally before the application + instance is created.

+ +import ToastService from 'primevue/toastservice'; +Vue.use(ToastService); + +//example application instance +new Vue({ + router, + render: h => h(App) +}).$mount('#app'); + +

Import

import Toast from 'primevue/toast';

Getting Started

+

Ideal location of a Toast is the main application template so that it can be used by any component within the application.

+

A single message is represented by the Message interface in PrimeVue that defines various properties such as severity, - summary and detail. Messages are displayed by using the add method on the ref of the Toast instance.

+ summary and detail. Messages are displayed by using the add method of the $toast property of the application.

this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000}); @@ -18,56 +34,93 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
- - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
severitystringnullSeverity of the message.
summaryelementnullSummary content of the message.
detailelementnullDetail content of the message.
closablebooleantrueWhether the message can be closed manually using the close icon.
stickyelementnullWhen enabled, message is not removed automatically.
lifenumber3000Delay in milliseconds to close the message automatically.
severitystringnullSeverity of the message.
summaryelementnullSummary content of the message.
detailelementnullDetail content of the message.
closablebooleantrueWhether the message can be closed manually using the close icon.
stickyelementnullWhen enabled, message is not removed automatically.
lifenumber3000Delay in milliseconds to close the message automatically.
groupstringnullKey of the Toast to display the message.
+
+ +

MessageService API

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
addmessage: Message instanceDisplays the message in a suitable Toast component.
removeGroupgroup: Name of the message groupClears the messages that belongs to the group.
removeAllGroup-Clears all the messages.

Severities

-

There are four possible values for the severity of a message.

+

There are four possible values for the severity of a message. Info is the default.

  • success
    • @@ -76,34 +129,34 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
  • error
-

Showing Messages

-

Show method accepts either a single message or an array of messages.

- -<Button label="Success" class="p-button-success" @click="showSuccess" /> -<Button @click="showMultiple" label="Multiple" class="p-button-warning" /> - - - -showSuccess() { - this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000}); -}, -showMultiple() { - this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000}); - this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000}); - this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000}); -} - -

Position

There are four positions available for the toast container defined by the position property that defaults to "topright". Other valid values are "topleft", "bottomleft" and "bottomright"

- - ??? - + +<Toast /> +<Toast position="topleft" /> +<Toast position="bottomleft" /> +<Toast position="bottomright" /> + + +

Groups

+

A message can be targeted to a specific Toast component if their group properties match. Messages without a group + are forwarded to the default Toast component that does not have a group defined. +

+ + +<Toast /> +<Toast position="mykey" /> + + + +this.$toast.add({severity:'success', summary: 'Default Message'}); +this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'}); +

Clearing Messages

-

removeAllGroups() method removes all messages from Toast.

+

removeGroup(group) clears the messages for a specific Toast whereas removeAllGroups() method clears all messages.

this.$toast.removeAllGroups(); @@ -112,26 +165,26 @@ this.$toast.removeAllGroups();
- - - - - - + + + + + + - - - - - - - - - - - - + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
groupstringnull???
positionstringtoprightPosition of the toast in viewport, valid values are "topright", "topleft", "bottomleft" and "bottomright".
groupstringnullUnique identifier of a message group.
positionstringtoprightPosition of the toast in viewport, valid values are "topright", "topleft", "bottomleft" and "bottomright".
@@ -141,40 +194,40 @@ this.$toast.removeAllGroups();
- - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
NameElement
p-toastMain container element.
p-toast-containerContainer of a message item.
p-toast-itemMessage element.
p-toast-icon-closeClose icon of a message.
p-toast-imageSeverity icon.
p-toast-messageContainer of message texts.
p-toast-titleSummary of the message.
p-toastMain container element.
p-toast-containerContainer of a message item.
p-toast-itemMessage element.
p-toast-icon-closeClose icon of a message.
p-toast-imageSeverity icon.
p-toast-messageContainer of message texts.
p-toast-titleSummary of the message.