65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
|
<nav
|
|
class="nav-extended"
|
|
:class="primaryColor"
|
|
>
|
|
<div class="nav-wrapper container" />
|
|
<div class="nav-content container">
|
|
<ul class="tabs tabs-transparent">
|
|
<li class="tab">
|
|
<a
|
|
@click.stop.prevent="changeTab('inventory', $event)"
|
|
>Inventur</a>
|
|
</li>
|
|
<li class="tab">
|
|
<a
|
|
class="active"
|
|
TweenedNumber
|
|
@click.stop.prevent="changeTab('article', $event)"
|
|
>Artikelliste</a>
|
|
</li>
|
|
<li class="tab">
|
|
<a
|
|
@click.stop.prevent="changeTab('calc', $event)"
|
|
>Rechner</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import M from 'materialize-css';
|
|
|
|
export default {
|
|
props: {
|
|
primaryColor: {
|
|
type: String,
|
|
default: "red"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: []
|
|
}
|
|
},
|
|
mounted() {
|
|
var tabs = document.getElementsByClassName("tabs")[0];
|
|
M.Tabs.init(tabs, {});
|
|
this.tabs = M.Tabs.getInstance(tabs);
|
|
},
|
|
methods: {
|
|
changeTab(tabId, event) {
|
|
this.view = tabId;
|
|
this.tabs._handleTabClick(event);
|
|
this.tabs.updateTabIndicator();
|
|
this.$emit("changed-tab", this.view);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|