Tabs 选项卡

选项卡

这是选项卡

选项1

选项2

选项3

这是内容

这是内容1

这是内容2

这是内容3

选项卡

这是 Tabs 的基础例子

<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref('zero')

function changeTab(obj: { label: string;name: number }) {
  console.log(obj)
}
</script>

<template>
  <div class="tabs-demo">
    <NpTabs v-model="activeName" @tab-click="changeTab">
      <NpTabsPanel label="这是选项卡" name="zero">
        这是内容
      </NpTabsPanel>
      <template v-for="num in 3" :key="num">
        <NpTabsPanel :label="`选项${num}`" :name="`name${num}`">
          这是内容{{ num }}
        </NpTabsPanel>
      </template>
    </NpTabs>
  </div>
</template>

<style scoped>
.tabs-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

这是选项卡

选项1

选项2

选项3

这是内容

这是内容1

这是内容2

这是内容3

选项卡

这是 Tabs 卡片的例子

<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref('zero')

function changeTab(obj: { label: string;name: number }) {
  console.log(obj)
}
</script>

<template>
  <div class="tabs-demo">
    <NpTabs v-model="activeName" green type="card" @tab-click="changeTab">
      <NpTabsPanel label="这是选项卡" name="zero">
        这是内容
      </NpTabsPanel>
      <template v-for="num in 3" :key="num">
        <NpTabsPanel :label="`选项${num}`" :name="`name${num}`">
          这是内容{{ num }}
        </NpTabsPanel>
      </template>
    </NpTabs>
  </div>
</template>

<style scoped>
.tabs-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>