Notifications
Basic usage:
Displays a global notification message. Voicenter UI has registered the $notify property with some methods and global VcNotification component . the notification automatically closes after 4500ms, but by setting duration you can control its duration. Specifically, if set to 0, it will not close automatically. Note that duration receives a Number in milliseconds. Default Position: top-right
With types:
Position:
Notification can emerge from any corner you like. Position default is 'top-right'. Other valid values are "top-left", "top-center", "bottom-left", "bottom-center", "bottom-right" and "center". Position is set by props on VcNotification component.
Use HTML or Template
Templating allows customizing the content where the message instance is available as the implicit variable. You can use render function or just use Global or local component with render function
Attributes for Component
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| position | Position of the messages in viewport. | String | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center' | top-right |
| group | Unique identifier of a message group | String | --- | null |
| autoZIndex | Whether to automatically manage layering | Boolean | true | false | true |
| baseZIndex | Base zIndex value to use in layering | Number | --- | 3000 |
Attributes for Message
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| type | Type of Message | String | 'success' | 'info' | 'warning' | 'error' | undefined | undefined |
| title | Title content of the message. | String | --- | |
| message | Detail content of the message. | String | --- | |
| closable | Whether the message can be closed manually using the close icon. True if value not 'false' or duration '0' | Boolean | true | false | true |
| duration | Delay in milliseconds to close the message automatically. (0 - infinity) | Number | --- | 4500 |
| group | Key of the Toast to display the message. | String | --- | |
| styleClass | Style class of the message. | String | --- | |
| contentStyleClass | Style class of the content. | String | --- | |
| position | change position of group | String | --- | |
| component | Component for custom content of message. Use Name of Global component or render function (h()) | String | VNode | undefined | --- | undefined |
| componentAttrs | Attributes for component (will use v-bind for custom component) | Object | Array | undefined |
Message Service API
| Method | Description | Parameters |
|---|---|---|
| add | Displays the message in a suitable Notification component. | message: Message instance |
| removeGroup | Clears the messages that belongs to the group. | group: Name of the message group |
| removeAllGroup | Clears all the messages. |