<template>
  <div style="height: 100%" class="px-1">
    <q-tabs model-value="currentSelectedTabRef" align="left" dense inline-label shrink outside-arrows mobile-arrows :breakpoint="0" no-caps>
      <q-tab name="setting" label="设置" />
      <q-tab name="style" label="样式" />
      <q-tab name="text" label="文本" />
      <q-tab name="arrange" label="排列" />
    </q-tabs>

    <q-tab-panels v-model="currentSelectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)">
      <q-tab-panel name="setting" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
      <q-tab-panel name="style" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
      <q-tab-panel name="text" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
      <q-tab-panel name="arrange" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
    </q-tab-panels>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const currentSelectedTabRef = ref('style');
</script>
