---
url: https://ain.hmgf.hxcn.space/contribution/project-components/tabs.md
description: 使用 Tabs 与 Tab 构建页签内容，支持代码、多语言和文件树展示。
---

# Tabs 组件

`Tabs` 适合在同一块区域对比多种内容（如多语言代码、不同目录结构、不同配置方案）。

## 基础用法

```md
<Tabs default-value="ts" label="多语言示例">
  <Tab value="ts" label="TypeScript">...</Tab>
  <Tab value="py" label="Python">...</Tab>
  <Tab value="tree" label="File Tree">...</Tab>
</Tabs>
```

## 网盘下载切换

\<DownloadTabs
title="网盘下载"
:providers="\[
{ value: 'baidu', description: '主下载线路，适合国内网络环境。' },
{ value: '123pan', label: '123网盘', description: '备用下载线路。' }
]"

>

\<template #default="{ provider }">






## 禁用页签

## Props

### Tabs

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `label` | `string` | `Tabs` | 页签组可访问标签。 | `label="多语言示例"` |
| `defaultValue` | `string` | `''` | 初始激活 tab 的 `value`。 | `default-value="ts"` |

### Tab

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `value` | `string` | - | 唯一标识（必填）。 | `value="ts"` |
| `label` | `string` | `value` | 页签标题。 | `label="TypeScript"` |
| `icon` | `string` | `''` | 页签图标。 | `icon="mdi:language-typescript"` |
| `disabled` | `boolean` | `false` | 禁用该页签。 | `:disabled="true"` |