---
nav:
  title: 组件
  order: 1
group:
  title: Navigation
  order: 2
title: PisellTabbar
order: 10
category: pro
---

# PisellTabbar - 多层级 Tabbar 组件

## 简介

PisellTabbar 是一个支持最多 3 层级的 Tab 导航组件，适用于商品分类、菜单导航等多层级场景。

## 特性

- 🎯 **多层级支持**: 支持最多 3 层级的级联 Tab 导航
- 🎨 **灵活配置**: 支持自定义层级配置、样式和展开按钮
- 📱 **响应式**: 支持展开/收起模式，适配不同屏幕尺寸
- 🔄 **受控模式**: 支持完全受控的选中状态管理
- ⚡ **性能优化**: 使用 memo、useCallback 等优化性能
- 🎭 **TypeScript**: 完整的 TypeScript 类型定义

## 基础用法

```tsx
import { PisellTabbar } from '@pisell/materials';
import { useState } from 'react';

const Demo = () => {
  const [value, setValue] = useState([1, 10, 100]);

  const dataSource = [
    {
      id: 1,
      name: '分类1',
      icon: 'icon1.png',
      children: [
        {
          id: 10,
          name: '子分类1-1',
          children: [{ id: 100, name: '子子分类1-1-1' }],
        },
      ],
    },
    {
      id: 2,
      name: '分类2',
    },
  ];

  return (
    <PisellTabbar dataSource={dataSource} value={value} onChange={setValue} />
  );
};

export default Demo;
```

## API

### PisellTabbar Props

| 参数         | 说明                            | 类型                                                     | 默认值 | 版本 |
| ------------ | ------------------------------- | -------------------------------------------------------- | ------ | ---- |
| dataSource   | 数据源                          | `TabbarDataSource[]`                                     | `[]`   | -    |
| value        | 当前选中的值（多层级 key 数组） | `(string \| number)[]`                                   | -      | -    |
| onChange     | 值变化回调                      | `(value: (string \| number)[]) => void`                  | -      | -    |
| className    | 自定义类名                      | `string`                                                 | -      | -    |
| style        | 自定义样式                      | `CSSProperties`                                          | -      | -    |
| levelConfig  | 层级配置                        | `Partial<Record<LevelType, Partial<TabbarLevelConfig>>>` | -      | -    |
| expandConfig | 展开配置                        | `ExpandConfig`                                           | -      | -    |
| maxLevel     | 最大层级数                      | `1 \| 2 \| 3`                                            | `3`    | -    |

### TabbarDataSource

```typescript
interface TabbarDataSource {
  id: string | number; // 唯一标识
  name: string; // 显示名称
  slug?: string; // URL slug
  icon?: string; // 图标 URL 或图标名称
  children?: TabbarDataSource[]; // 子级数据
  customClick?: boolean; // 自定义点击事件标识
  key?: string; // 唯一 key
}
```

### TabbarLevelConfig

```typescript
interface TabbarLevelConfig {
  superTabsBg: string; // SuperTabs 背景色
  cardWidth: number; // 卡片宽度
  cardHeight: number; // 卡片高度
  paddingLeft?: number; // 左侧缩进
}
```

### ExpandConfig

```typescript
interface ExpandConfig {
  active: {
    // 激活状态配置
    icon: string;
    text: string;
  };
  inactive: {
    // 未激活状态配置
    icon: string;
    text: string;
  };
}
```

## 进阶用法

### 自定义层级配置

```tsx
import { PisellTabbar } from '@pisell/materials';
import { useState } from 'react';

const dataSource = [
  {
    id: 1,
    name: '分类1',
    icon: 'icon1.png',
    children: [
      {
        id: 10,
        name: '子分类1-1',
        children: [{ id: 100, name: '子子分类1-1-1' }],
      },
    ],
  },
  {
    id: 2,
    name: '分类2',
  },
];

const Demo = () => {
  const [value, setValue] = useState([1, 10, 100]);

  return (
    <PisellTabbar
      dataSource={dataSource}
      value={value}
      onChange={setValue}
      levelConfig={{
        level1: {
          superTabsBg: '#custom-color',
          cardWidth: 120,
          cardHeight: 80,
        },
        level2: {
          cardWidth: 100,
        },
      }}
    />
  );
};
export default Demo;
```

### 自定义展开按钮

```tsx
import { PisellTabbar } from '@pisell/materials';
import { useState } from 'react';

const Demo = () => {
  const [value, setValue] = useState([1, 10, 100]);

  const dataSource = [
    {
      id: 1,
      name: '分类1',
      icon: 'icon1.png',
      children: [{ id: 10, name: '子分类1-1' }],
    },
  ];

  return (
    <PisellTabbar
      dataSource={dataSource}
      value={value}
      onChange={setValue}
      expandConfig={{
        active: {
          icon: 'custom-minimize-icon',
          text: '收起',
        },
        inactive: {
          icon: 'custom-expand-icon',
          text: '展开',
        },
      }}
    />
  );
};
export default Demo;
```

## 注意事项

1. **数据结构**: 确保数据源符合 `TabbarDataSource` 类型定义
2. **受控使用**: 使用 `value` 和 `onChange` 时，确保正确同步状态
3. **层级深度**: 建议不超过 3 层级，避免用户体验问题
4. **性能优化**: 大数据量时，考虑虚拟滚动或分页加载
