media_player_client/src/pages/RightToolBar.vue

46 lines
1.0 KiB
Vue

<template>
<div @click="(evt) => evt.stopPropagation()">
<q-tabs
v-model="tab_value"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab no-caps name="mode" :label="$t('mode')" />
<q-tab no-caps name="plan" :label="$t('plan')" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab_value" animated>
<q-tab-panel name="mode">
<mode-tree />
</q-tab-panel>
<q-tab-panel name="plan">
<plan-tree />
</q-tab-panel>
</q-tab-panels>
</div>
<slot />
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import ModeTree from "src/components/ModeTree.vue";
import PlanTree from "src/components/PlanTree.vue";
export default defineComponent({
name: "PageRightToolBar",
components: { ModeTree, PlanTree },
setup() {
let tab_value = ref("mode");
return { tab_value };
},
});
</script>