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.

Info alert with custom icon

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	-
custom-icon-src	String	Add a custom icon to the alert	-

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.