Message component

parent 3e5e563e
Pipeline #2678 passed with stage
in 3 minutes and 27 seconds
......@@ -9,6 +9,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
......
<template>
<div class="hello">
<h3>
One Hello World wasn't enough :p
</h3>
</div>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
<!-- Add "scoped" attribute to limit SCSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
background-color: #ff0000;
}
</style>
\ No newline at end of file
<!--
An alert message using Django or Bootstrap message levels
props:
variant: debug, info, success, warning or error
"debug" is mapped to Boostrap secondary color.
"error" is mapped to Boostrap danger color.
-->
<template>
<b-alert
:variant="variant"
dismissible
show
fade
>
<slot></slot>
</b-alert>
</template>
<!--
Many modern browsers implement an optimization for <style> tags either cloned
from a common node or that have identical text, to allow them to share a single
backing stylesheet. With this optimization the performance of external and
internal styles should be similar.
From https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
So it is not a problem to import all Boostrap here.
-->
<style lang="sass">
@import '~bootstrap'
@import '~bootstrap-vue'
</style>
<script>
import Vue from "vue";
import { BAlert } from "bootstrap-vue";
Vue.component("b-alert", BAlert);
export default {
name: "Message",
props: ["tags"],
computed: {
variant: function() {
switch (this.tags) {
case "error":
return "danger";
case "debug":
return "secondary";
default:
return this.tags;
}
}
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment