Tabs 选项卡 #

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

const active = ref('1')
</script>

<template>
  <vi-tabs v-model="active">
    <vi-tab label="Vue" name="1">Vue，渐进式 JavaScript 框架</vi-tab>
    <vi-tab label="React" name="2">React，用于构建用户界面的 JavaScript 库</vi-tab>
    <vi-tab label="Svelte" name="3">Svelte，控制性增强的 Web 应用程序</vi-tab>
    <vi-tab label="Solid" name="4">Solid，用于构建用户界面的简单且高性能的响应式</vi-tab>
  </vi-tabs>
</template>

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

const active1 = ref('1')
const active2 = ref('2')
</script>

<template>
  <vi-flex direction="column" gap="18px">
    <vi-tabs v-model="active1" type="normal" bar-half>
      <vi-tab label="Vue" name="1">Vue，渐进式 JavaScript 框架</vi-tab>
      <vi-tab label="React" name="2">React，用于构建用户界面的 JavaScript 库</vi-tab>
      <vi-tab label="Svelte" name="3">Svelte，控制性增强的 Web 应用程序</vi-tab>
      <vi-tab label="Solid" name="4">Solid，用于构建用户界面的简单且高性能的响应式</vi-tab>
    </vi-tabs>

    <vi-tabs v-model="active2" type="inner-card">
      <vi-tab label="Vue" name="1">Vue，渐进式 JavaScript 框架</vi-tab>
      <vi-tab label="React" name="2">React，用于构建用户界面的 JavaScript 库</vi-tab>
      <vi-tab label="Svelte" name="3">Svelte，控制性增强的 Web 应用程序</vi-tab>
      <vi-tab label="Solid" name="4">Solid，用于构建用户界面的简单且高性能的响应式</vi-tab>
    </vi-tabs>
  </vi-flex>
</template>

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

const active = ref('1')
const change = () => {
  const state = active.value <= '3' ? Number(active.value) + 1 : 1
  active.value = state.toString()
}
</script>

<template>
  <vi-button @click="change">动态切换</vi-button> <br />
  <vi-tabs v-model="active">
    <vi-tab label="Vue" name="1">Vue，渐进式 JavaScript 框架</vi-tab>
    <vi-tab label="React" name="2">React，用于构建用户界面的 JavaScript 库</vi-tab>
    <vi-tab label="Svelte" name="3">Svelte，控制性增强的 Web 应用程序</vi-tab>
    <vi-tab label="Solid" name="4">Solid，用于构建用户界面的简单且高性能的响应式</vi-tab>
  </vi-tabs>
</template>

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

const active = ref('1')
</script>

<template>
  <vi-tabs v-model="active" if-mode>
    <vi-tab label="Vue" name="1">Vue，渐进式 JavaScript 框架</vi-tab>
    <vi-tab label="React" name="2">React，用于构建用户界面的 JavaScript 库</vi-tab>
    <vi-tab label="Svelte" name="3">Svelte，控制性增强的 Web 应用程序</vi-tab>
    <vi-tab label="Solid" name="4">Solid，用于构建用户界面的简单且高性能的响应式</vi-tab>
  </vi-tabs>
</template>

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

const list = ref([
  { name: '1', label: 'Vue', content: 'Vue，渐进式 JavaScript 框架' },
  { name: '2', label: 'React', content: 'React，用于构建用户界面的 JavaScript 库' },
  { name: '3', label: 'Svelte', content: 'Svelte，控制性增强的 Web 应用程序' },
  { name: '4', label: 'Solid', content: 'Solid，用于构建用户界面的简单且高性能的响应式' }
])
const active = ref('1')
const handleRemove = (name: string) => {
  list.value = list.value.filter(v => v.name !== name)
}
</script>

<template>
  <vi-tabs v-model="active" removable @tab-remove="handleRemove">
    <vi-tab 
      v-for="item in list"
      :key="item.name"
      :name="item.name"
      :label="item.label">
      {{ item.content }}
    </vi-tab>
  </vi-tabs>
</template>

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

const list = ref([
  { name: '1', label: 'Vue', content: 'Vue，渐进式 JavaScript 框架' },
  { name: '2', label: 'React', content: 'React，用于构建用户界面的 JavaScript 库' },
  { name: '3', label: 'Svelte', content: 'Svelte，控制性增强的 Web 应用程序' },
  { name: '4', label: 'Solid', content: 'Solid，用于构建用户界面的简单且高性能的响应式' }
])
const active = ref('1')
const beforeChange = (name: string) => !(name === '2')
</script>

<template>
  <vi-tabs v-model="active" :before-change="beforeChange">
    <vi-tab 
      v-for="item in list"
      :key="item.name"
      :name="item.name"
      :label="item.label">
      {{ item.content }}
    </vi-tab>
  </vi-tabs>
</template>