Skip to content

Commit c5c61c1

Browse files
afc163afc163
committed
docs: refine bilingual README branding
1 parent a954f7d commit c5c61c1

2 files changed

Lines changed: 40 additions & 42 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div align="center">
22
<h1>@rc-component/tabs</h1>
3-
<p><sub>Part of the Ant Design ecosystem.</sub></p>
4-
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
3+
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
54
<p>📑 Flexible React tabs with overflow, editable items, custom tab bars, and accessible panels.</p>
65

76
<p>

‎README.zh-CN.md‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<div align="center">
22
<h1>@rc-component/tabs</h1>
3-
<p><sub>Ant Design 生态的一部分。</sub></p>
4-
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
5-
<p>🗂️ React 标签页组件，支持可编辑标签、溢出滚动和自定义渲染。</p>
3+
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Ant Design 生态的一部分。</sub></p>
4+
<p>📑 React 标签页组件，支持可编辑标签、溢出滚动和自定义渲染。</p>
65

76
<p>
87
<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>
@@ -19,10 +18,10 @@
1918

2019
## 特性
2120

22-
- 支持 top, bottom, left, and right tab positions with RTL layouts.
23-
- Handles overflow with a dropdown operation menu.
24-
- 支持 editable tabs, extra tab bar content, indicators, and custom tab bars.
25-
- 提供 semantic `classNames` and `styles` slots for panel and navigation customization.
21+
- 支持 RTL 布局的顶部、底部、左侧和右侧选项卡位置。
22+
- 使用下拉操作菜单处理溢出。
23+
- 支持可编辑选项卡、额外选项卡栏内容、指示器和自定义选项卡栏。
24+
- 为面板和导航自定义提供语义 `classNames` 和 `styles` 插槽。
2625

2726
## 安装
2827

@@ -44,54 +43,54 @@ const items = [
4443
export default () => <Tabs items={items} defaultActiveKey="overview" />;
4544
```
4645

47-
Online preview: https://tabs.react-component.vercel.app/
46+
在线预览：https://tabs.react-component.vercel.app/
4847

4948
## API
5049

5150
### Tabs
5251

5352
| 名称 | 类型 | 默认值 | 说明 |
5453
| --- | --- | --- | --- |
55-
| `activeKey` | string | - | Controlled active tab key. |
56-
| `animated` | boolean \| AnimatedConfig | `{ inkBar: true, tabPane: false }` | Animation config. |
57-
| `className` | string | - | Additional class name. |
58-
| `classNames` | `Partial<Record<SemanticName, string>>` | - | Semantic class names. |
59-
| `defaultActiveKey` | string | - | Initial active tab key. |
54+
| `activeKey` | string | - | 受控的活动 Tab 键。 |
55+
| `animated` | boolean \| AnimatedConfig | `{ inkBar: true, tabPane: false }` | 动画配置。 |
56+
| `className` | string | - | 附加className。 |
57+
| `classNames` | `Partial<Record<SemanticName, string>>` | - | 语义className。 |
58+
| `defaultActiveKey` | string | - | 初始活动 Tab 键。 |
6059
| `destroyOnHidden` | boolean | false | Destroy inactive tab panels. |
6160
| `direction` | `'ltr' \| 'rtl'` | `'ltr'` | Layout direction. |
62-
| `editable` | EditableConfig | - | Editable tab configuration. |
63-
| `getPopupContainer` | `(node: HTMLElement) => HTMLElement` | - | Popup container resolver. |
64-
| `id` | string | - | Root id. |
61+
| `editable` | EditableConfig | - | 可编辑标签页配置。 |
62+
| `getPopupContainer` | `(node: HTMLElement) => HTMLElement` | - | 弹层容器解析器。 |
63+
| `id` | string | - | 根 ID。 |
6564
| `indicator` | `{ size?: GetIndicatorSize; align?: 'start' \| 'center' \| 'end' }` | - | Indicator size and alignment. |
66-
| `items` | Tab[] | [] | Tab items. |
67-
| `locale` | TabsLocale | - | Accessibility locale text. |
68-
| `more` | MoreProps | - | Overflow dropdown config. |
69-
| `onChange` | `(activeKey: string) => void` | - | Triggered when active tab changes. |
70-
| `onTabClick` | `(activeKey, event) => void` | - | Triggered when a tab is clicked. |
71-
| `onTabScroll` | `({ direction }) => void` | - | Triggered when tab navigation scrolls. |
72-
| `prefixCls` | string | `'rc-tabs'` | Prefix class name. |
73-
| `renderTabBar` | RenderTabBar | - | Custom tab bar renderer. |
74-
| `style` | React.CSSProperties | - | Root style. |
75-
| `styles` | `Partial<Record<SemanticName, React.CSSProperties>>` | - | Semantic styles. |
76-
| `tabBarExtraContent` | React.ReactNode \| TabBarExtraMap | - | Extra content beside the tab bar. |
77-
| `tabBarGutter` | number | 0 | Gap between tabs. |
78-
| `tabBarStyle` | React.CSSProperties | - | Tab bar style. |
65+
| `items` | Tab[] | [] | 选项卡项目。 |
66+
| `locale` | TabsLocale | - | 无障碍本地化文本。 |
67+
| `more` | MoreProps | - | 溢出下拉菜单配置。 |
68+
| `onChange` | `(activeKey: string) => void` | - | 当活动选项卡更改时触发。 |
69+
| `onTabClick` | `(activeKey, event) => void` | - | 单击选项卡时触发。 |
70+
| `onTabScroll` | `({ direction }) => void` | - | 当选项卡导航滚动时触发。 |
71+
| `prefixCls` | string | `'rc-tabs'` | 前缀className。 |
72+
| `renderTabBar` | RenderTabBar | - | 自定义标签栏渲染函数。 |
73+
| `style` | React.CSSProperties | - | 根样式。 |
74+
| `styles` | `Partial<Record<SemanticName, React.CSSProperties>>` | - | 语义化样式。 |
75+
| `tabBarExtraContent` | React.ReactNode \| TabBarExtraMap | - | 标签栏旁的额外内容。 |
76+
| `tabBarGutter` | number | 0 | 选项卡之间的间隙。 |
77+
| `tabBarStyle` | React.CSSProperties | - | 标签栏样式。 |
7978
| `tabPosition` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | Tab position. |
8079

8180
### Tab
8281

8382
| 名称 | 类型 | 默认值 | 说明 |
8483
| --- | --- | --- | --- |
85-
| `children` | React.ReactNode | - | Tab panel content. |
86-
| `className` | string | - | Panel class name. |
87-
| `closable` | boolean | - | Whether the tab can be closed in editable mode. |
88-
| `closeIcon` | React.ReactNode | - | Custom close icon. |
89-
| `destroyOnHidden` | boolean | false | Destroy inactive panel. |
90-
| `disabled` | boolean | false | Disable the tab. |
91-
| `forceRender` | boolean | false | Render panel before it becomes active. |
92-
| `key` | string | - | Required unique tab key. |
84+
| `children` | React.ReactNode | - | 选项卡面板内容。 |
85+
| `className` | string | - | 面板className称。 |
86+
| `closable` | boolean | - | 是否可以在可编辑模式下关闭选项卡。 |
87+
| `closeIcon` | React.ReactNode | - | 自定义关闭图标。 |
88+
| `destroyOnHidden` | boolean | false | 销毁非活动面板。 |
89+
| `disabled` | boolean | false | 禁用该选项卡。 |
90+
| `forceRender` | boolean | false | 在面板变为活动状态之前渲染面板。 |
91+
| `key` | string | - | 需要唯一的 Tab 键。 |
9392
| `label` | React.ReactNode | - | Tab label. |
94-
| `style` | React.CSSProperties | - | Panel style. |
93+
| `style` | React.CSSProperties | - | 面板风格。 |
9594

9695
## 本地开发
9796

@@ -110,8 +109,8 @@ npm run build
110109
npm run prepublishOnly
111110
```
112111

113-
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
112+
包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。
114113

115114
## 许可证
116115

117-
@rc-component/tabs is released under the [MIT](./LICENSE.md) license.
116+
@rc-component/tabs 基于 [MIT](./LICENSE.md) 许可证发布。

0 commit comments

Comments
 (0)