50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<template>
|
|
<v-layout>
|
|
<v-flex xs12 text-xs-center mb-2>
|
|
<v-card color="blue lighten-4">
|
|
<v-card-text class="pb-0 pt-1">
|
|
<v-btn
|
|
v-for="tab in tabs"
|
|
:color="tab.code == active ? 'white' : 'grey lighten-5'"
|
|
class="white--text ma-0 tab-btn"
|
|
:class="[tab.code == active ? 'active' : '']"
|
|
@click="loader = 'loading3'"
|
|
flat
|
|
:key="tab.code"
|
|
:data="tab"
|
|
>
|
|
<v-icon left dark>{{ tab.icon }}</v-icon>
|
|
<h6 class="title">{{ tab.label }}</h6>
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.active {
|
|
border-bottom: solid 3px #ffeb3b!important;
|
|
}
|
|
|
|
.tab-btn {
|
|
min-width: 300px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data () {
|
|
return {
|
|
tabs : [
|
|
{"label":"PASIEN & DOKTER", "icon":"account_circle", "code":"01"},
|
|
{"label":"PEMERIKSAAN", "icon":"healing", "code":"02"},
|
|
{"label":"PEMBAYARAN", "icon":"attach_money", "code":"03"}
|
|
],
|
|
|
|
active : "01"
|
|
}
|
|
}
|
|
}
|
|
</script> |