From f6df801b384118b946bb3b7b3248832ec70cfd0a Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Wed, 9 Dec 2020 18:37:11 -0600 Subject: Update component documentation The component structure was not consistent. We determined how we wanted to save image examples within the component directory, but not all of the components were updated. The result was that some images were not displaying on the component pages. This patchset resolves that issue, along with removing the page component since it is not an actual component within the application. - Add directory for each component, move example images to the directory, and update the image path - Create a page-title and page-section directory and index.md for each - Move content for page-title and page-section from the page.md file into the index.md within the respective component directory - Delete the page.md from the component directory as it is not a component - Update links to page.md in the page-anatomy.md file. Signed-off-by: Derick Montague Change-Id: I1e554adf71abb4c84f423a30d3c3b598f678ade0 --- docs/guide/components/toasts/index.md | 32 ++++++++++++++++++++++++++++++++ docs/guide/components/toasts/toast.png | Bin 0 -> 100290 bytes 2 files changed, 32 insertions(+) create mode 100644 docs/guide/components/toasts/index.md create mode 100644 docs/guide/components/toasts/toast.png (limited to 'docs/guide/components/toasts') diff --git a/docs/guide/components/toasts/index.md b/docs/guide/components/toasts/index.md new file mode 100644 index 00000000..271155a9 --- /dev/null +++ b/docs/guide/components/toasts/index.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. + +Toast message examples + +```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 diff --git a/docs/guide/components/toasts/toast.png b/docs/guide/components/toasts/toast.png new file mode 100644 index 00000000..97f9bc4c Binary files /dev/null and b/docs/guide/components/toasts/toast.png differ -- cgit v1.2.3