diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-13 23:15:43 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:45 +0300 |
commit | fd22b5b0e770442294bd883a8b4e25ad512717ed (patch) | |
tree | c3a38703e92b1e7118d1b24a92b17db04eb01cd6 /src/components/Global/Alert.vue | |
parent | 4e90eed0a2b03b675f93bd3e731cb72101266c47 (diff) | |
download | webui-vue-fd22b5b0e770442294bd883a8b4e25ad512717ed.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.
- Register alert component in enhanceApp
- Replace Sass variables used in the StatusIcon component style block
to use the Boostrap theme-color and gray Sass functions so the colors
can be used in the Vuepress documentation custom components
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ibd93402c919a42bd5c24cc9e7c6c8fc6f17a4db4
Diffstat (limited to 'src/components/Global/Alert.vue')
-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> |