TabMenu vue

resources/js/components/TabMenu.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <div class="tabs is-centered">
+            <ul>
+                <li v-for="(tab, index) in tabs" :class="{ 'is-active': selected == index }">
+                    <a @click="select(index)">
+                        <span>{{ names[index] }}</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div v-for="(tab, index) in tabs" v-show="selected == index">
+            <slot :name="tab"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                selected: 0,
+            }
+        },
+        mounted() {
+            select(0)
+        },
+        methods: {
+            select(index) {
+                this.selected = index
+            }
+        },
+        props: {
+            'tabs': Array,
+            'names': Array,
+        },
+    }
+</script>