mirror of
https://github.com/romancm/gamebrary
synced 2024-12-18 15:23:14 +00:00
register modal header component
This commit is contained in:
parent
90632badff
commit
8e60a23548
2 changed files with 42 additions and 0 deletions
40
src/components/ModalHeader.vue
Normal file
40
src/components/ModalHeader.vue
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
<template lang="html">
|
||||||
|
<header>
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-0">{{ title }}</h5>
|
||||||
|
<small>{{ subtitle }}</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: String,
|
||||||
|
subtitle: String,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||||
|
header {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -5,6 +5,7 @@ import VueAxios from 'vue-axios';
|
||||||
import VueFire from 'vuefire';
|
import VueFire from 'vuefire';
|
||||||
import VueI18n from 'vue-i18n';
|
import VueI18n from 'vue-i18n';
|
||||||
import Icon from '@/components/Icon';
|
import Icon from '@/components/Icon';
|
||||||
|
import ModalHeader from '@/components/ModalHeader';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import VueAnalytics from 'vue-analytics';
|
import VueAnalytics from 'vue-analytics';
|
||||||
import Raven from 'raven-js';
|
import Raven from 'raven-js';
|
||||||
|
@ -31,6 +32,7 @@ Vue.use(VueAxios, axios);
|
||||||
Vue.use(VueFire);
|
Vue.use(VueFire);
|
||||||
Vue.use(VueI18n);
|
Vue.use(VueI18n);
|
||||||
Vue.component('icon', Icon);
|
Vue.component('icon', Icon);
|
||||||
|
Vue.component('modal-header', ModalHeader);
|
||||||
|
|
||||||
if (process.env.NODE_ENV !== 'development') {
|
if (process.env.NODE_ENV !== 'development') {
|
||||||
Raven
|
Raven
|
||||||
|
|
Loading…
Reference in a new issue