# 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.