TTabs / TTabPane / 标签页

Tabs organize content into switchable panels. Supports card style, controlled/uncontrolled modes, and justify alignment. / 标签页将内容组织为可切换的面板，支持卡片样式、受控/非受控模式和导航栏对齐。

TTabs Props

Prop	Type / 类型	Default / 默认值	Description / 说明
v-model	string	—	Active tab name (controlled)
defaultActive	string	—	Default tab (uncontrolled) / 默认激活
justify	'start' | 'center' | 'end' | 'fill'	—	Nav alignment
card	boolean	false	Card style (wraps in card-header/body)

TTabPane Props

Prop	Type / 类型	Default / 默认值	Description / 说明
name	string	—	Unique identifier (required) / 唯一标识（必填）
title	string	—	Tab title

Events / 事件

Event	Payload	Description / 说明
@update:modelValue	string	v-model update
@change	name: string	Tab switched

Basic Usage / 基础用法

<script setup lang="ts">
import { TTabs, TTabPane } from '@gulcc/tabler-vue'

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

<template>
  <TTabs v-model="active">
    <TTabPane name="tab1" title="Tab 1">
      Content 1 / 内容一
    </TTabPane>
    <TTabPane name="tab2" title="Tab 2">
      Content 2 / 内容二
    </TTabPane>
    <TTabPane name="tab3" title="Tab 3">
      Content 3 / 内容三
    </TTabPane>
  </TTabs>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TTabs, TTabPane } from '@gulcc/tabler-vue'

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

<template>
  <!-- Card style tabs / 卡片样式标签页 -->
  <TTabs v-model="active" card>
    <TTabPane name="profile" title="Profile / 个人资料">
      Profile content / 个人资料内容
    </TTabPane>
    <TTabPane name="settings" title="Settings / 设置">
      Settings content / 设置内容
    </TTabPane>
  </TTabs>

  <!-- Justified tabs / 等宽标签页 -->
  <TTabs v-model="active" justify="fill">
    <TTabPane name="a" title="Short / 短" />
    <TTabPane name="b" title="Medium / 中等" />
    <TTabPane name="c" title="Long Label / 长标签" />
  </TTabs>

  <!-- Centered tabs / 居中标签页 -->
  <TTabs v-model="active" justify="center">
    <TTabPane name="x" title="Tab X" />
    <TTabPane name="y" title="Tab Y" />
  </TTabs>

  <!-- Uncontrolled mode with default / 非受控模式 -->
  <TTabs default-active="tab-b">
    <TTabPane name="tab-a" title="First / 第一" />
    <TTabPane name="tab-b" title="Second / 第二" />
  </TTabs>
</template>

Tips / 避坑指南

• name is required on each TTabPane — it's used as the unique identifier for v-model binding
• In controlled mode (using v-model), the parent manages the active tab state
• In uncontrolled mode (using defaultActive), the component manages state internally
• card={true} wraps tabs inside Tabler's card-header/card-body structure
• justify="fill" makes all tabs equal width; "center" centers the nav bar