{
return list6.map(item => (
setTab7value(item.paneKey)}
className={`nut-tabs__titles-item ${tab7value == item.paneKey ? 'active' : ''}` }
key={item.paneKey}
>
{item.icon && }
{ item.title }
))}
}>
{list6.map(item => (
{ item.title }
))}
>
);
};
export default App;
```
:::
## API
### Tabs Props
| 参数 | 说明 | 类型 | 默认值 |
|---------------|-----------------------------------------------|---------------|------------|
| value | 绑定当前选中标签的标识符 | number,string | 0 |
| color | 标签选中色 | string | #1a1a1a |
| background | 标签栏背景颜色 | string | #f5f5f5 |
| direction | 使用横纵方向 可选值 horizontal、vertical | string | horizontal |
| type | 选中底部展示样式 可选值 line、smile | string | line |
| titleScroll | 标签栏是否可以滚动 | boolean | false |
| ellipsis | 是否省略过长的标题文字 | boolean | true |
| animatedTime | 切换动画时长,单位 ms 0 代表无动画 | number,string | 300 |
| titleGutter | 标签间隙 | number,string | 0 |
| titleNode | 自定义导航区域 | () => JSX.Element[] | 0 |
| size | 标签栏字体尺寸大小 可选值 large normal small | string | normal |
## Tabs Children
| 名称 | 说明 |
|---------|----------------|
| default | 自定义内容 |
### Tabpane Props
| 参数 | 说明 | 类型 | 默认值 |
|----------|-------------------------|---------|------------------|
| title | 标题 | string | |
| paneKey | 标签 Key , 匹配的标识符 | string | 默认索引0,1,2... |
| disabled | 是否禁用标签 | boolean | false |
### Tabs Events
| 事件名 | 说明 | 回调参数 |
|--------|--------------------------|--------------------------|
| click | 点击标签时触发 | {title,paneKey,disabled} |
| change | 当前激活的标签改变时触发 | {title,paneKey,disabled} |