+
{{message.summary}}
{{message.detail}}
@@ -42,7 +42,7 @@ export default {
},
computed: {
containerClass() {
- return ['p-toast-item-container p-highlight', {
+ return ['p-toast-message', {
'p-toast-message-info': this.message.severity === 'info',
'p-toast-message-warn': this.message.severity === 'warn',
'p-toast-message-error': this.message.severity === 'error',
@@ -50,7 +50,7 @@ export default {
}];
},
iconClass() {
- return ['p-toast-image pi', {
+ return ['p-toast-message-icon pi', {
'pi-info-circle': this.message.severity === 'info',
'pi-exclamation-triangle': this.message.severity === 'warn',
'pi-times': this.message.severity === 'error',
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 8635d3e84..978bd65e4 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -124,14 +124,18 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
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"
+
There are four positions available for the toast container defined by the position property that defaults to "top-right". Other
+ valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
<Toast />
-<Toast position="topleft" />
-<Toast position="bottomleft" />
-<Toast position="bottomright" />
+<Toast position="top-left" />
+<Toast position="top-center" />
+<Toast position="top-right" />
+<Toast position="center" />
+<Toast position="bottom-left" />
+<Toast position="bottom-center" />
+<Toast position="bottom-right" />
Groups
@@ -176,8 +180,8 @@ this.$toast.removeAllGroups();
position |
string |
- topright |
- Position of the toast in viewport, valid values are "topright", "topleft", "bottomleft" and "bottomright". |
+ top-right |
+ Position of the toast in viewport. |
autoZIndex |
@@ -211,28 +215,28 @@ this.$toast.removeAllGroups();
Main container element. |
- p-toast-container |
+ p-toast-message |
Container of a message item. |
-
- p-toast-item |
- Message element. |
-
p-toast-icon-close |
Close icon of a message. |
- p-toast-image |
+ p-toast-icon |
Severity icon. |
- p-toast-message |
+ p-toast-message-content |
Container of message texts. |
p-toast-title |
Summary of the message. |
+
+
+ p-toast-title |
+ Detail of the message. |