# business-tabs

### 说明

选项卡切换组件

### 演示

{% embed url="<https://codesandbox.io/s/businesstab-u5z9j>" %}

### 源码

<https://github.com/ddzy/ts-utility-plugins/tree/master/src/ddzy/business/tabs>

### 配置

| Name             | Type                                                                                                                 | Description | Required |
| ---------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | -------- |
| container        | string                                                                                                               | 挂载到的 DOM 容器 | false    |
| dataSource       | <p>Array<{</p><p>  tabPaneTitle: { icon?: string, text?: string, }, tabPaneContent: { text?: string, },</p><p>}></p> | 数据源         | false    |
| type             | 'line' \| 'card'                                                                                                     | 选项卡类型       | false    |
| mouse            | 'mouseenter' \| 'click'                                                                                              | 鼠标切换方式      | false    |
| defaultActiveKey | number                                                                                                               | 默认显示的选项卡    | false    |
| tabBarGap        | number                                                                                                               | 选项卡间距       | false    |
| tabBarStyle      | object                                                                                                               | 选项卡标题的样式    | false    |
| tabBarLineStyle  | object                                                                                                               | 选项卡标题线的样式   | false    |
| animated         | boolean                                                                                                              | 是否开启过渡动画    | false    |
| onChange         | (activeKey: number \| string) => void                                                                                | \*          | false    |
| onTabClick       | () => void                                                                                                           | \*          | false    |