Messages and notifications
Standard inline messages
There are four categories of message: Error, Warning, Success and Information-only.
Usually they would appear at the top of the content, as they do here.
With JavaScript enabled, a close-button is added. When clicked, the message is set to display: none.
Messages with more content and links for testing purposes
Omnis sed unde vero et quia quisquam quisquam sit fuga numquam quia et rerum. quasi consectetur magnam in incidunt labore molestiae. ut est eos inventore tempore numquam iure et molestiae. deserunt saepe id et esse magnam et veritatis enim reprehenderit Est quaerat odit beatae natus et possimus corrupti. qui aliquid doloremque ea quia in nobis voluptas minima aliquam ipsum libero. sit ratione sunt illo rem ut sed odio iste consequuntur ab qui. vel velit voluptatem asperiores quam veritatis. nihil exercitationem veritatis sint laborum nemo nam dolor
Message with long email address for testing purposes
Toast-style notifications
Non-modal notifications for administrative screens.
Ususally, messages would appear at the top of the page on a page refresh, or inline with the relevant content.
When the user is interacting with more complex pages which are being updated without a full page refresh, it might be more appropriate to display notifications in a popup at the top of the page. These are often referred to as toasts.
These are transitory messages, whcih disappear after a short period of time. They are JavaScript-only.
Examples
Usage
Trigger a toast notification using the following:
UCASDesignFramework.toast.information('Some sort of informational message.')
UCASDesignFramework.toast.success('Friendly success message.')
UCASDesignFramework.toast.warning('A supportive warning message.')
UCASDesignFramework.toast.error('If possible, we would avoid showing an error message.')
There are no other options, currently.
Clear all notifications using the following:
UCASDesignFramework.toast.clear()