---
tagName: ai-portal.flow-tabs
displayName: WrappedAiPortalFlowTabs
description: 流程标签页组件，提供带背景画布动效的标签导航，支持工具栏插槽和默认内容插槽。
category: navigate
source: "@next-bricks/ai-portal"
---

# WrappedAiPortalFlowTabs

> 流程标签页组件，提供带背景画布动效的标签导航，支持工具栏插槽和默认内容插槽。

## 导入

```tsx
import { WrappedAiPortalFlowTabs } from "@easyops/wrapped-components";
```

## Props

| 属性      | 类型     | 必填 | 默认值 | 说明                                  |
| --------- | -------- | ---- | ------ | ------------------------------------- |
| tabs      | `Tab[]`  | 否   | -      | 标签列表，每项包含 `id` 和 `label`    |
| activeTab | `string` | 否   | -      | 当前激活的标签 ID，点击标签时自动更新 |

## Events

| 事件       | detail                                       | 说明                                      |
| ---------- | -------------------------------------------- | ----------------------------------------- |
| onTabClick | `Tab` — { id: 标签 ID, label: 标签显示文本 } | 点击标签项时触发，同时更新 activeTab 属性 |

## Slots

| 名称    | 说明                 |
| ------- | -------------------- |
| toolbar | 标签栏右侧工具栏区域 |
| default | 标签页内容区域       |

## Examples

### Basic

基础标签页，展示多个流程步骤标签。

```tsx
<WrappedAiPortalHomeContainer>
  <WrappedAiPortalFlowTabs
    tabs={[
      { id: "foo", label: "Fooooo" },
      { id: "bar", label: "Baaaaar" },
      { id: "baz", label: "Baaaaaz" },
    ]}
    activeTab="foo"
    onTabClick={(e) => console.log(e.detail)}
  />
</WrappedAiPortalHomeContainer>
```

### With Toolbar Slot

在标签栏右侧添加工具栏操作按钮。

```tsx
<WrappedAiPortalHomeContainer>
  <WrappedAiPortalFlowTabs
    tabs={[
      { id: "design", label: "设计阶段" },
      { id: "develop", label: "开发阶段" },
      { id: "test", label: "测试阶段" },
      { id: "deploy", label: "部署阶段" },
    ]}
    activeTab="design"
    onTabClick={(e) => console.log(e.detail)}
  >
    <WrappedAiPortalIconButton
      slot="toolbar"
      icon={{ lib: "antd", icon: "filter" }}
      tooltip="筛选"
    />
  </WrappedAiPortalFlowTabs>
</WrappedAiPortalHomeContainer>
```

### With Content

标签页带内容区域，点击标签切换展示不同内容。

```tsx
<WrappedAiPortalHomeContainer>
  <WrappedAiPortalFlowTabs
    tabs={[
      { id: "overview", label: "概览" },
      { id: "detail", label: "详情" },
      { id: "history", label: "历史" },
    ]}
    activeTab="overview"
    onTabClick={(e) => console.log(e.detail)}
  >
    <span style={{ padding: 16, display: "block" }}>这里是内容区域</span>
  </WrappedAiPortalFlowTabs>
</WrappedAiPortalHomeContainer>
```