diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-03 15:11:48 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-12 20:59:42 +0300 |
commit | 71650fff20c0ad29eb05d770736386863324b64e (patch) | |
tree | 2c3a71a9c71ab7c70f2d1ed0e5e7a437144e339f /src/components/Global | |
parent | 36016e45acae516045cbb74be40e74881a5fc95f (diff) | |
download | webui-vue-71650fff20c0ad29eb05d770736386863324b64e.tar.xz |
Add alert message component and documentation
- Add custom alert component to simplify the use of custom alerts
- Add documentation for using the custom alert
- Update the login error alert to use the alert component instead of
the Bootstrap-vue component.
- Add the enhanceApp and bmcAppPlugin to extend vuepress to use both
the BMC custom and Boostrap-Vue components along with the custom styles
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5c0b696ca47ddba0df18041d6c5ee7509bf23572
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/Alert.vue | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue new file mode 100644 index 00000000..bc65b6e9 --- /dev/null +++ b/src/components/Global/Alert.vue @@ -0,0 +1,33 @@ +<template> + <b-alert :show="show" :variant="variant"> + <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> + <status-icon :status="variant" /> + </div> + <div class="alert-content"> + <div class="alert-msg"><slot /></div> + </div> + </b-alert> +</template> + +<script> +import StatusIcon from '../Global/StatusIcon'; +import { BAlert } from 'bootstrap-vue'; + +export default { + name: 'Alert', + components: { + BAlert: BAlert, + StatusIcon: StatusIcon + }, + props: { + show: { + type: Boolean, + default: true + }, + variant: { + type: String, + default: '' + } + } +}; +</script> |