49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
<template>
|
|
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
|
|
<div class="flex items-center">
|
|
<span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
|
|
<a
|
|
v-for="(link, index) in links.filter((link) => link.icon === undefined)"
|
|
:key="index"
|
|
@click.prevent="$emit(link.event)"
|
|
href="#"
|
|
class="btn label btn-primary-light"
|
|
>
|
|
<span v-if="link.label" v-text="link.label"></span>
|
|
<svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
|
|
</a>
|
|
<a
|
|
v-for="(link, index) in links.filter((link) => link.icon !== undefined)"
|
|
:key="index"
|
|
:href="link.href"
|
|
class="btn label icon btn-primary-light ml-1"
|
|
>
|
|
<span v-if="link.label" v-text="link.label"></span>
|
|
<svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
|
|
</a>
|
|
</div>
|
|
<div class="flex ml-4">
|
|
<a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
|
|
<svg-sprite class="w-3 h-3" src="close"></svg-sprite>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
links: {
|
|
default: function () {
|
|
return [];
|
|
},
|
|
},
|
|
title: {
|
|
default: function () {
|
|
return '';
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|