# @beisen-phoenix/tabs

> > @beisen-phoenix/tabs

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/tabs
pnpm add @beisen-phoenix/tabs
yarn add @beisen-phoenix/tabs
bun add @beisen-phoenix/tabs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-03-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 345.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/tabs
- npm.io page: https://npm.io/package/@beisen-phoenix/tabs

## Dependencies (10)

- [raf](https://npm.io/package/raf.md) ^3.4.1
- [rc-util](https://npm.io/package/rc-util.md) ^4.6.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [rc-hammerjs](https://npm.io/package/rc-hammerjs.md) ^0.6.9
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [create-react-context](https://npm.io/package/create-react-context.md) 0.2.3
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/dropdown](https://npm.io/package/@beisen-phoenix/dropdown.md) ^3.3.55
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1
- [@beisen-phoenix/single-select-list](https://npm.io/package/@beisen-phoenix/single-select-list.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- 3.3.41 — 2019-11-21
- … 414 more at https://npm.io/package/@beisen-phoenix/tabs/versions

## README

# 标签页组件

> @beisen-phoenix/tabs


###changelog
2019-11-19 3.3.35版本
1、新增 contentAnimated：是否使用动画切换content

## 概述

> 选项卡切换组件。

## API

### Tabs
| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string | - | No |
| navWrapper | - | function | arg => arg | No |
| onChange | 切换面板的回调 | function(activeKey) | () => {} | No |
| prefixCls | 样式前缀 | string | 'beisen-phoenix-tabs' | No |
| className | 类名 | string | - | No |
| tabBarPosition | 页签位置，可选值有 'top' 'right' 'bottom' 'left' | string | 'top' | No |
| tabType | 页签的基本样式,可选值包括(base、button、super、secondary) | string | 'base' | No |
| style | tab bar 的样式 | object | {} | No |
| disableKeyEvent | 是否禁用上下左右键切换tab| boolean| false| No |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | - | No |
| destroyInactiveTabPane | 是否销毁未激活的tabPane | boolen | false | No |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | () => React.ReactNode | - | No |
| renderTabContent | 替换 TabContent，用于二次封装标签内容 | () => React.ReactNode | - | No |
| showMoreBtn | 是否开启更多按钮功能需要开发者参数控制 | boolean | - | No |
| customStyle | 用于tabType为`button` 页签，配置自定义选中按钮颜色： {index: {background:"#FFAB24"}} | object | - | No |
| contentAnimated | 是否使用动画切换content | boolean | true| No |

### TabContent

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| animatedWithMargin | 动画切换是否改变外边距样式 | boolean | - | No |
| animated | 是否使用动画切换 Tabs | boolean | true | No |
| prefixCls | 样式前缀 | string | - | No |
| activeKey | 当前激活 tab 面板的 key | string | - | No |
| style | 样式 | object | - | No |
| tabBarPosition | 页签位置，可选值有 'top' 'right' 'bottom' 'left' | string | - | No |
| className | 类名 | string | - | No |


### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- | --- | --- |
| classname | 类名 | string | - | No |
| active | 当前激活 tab 面板的 key | boolean | - | No |
| style | 样式 | object | - | No |
| destroyInactiveTabPane | 是否销毁未激活的tabPane | string | - | No |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | - | No |
| placeholder | 描述输入字段预期值的简短的提示信息 | string | - | No |
| rootPrefixCls | 根样式前缀 | string | - | No |
| key | 对应 activeKey | string | - | No |
| tab | 选项卡头显示文字 |string | ReactNode | No |
| disabled | 禁用 | boolean | false | No |

---
_Source: https://npm.io/package/@beisen-phoenix/tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._