Skip to content

Commit 0772714

Browse files
committed
docs: add Chinese README
1 parent 8db82ab commit 0772714

2 files changed

Lines changed: 118 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
</p>
1414
</div>
1515

16+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
17+
1618

1719
## Highlights
1820

README.zh-CN.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<div align="center">
2+
<h1>@rc-component/tabs</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>🗂️ React 标签页组件,支持可编辑标签、溢出滚动和自定义渲染。</p>
5+
6+
<p>
7+
<a href="https://www.npmjs.com/package/@rc-component/tabs"><img src="https://img.shields.io/npm/v/@rc-component/tabs.svg?style=flat-square" alt="npm version" /></a>
8+
<a href="https://www.npmjs.com/package/@rc-component/tabs"><img src="https://img.shields.io/npm/dm/@rc-component/tabs.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/tabs/actions"><img src="https://github.com/react-component/tabs/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/tabs"><img src="https://img.shields.io/codecov/c/github/react-component/tabs/master.svg?style=flat-square" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/tabs"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/tabs" alt="bundle size" /></a>
12+
<a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a>
13+
</p>
14+
</div>
15+
16+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
17+
18+
19+
## 特性
20+
21+
- 支持 top, bottom, left, and right tab positions with RTL layouts.
22+
- Handles overflow with a dropdown operation menu.
23+
- 支持 editable tabs, extra tab bar content, indicators, and custom tab bars.
24+
- 提供 semantic `classNames` and `styles` slots for panel and navigation customization.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/tabs
30+
```
31+
32+
## 使用
33+
34+
```tsx pure
35+
import Tabs from '@rc-component/tabs';
36+
import '@rc-component/tabs/assets/index.css';
37+
38+
const items = [
39+
{ key: 'overview', label: 'Overview', children: 'Overview content' },
40+
{ key: 'settings', label: 'Settings', children: 'Settings content' },
41+
];
42+
43+
export default () => <Tabs items={items} defaultActiveKey="overview" />;
44+
```
45+
46+
Online preview: https://tabs.react-component.vercel.app/
47+
48+
## API
49+
50+
### Tabs
51+
52+
| 名称 | 类型 | 默认值 | 说明 |
53+
| --- | --- | --- | --- |
54+
| `activeKey` | string | - | Controlled active tab key. |
55+
| `animated` | boolean \| AnimatedConfig | `{ inkBar: true, tabPane: false }` | Animation config. |
56+
| `className` | string | - | Additional class name. |
57+
| `classNames` | `Partial<Record<SemanticName, string>>` | - | Semantic class names. |
58+
| `defaultActiveKey` | string | - | Initial active tab key. |
59+
| `destroyOnHidden` | boolean | false | Destroy inactive tab panels. |
60+
| `direction` | `'ltr' \| 'rtl'` | `'ltr'` | Layout direction. |
61+
| `editable` | EditableConfig | - | Editable tab configuration. |
62+
| `getPopupContainer` | `(node: HTMLElement) => HTMLElement` | - | Popup container resolver. |
63+
| `id` | string | - | Root id. |
64+
| `indicator` | `{ size?: GetIndicatorSize; align?: 'start' \| 'center' \| 'end' }` | - | Indicator size and alignment. |
65+
| `items` | Tab[] | [] | Tab items. |
66+
| `locale` | TabsLocale | - | Accessibility locale text. |
67+
| `more` | MoreProps | - | Overflow dropdown config. |
68+
| `onChange` | `(activeKey: string) => void` | - | Triggered when active tab changes. |
69+
| `onTabClick` | `(activeKey, event) => void` | - | Triggered when a tab is clicked. |
70+
| `onTabScroll` | `({ direction }) => void` | - | Triggered when tab navigation scrolls. |
71+
| `prefixCls` | string | `'rc-tabs'` | Prefix class name. |
72+
| `renderTabBar` | RenderTabBar | - | Custom tab bar renderer. |
73+
| `style` | React.CSSProperties | - | Root style. |
74+
| `styles` | `Partial<Record<SemanticName, React.CSSProperties>>` | - | Semantic styles. |
75+
| `tabBarExtraContent` | React.ReactNode \| TabBarExtraMap | - | Extra content beside the tab bar. |
76+
| `tabBarGutter` | number | 0 | Gap between tabs. |
77+
| `tabBarStyle` | React.CSSProperties | - | Tab bar style. |
78+
| `tabPosition` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | Tab position. |
79+
80+
### Tab
81+
82+
| 名称 | 类型 | 默认值 | 说明 |
83+
| --- | --- | --- | --- |
84+
| `children` | React.ReactNode | - | Tab panel content. |
85+
| `className` | string | - | Panel class name. |
86+
| `closable` | boolean | - | Whether the tab can be closed in editable mode. |
87+
| `closeIcon` | React.ReactNode | - | Custom close icon. |
88+
| `destroyOnHidden` | boolean | false | Destroy inactive panel. |
89+
| `disabled` | boolean | false | Disable the tab. |
90+
| `forceRender` | boolean | false | Render panel before it becomes active. |
91+
| `key` | string | - | Required unique tab key. |
92+
| `label` | React.ReactNode | - | Tab label. |
93+
| `style` | React.CSSProperties | - | Panel style. |
94+
95+
## 本地开发
96+
97+
```bash
98+
npm install
99+
npm start
100+
npm test
101+
npm run tsc
102+
npm run compile
103+
npm run build
104+
```
105+
106+
## 发布
107+
108+
```bash
109+
npm run prepublishOnly
110+
```
111+
112+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
113+
114+
## 许可证
115+
116+
@rc-component/tabs is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)