Tabs 标签页 ​

<f-tabs>
  <f-tabs-item label="如烟">
    <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
    <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p>
  </f-tabs-item>
  <f-tabs-item label="盛夏光年">
    <p>长大 难道是人必经的溃烂。</p>
  </f-tabs-item>
  <f-tabs-item label="我心中尚未崩坏的地方">
    <p>就算会有一天，没人与我合唱，至少在我的心中，还有个尚未崩坏的地方。</p>
  </f-tabs-item>
</f-tabs>

<template>
  <f-tabs :type="type" :position="position">
    <f-tabs-item label="知足">
      <p>怎么去拥有一道彩虹，怎么去拥抱一夏天的风</p>
    </f-tabs-item>
    <f-tabs-item label="星空">
      <p>摸不到的颜色是否叫彩虹，看不到的拥抱是否叫做微风</p>
    </f-tabs-item>
    <f-tabs-item label="彩虹">
      <p>你的爱就像彩虹，我张开了手却只能抱住风</p>
    </f-tabs-item>
  </f-tabs>

  <div>
    风格：
    <f-radio-group v-model="type">
      <f-radio label="line">line</f-radio>
      <f-radio label="card">card</f-radio>
      <f-radio label="segment">segment</f-radio>
    </f-radio-group>
  </div>

  <div>
    方向：
    <f-radio-group v-model="position">
      <f-radio label="top">top</f-radio>
      <f-radio label="right">right</f-radio>
      <f-radio label="bottom">bottom</f-radio>
      <f-radio label="left">left</f-radio>
    </f-radio-group>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import type { TabsType, TabsPosition } from 'fighting-design'

  const type = ref<TabsType>('line')
  const position = ref<TabsPosition>('top')
</script>

<template>
  <f-tabs :justify-content="justifyContent">
    <f-tabs-item label="登录">
      <p>在这登录</p>
    </f-tabs-item>
    <f-tabs-item label="注册">
      <p>在这注册！！</p>
    </f-tabs-item>
  </f-tabs>

  <div>
    对齐方式：
    <f-radio-group v-model="justifyContent">
      <f-radio label="flex-start">flex-start</f-radio>
      <f-radio label="center">center</f-radio>
      <f-radio label="flex-end">flex-end</f-radio>
      <f-radio label="space-between">space-between</f-radio>
      <f-radio label="space-around">space-around</f-radio>
    </f-radio-group>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import type { TabsJustifyContent } from 'fighting-design'

  const justifyContent = ref<TabsJustifyContent>()
</script>

<template>
  <f-tabs :on-switch="onSwitch">
    <f-tabs-item label="个人信息" name="name">
      <p>小芳，女</p>
    </f-tabs-item>
    <f-tabs-item label="爱好(等一秒)" name="hobby">
      <p>疯狂星期四，V我50~</p>
    </f-tabs-item>
    <f-tabs-item label="年龄" name="age" />
  </f-tabs>
</template>

<script lang="ts" setup>
  import { FMessage } from 'fighting-design'

  const onSwitch = (name: unknown): boolean | Promise<boolean> => {
    switch (name) {
      case 'hobby':
        return new Promise<boolean>(resolve => {
          FMessage.warning('稍等一下~')
          setTimeout(() => {
            resolve(true)
          }, 1000)
        })
      case 'age':
        FMessage.danger('这个不能说')
        return false
      default:
        return true
    }
  }
</script>

<f-tabs>
  <template #prefix>
    <f-button type="primary">前缀</f-button>
  </template>
  <template #suffix>
    <f-button type="primary">后缀</f-button>
  </template>

  <f-tabs-item label="如烟">
    <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
    <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p>
  </f-tabs-item>
  <f-tabs-item label="盛夏光年">
    <p>长大 难道是人必经的溃烂。</p>
  </f-tabs-item>
  <f-tabs-item label="我心中尚未崩坏的地方">
    <p>就算会有一天，没人与我合唱，至少在我的心中，还有个尚未崩坏的地方。</p>
  </f-tabs-item>
</f-tabs>

<template>
  <f-tabs :trigger="trigger">
    <f-tabs-item label="如烟">
      <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
      <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p>
    </f-tabs-item>
    <f-tabs-item label="盛夏光年">
      <p>长大 难道是人必经的溃烂。</p>
    </f-tabs-item>
    <f-tabs-item label="我心中尚未崩坏的地方">
      <p>就算会有一天，没人与我合唱，至少在我的心中，还有个尚未崩坏的地方。</p>
    </f-tabs-item>
  </f-tabs>

  <div>
    触发方式：
    <f-radio-group v-model="trigger">
      <f-radio label="click">click</f-radio>
      <f-radio label="hover">hover</f-radio>
    </f-radio-group>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import type { TabsTrigger } from 'fighting-design'

  const trigger = ref<TabsTrigger>('click')
</script>