Alerts
Component name: <v-alerts>
+ <v-alert>
Alerts are present on subpages and are used for contextual information that relates to the currently navigated topic.
Each alert is wrapped in a v-alerts group to highlight the alert type.
Multiple alerts can be shown in the same alerts group.
Examples
Info alerts
Error alerts
Global alerts
Dismissible alerts
By adding the dismissible
property, alerts can be permanently dismissed (state is saved in the browser's local storage). Dismissible alerts must be given a dismissible-id
which uniquely identifies the alert.
Components
v-alerts
Wrapper component for alerts.
API
Name | Type | Description | Default |
---|---|---|---|
info | Boolean | Use 'info' styling | true |
error | Boolean | Use 'error' styling | false |
global | [Boolean] | Show global alerts | false |
global-target | [String] | The portal to show alerts in | alerts |
interval | [Number] | Seconds between alert rotations | 6 |
expanded | Boolean | Whether to start in the expanded state | false |
dismissible | Boolean | Whether the alerts should be dismissible | false |
dismissible-id | String | Unique identifier for the group of alerts. Used together with dismissible | - |
v-alert
API
Name | Type | Description | Default |
---|---|---|---|
active | Boolean | Whether or not the alert is active | false |
Notice
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class
attribute.