mirror of
https://gitlab2.federez.net/re2o/re2o
synced 2024-08-19 21:53:41 +00:00
Message component
This commit is contained in:
parent
3e5e563e91
commit
a4dbe48688
3 changed files with 59 additions and 21 deletions
|
@ -9,6 +9,8 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap": "^4.4.1",
|
||||||
|
"bootstrap-vue": "^2.12.0",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"vue": "^2.6.11"
|
"vue": "^2.6.11"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,21 +0,0 @@
|
||||||
<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>
|
|
57
static/components/Message.vue
Normal file
57
static/components/Message.vue
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
<!--
|
||||||
|
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>
|
Loading…
Reference in a new issue