From 4e90eed0a2b03b675f93bd3e731cb72101266c47 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Tue, 3 Mar 2020 18:11:44 -0600 Subject: Add toast component documentation - Add documentation that describes when and how to use a toast message with code snippets - Add an informational toast method in the BVToastMixin - Add BVToastMixin to enhaceApp to register mixin globally. Signed-off-by: Derick Montague Change-Id: I89bf2aa8b3fdb9294354a80c98ccf692b6e3615a --- docs/guide/components/toast.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 docs/guide/components/toast.md (limited to 'docs/guide/components') diff --git a/docs/guide/components/toast.md b/docs/guide/components/toast.md new file mode 100644 index 00000000..5dc2e0e9 --- /dev/null +++ b/docs/guide/components/toast.md @@ -0,0 +1,32 @@ +# Toasts +Use a toast message to indicate the status of a user action. For example, a user saves a form successfully, a toast message with the `success` variant is displayed. If the user action was not successful, a toast message with the `danger` variant is displayed. + +There are different transitions for the toast messages. The `success` toast message will auto-hide after 10 seconds. The user must manually dismiss the `informational`, `warning`, and `error` toast messages. The `BVToastMixin` provides a simple API that generates a toast message that meets the transition guidelines. + + + +```js{5} +// Sample method from Reboot BMC page +rebootBmc() { + this.$store + .dispatch('controls/rebootBmc') + .then(message => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); +} + +// Methods used in this example +methods: { + makeSuccessToast() { + this.successToast('This is a success toast and will be dismissed after 10 seconds.'); + }, + makeErrorToast() { + this.errorToast('This is an error toast and must be dismissed by the user.'); + }, + makeWarningToast() { + this.warningToast('This is a warning toast and must be dismissed by the user.'); + }, + makeInfoToast() { + this.infoToast('This is an info toast and must be dismissed by the user.'); + }, +} +``` \ No newline at end of file -- cgit v1.2.3