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"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.4.1",
|
||||
"bootstrap-vue": "^2.12.0",
|
||||
"core-js": "^3.6.4",
|
||||
"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