<!--
 * @Author: Devin
 * @Date: 2023-02-16 09:37:37
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-16 17:47:09
 * @Description: 
-->
<template>
  <common-panel>
    <common-tabs
      :tabs="tabs"
      :components="components"
      :active-tab="activeTab"
    ></common-tabs>
  </common-panel>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import CardDemo from './CardDemo.vue';
import GridDemo from './GridDemo.vue';
import TableDemo from './TableDemo.vue';

const components = shallowRef({
  card: CardDemo,
  grid: GridDemo,
  table: TableDemo
});
const tabs = ref<any>([
  { label: '表格示例', name: 'card' },
  { label: '栅格示例', name: 'grid' },
  { label: '卡片示例', name: 'table' }
]);

const activeTab = ref<any>('card');
</script>

<style scoped lang="scss"></style>