---
order: 6
group:
  title: 文本
  order: 40
---

## 图标 Tab

可改变背景、文字样式、标题名称

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  id: '1',
  data: [
    {
      name: '安防事件',
      icon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1116e57c-2a62-493a-8d91-d730cf6e9b67.svg',
      selectIcon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/b7434e33-4c02-4c8d-9c1f-12964e61ec83.svg',
    },
    {
      name: '安防设备',
      icon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/730e4dee-2837-43d7-b96c-241c176df02a.svg',
      selectIcon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/6f0c0975-cb21-494e-8057-36620302e2cb.svg',
    },
  ],
  isLoop: true,
  timeGap: 2000,
  titleStyle: {
    fontSize: 14,
    color: '#999',
  },
  activeStyle: {
    color: '#2db9ff',
    borderBottomWidth: '2px',
    borderBottomColor: '#2db9ff',
  },
  size: { width: '200px', height: '40px' },
};

export default () => <Charts.IconTabs {...props} />;
```

包含初始选中 tab

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  id: '1',
  data: [
    {
      name: '安防事件',
      icon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1116e57c-2a62-493a-8d91-d730cf6e9b67.svg',
      selectIcon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/b7434e33-4c02-4c8d-9c1f-12964e61ec83.svg',
    },
    {
      name: '安防设备',
      icon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/730e4dee-2837-43d7-b96c-241c176df02a.svg',
      selectIcon:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/6f0c0975-cb21-494e-8057-36620302e2cb.svg',
    },
  ],
  isLoop: false,
  timeGap: 2000,
  titleStyle: {
    fontSize: 14,
    color: '#999',
  },
  activeStyle: {
    color: '#2db9ff',
    borderBottomWidth: '2px',
    borderBottomColor: '#2db9ff',
  },
  size: { width: '200px', height: '40px' },
  activeIndex: 1,
};

export default () => <Charts.IconTabs {...props} />;
```

## API

| 参数       | 说明       | 类型   |
| ---------- | ---------- | ------ |
| size       | 容器的宽高 | object |
| title      | 标题名称   | string |
| total      | 总数       | number |
| unit       | 单位       | string |
| titleStyle | 标题样式   | object |
| totalStyle | 总数样式   | object |
| unitStyle  | 单位样式   | object |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |

### titleStyle

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| fontSize   | 字体大小 | number |
| fontFamily | 字体     | string |
| color      | 字体颜色 | string |
| fontWeight | 字体粗细 | string |
| background | 背景色   | string |

### totalStyle

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| fontSize   | 字体大小 | number |
| fontFamily | 字体     | string |
| color      | 字体颜色 | string |
| fontWeight | 字体粗细 | string |

### unitStyle

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| fontSize   | 字体大小 | number |
| fontFamily | 字体     | string |
| color      | 字体颜色 | string |
| fontWeight | 字体粗细 | string |