diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-04 03:11:44 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:36 +0300 |
commit | 4e90eed0a2b03b675f93bd3e731cb72101266c47 (patch) | |
tree | 7c368efeebf7ba57f30144bff9cd31f57e41b055 /docs/.vuepress | |
parent | 3f6710a09c953405cc0bc8014eab89887122b17d (diff) | |
download | webui-vue-4e90eed0a2b03b675f93bd3e731cb72101266c47.tar.xz |
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 <derick.montague@ibm.com>
Change-Id: I89bf2aa8b3fdb9294354a80c98ccf692b6e3615a
Diffstat (limited to 'docs/.vuepress')
-rw-r--r-- | docs/.vuepress/components/BmcToasts.vue | 36 | ||||
-rw-r--r-- | docs/.vuepress/config.js | 1 | ||||
-rw-r--r-- | docs/.vuepress/enhanceApp.js | 11 |
3 files changed, 47 insertions, 1 deletions
diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue new file mode 100644 index 00000000..15a480f6 --- /dev/null +++ b/docs/.vuepress/components/BmcToasts.vue @@ -0,0 +1,36 @@ +<template> + <div> + <b-button variant="success" @click="makeSuccessToast()">Show Success</b-button> + <b-button variant="danger" @click="makeErrorToast()">Show Error</b-button> + <b-button variant="warning" @click="makeWarningToast()">Show Warning</b-button> + <b-button variant="info" @click="makeInfoToast()">Show Info</b-button> + </div> +</template> + +<script> +import BVToastMixin from '../../../src/components/Mixins/BVToastMixin'; +export default { + name: 'BmcToasts', + mixins: [BVToastMixin], + 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.'); + }, + } +} +</script> +<style scoped> + button { + margin-right: .5rem; + margin-bottom: 1rem; + } +</style>
\ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 2be074e4..680c98ef 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -45,6 +45,7 @@ module.exports = { children: [ "/guide/components/", "/guide/components/button", + "/guide/components/toast", ] } ], diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 59c1f925..799cf208 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,10 +1,19 @@ +// OpenBMC Imports import "../../src/assets/styles/_obmc-custom.scss"; +import BVToastMixin from "../../src/components/Mixins/BVToastMixin"; + +// Bootstrap-vue Plugin imports import { - ButtonPlugin + ButtonPlugin, + ToastPlugin } from 'bootstrap-vue'; export default ({ Vue }) => { Vue.use(ButtonPlugin); + Vue.use(ToastPlugin); + + // BMC Components and Mixins + Vue.mixin('BVToastMixin', BVToastMixin); }
\ No newline at end of file |