Skip to content

Commit 6fd87b3

Browse files
wangdicoderwangdicoder
committed
docs: add Chinese (zh_CN) translations for all documentation
Add zh_CN markdown files for 66 component docs and 5 guide docs. Translate headings, descriptions, scenarios, and API table descriptions while preserving component names, code blocks, and types in English. Update ConfigProvider docs to document new locale and theme props.
1 parent 0852780 commit 6fd87b3

72 files changed

Lines changed: 3633 additions & 2 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/alert/index.zh_CN.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Basic from './demo/basic.md'
2+
import Closable from './demo/closable.md'
3+
import CloseButton from './demo/close-btn.md'
4+
import Icon from './demo/icon.md'
5+
import Title from './demo/title.md'
6+
import Type from './demo/type.md'
7+
8+
# Alert
9+
10+
警告提示组件，用于页面中展示重要的提示信息。
11+
12+
## 使用场景
13+
14+
- 当需要向用户显示警告提示信息时。
15+
- 当需要一个持久的静态容器，且用户可以手动关闭时。
16+
17+
## 引入方式
18+
19+
```jsx
20+
import { Alert } from 'tiny-ui';
21+
```
22+
23+
## 代码示例
24+
25+
<layout>
26+
<column>
27+
<Basic/>
28+
<Closable/>
29+
<Icon/>
30+
</column>
31+
<column>
32+
<Type/>
33+
<Title/>
34+
<CloseButton/>
35+
</column>
36+
</layout>
37+
38+
## API
39+
40+
| 属性 | 说明 | 类型 | 默认值 |
41+
| ---------- | ---------------------------------------------- | ------------------------------------------------------------------------ | ------- |
42+
| title | 警告提示标题 | string &#124; ReactNode | - |
43+
| type | 警告提示类型 | enum: `success` &#124; `info` &#124; `warning` &#124; `error` | `info` |
44+
| icon | 是否显示图标或自定义图标 | boolean &#124; ReactNode | - |
45+
| iconSize | 图标大小 | number | - |
46+
| closable | 是否可关闭 | boolean | false |
47+
| closeText | 自定义关闭按钮文本 | ReactNode | - |
48+
| afterClose | 关闭动画结束后的回调 | () => void | - |
49+
| onClose | 关闭按钮的回调 | (e: MouseEvent) => void | - |
50+
| style | 容器的样式对象 | CSSProperties | - |
51+
| className | 容器的类名 | string | - |

‎components/aspect-ratio/index.zh_CN.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Video from './demo/video.md'
2+
import Image from './demo/image.md'
3+
import Map from './demo/map.md'
4+
5+
# Aspect Radio
6+
7+
用于描述元素宽度与高度之间比例关系的组件。
8+
9+
## 使用场景
10+
11+
用于嵌入响应式图片、视频和地图等。它使用了一种常见的 [padding hack](https://css-tricks.com/aspect-ratio-boxes/) 技术来实现。
12+
13+
## 引入方式
14+
15+
```jsx
16+
import { AspectRatio } from 'tiny-ui';
17+
```
18+
19+
## 代码示例
20+
21+
<layout>
22+
<column>
23+
<Video/>
24+
<Map/>
25+
</column>
26+
<column>
27+
<Image/>
28+
</column>
29+
</layout>
30+
31+
## API
32+
33+
| 属性 | 说明 | 类型 | 默认值 |
34+
| --------- | --------------------------------- | --------------------- | --------- |
35+
| width | 盒子宽度 | number &#124; string | - |
36+
| ratio | 内容的宽高比 | number | 1 |
37+
| style | 容器的样式对象 | CSSProperties | - |
38+
| className | 容器的 className | string | - |

‎components/avatar/index.zh_CN.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import AutoFont from './demo/auto-font.md'
2+
import Basic from './demo/basic.md'
3+
import Group from './demo/group.md'
4+
import Presence from './demo/presence.md'
5+
import Type from './demo/type.md'
6+
7+
# Avatar
8+
9+
头像用于代表用户或事物，支持 `image`、`Icon` 或 `letter` 三种类型。
10+
11+
## 使用场景
12+
13+
展示用户头像图片
14+
15+
## 引入方式
16+
17+
```jsx
18+
import { Avatar } from 'tiny-ui';
19+
20+
const { Group } = Avatar;
21+
```
22+
23+
## 代码示例
24+
25+
<layout>
26+
<column>
27+
<Basic/>
28+
<Type/>
29+
<Group/>
30+
</column>
31+
<column>
32+
<Presence/>
33+
<AutoFont/>
34+
</column>
35+
</layout>
36+
37+
## API
38+
39+
### Avatar
40+
41+
| 属性 | 说明 | 类型 | 默认值 |
42+
| --------- | ----------------------------------------- | ------------------------------------------------------------- | --------- |
43+
| size | 头像大小 | number | 38 |
44+
| presence | 状态指示器 | enum: `online` &#124; `busy` &#124; `away` &#124; `offline` | undefined |
45+
| shape | 头像形状 | enum: `circle` &#124; `square` | `circle` |
46+
| icon | 传入图标组件进行展示 | ReactNode | - |
47+
| src | 图片地址 | string | - |
48+
| alt | 图片替代文本 | string | - |
49+
| style | 容器样式对象 | CSSProperties | - |
50+
| className | 容器的 className | string | - |
51+
52+
### Avatar.Group
53+
54+
| 属性 | 说明 | 类型 | 默认值 |
55+
| --------- | ----------------------------------------- | ------------------------------------------------------------- | --------- |
56+
| gap | 两个头像之间的距离 | number &#124; string | -15 |

‎components/back-top/index.zh_CN.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Basic from './demo/basic.md'
2+
3+
# BackTop
4+
5+
返回页面顶部。
6+
7+
## 使用场景
8+
9+
- 当页面内容很长时。
10+
- 当需要频繁返回顶部查看内容时。
11+
12+
## 引入方式
13+
14+
```jsx
15+
import { BackTop } from 'tiny-ui';
16+
```
17+
18+
## 代码示例
19+
20+
<layout>
21+
<column>
22+
<Basic/>
23+
</column>
24+
<column>
25+
</column>
26+
</layout>
27+
28+
## API
29+
30+
| 属性 | 说明 | 类型 | 默认值 |
31+
| ----------------- | ------------------------------------------------------------------------- | ----------------- | ------------- |
32+
| target | 指定可滚动区域的 DOM 节点 | () => HTMLElement | () => window |
33+
| visibilityHeight | 滚动高度达到此值时才出现 `BackTop` 按钮 | number | 300 |
34+
| onClick | 点击按钮时的回调 | () => void | - |
35+
| style | 容器的样式对象 | CSSProperties | - |
36+
| className | 容器的类名 | string | - |

‎components/badge/index.zh_CN.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Basic from './demo/basic.md'
2+
import Custom from './demo/custom.md'
3+
import Dot from './demo/dot.md'
4+
import Overflow from './demo/overflow.md'
5+
import Standalone from './demo/standalone.md'
6+
7+
# Badge
8+
9+
UI 元素的小型数值或状态描述符。
10+
11+
## 使用场景
12+
13+
徽标通常出现在通知或用户头像附近，醒目地展示未读消息数量。
14+
15+
## 引入方式
16+
17+
```jsx
18+
import { Badge } from 'tiny-ui';
19+
```
20+
21+
## 代码示例
22+
23+
<layout>
24+
<column>
25+
<Basic/>
26+
<Overflow/>
27+
<Standalone/>
28+
</column>
29+
<column>
30+
<Dot/>
31+
<Custom/>
32+
</column>
33+
</layout>
34+
35+
## API
36+
37+
| 属性 | 说明 | 类型 | 默认值 |
38+
| ------------- | ------------------------------------------------------------- | ----------------- | --------- |
39+
| count | 徽标中显示的数字 | ReactNode | |
40+
| color | 背景颜色 | string | #f2453d |
41+
| max | 显示的最大数值 | number | 99 |
42+
| dot | 仅显示一个小圆点 | boolean | false |
43+
| processing | 显示波纹动画效果 | boolean | false |
44+
| showZero | 当值为零时，默认隐藏徽标 | boolean | false |
45+
| title | 鼠标悬停在徽标上时显示的文本 | string | |
46+
| badgeStyle | 内部徽标样式 | CSSProperties | |

‎components/breadcrumb/index.zh_CN.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Basic from './demo/basic.md'
2+
import Icon from './demo/icon.md'
3+
import Separator from './demo/separator.md'
4+
5+
# Breadcrumb
6+
7+
面包屑导航显示当前页面在层级结构中的位置。它允许用户返回到层级中更高的级别。
8+
9+
## 使用场景
10+
11+
- 当系统的层级结构超过两层时。
12+
- 当需要告知用户当前所在位置时。
13+
- 当用户可能需要导航回上一层级时。
14+
- 当应用具有多层架构时。
15+
16+
## 引入方式
17+
18+
```js
19+
import { Breadcrumb } from 'tiny-ui';
20+
21+
const { Item } = Breadcrumb;
22+
```
23+
24+
## 代码示例
25+
26+
<layout>
27+
<column>
28+
<Basic/>
29+
<Separator/>
30+
</column>
31+
<column>
32+
<Icon/>
33+
</column>
34+
</layout>
35+
36+
## API
37+
38+
| 属性 | 说明 | 类型 | 默认值 |
39+
| ----------------- | --------------------------------------------------------- | ----------------- | ------------- |
40+
| separator | 自定义分隔符 | ReactNode | '/' |

‎components/button/index.zh_CN.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Block from './demo/block.md'
2+
import MoreTypes from './demo/more-types.md'
3+
import Disabled from './demo/disabled.md'
4+
import ButtonGroup from './demo/group.md'
5+
import Icon from './demo/icon.md'
6+
import Loading from './demo/loading.md'
7+
import Size from './demo/size.md'
8+
import Type from './demo/type.md'
9+
10+
# Button
11+
12+
用于触发一个操作。
13+
14+
## 使用场景
15+
16+
按钮表示一个操作（或一系列操作）。点击按钮将触发对应的业务逻辑。
17+
18+
## 引入方式
19+
20+
```jsx
21+
import { Button } from 'tiny-ui';
22+
23+
const { Group } = Button;
24+
```
25+
26+
## 代码示例
27+
28+
<layout>
29+
<column>
30+
<Type/>
31+
<MoreTypes/>
32+
<Size/>
33+
<ButtonGroup/>
34+
<Loading/>
35+
</column>
36+
<column>
37+
<Icon/>
38+
<Disabled/>
39+
<Block/>
40+
</column>
41+
</layout>
42+
43+
## API
44+
45+
| 属性 | 说明 | 类型 | 默认值 |
46+
| --------- | ----------------------------------------- | ------------------------------------- | --------- |
47+
| btnType | 按钮类型 | enum: `default` &#124; `primary` &#124; `outline` &#124; `ghost` &#124; `link` &#124; `info` &#124; `successs` &#124; `warning` &#124; `danger` | `default` |
48+
| loading | 设置按钮的加载状态 | boolean | false |
49+
| block | 使按钮宽度适应其父元素宽度 | boolean | false |
50+
| size | 按钮尺寸 | enum: `sm` &#124; `md` &#124; `lg` | `md` |
51+
| disabled | 按钮的禁用状态 | boolean | false |
52+
| round | 圆角按钮 | boolean | false |
53+
| icon | 在文本左侧渲染一个图标 | React.ReactNode | - |
54+
| style | 容器的样式对象 | CSSProperties | - |
55+
| className | 容器的 className | string | - |

‎components/card/index.zh_CN.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Basic from './demo/basic.md'
2+
import NoBorder from './demo/no-border.md'
3+
import Simple from './demo/simple.md'
4+
import Hoverable from './demo/hoverable.md'
5+
import Active from './demo/active.md'
6+
import InnerCard from './demo/inner-card.md'
7+
import Image from './demo/image.md'
8+
9+
# Card
10+
11+
简洁的矩形容器。
12+
13+
## 使用场景
14+
15+
卡片可用于展示与某一主题相关的内容。内容可以由多种不同类型和大小的元素组成。
16+
17+
## 引入方式
18+
19+
```jsx
20+
import { Card } from 'tiny-ui';
21+
22+
const { Content } = Card;
23+
```
24+
25+
## 代码示例
26+
27+
<layout>
28+
<column>
29+
<Basic/>
30+
<NoBorder/>
31+
<Simple/>
32+
<Hoverable/>
33+
<Active/>
34+
</column>
35+
<column>
36+
<InnerCard/>
37+
<Image/>
38+
</column>
39+
</layout>
40+
41+
## API
42+
43+
| 属性 | 说明 | 类型 | 默认值 |
44+
| ----------- | -------------------------------------------- | ------------------------ | ------- |
45+
| title | 卡片标题 | ReactNode | - |
46+
| extra | 右上角额外内容 | ReactNode | - |
47+
| hoverable | 鼠标悬停时浮起 | boolean | false |
48+
| active | 显示带有阴影的卡片 | boolean | false |
49+
| bordered | 是否显示边框 | boolean | true |
50+
| actions | 卡片底部的操作列表 | ReactNode[] | - |
51+
| header | 自定义头部内容 | ReactNode | - |
52+
| footer | 自定义底部内容 | ReactNode | - |
53+
| headerStyle | 头部容器的行内样式 | CSSProperties | - |
54+
| bodyStyle | 内容容器的行内样式 | CSSProperties | - |
55+
| footerStyle | 底部容器的行内样式 | CSSProperties | - |
56+
| style | 容器样式对象 | CSSProperties | - |
57+
| className | 容器的 className | string | - |

0 commit comments

Comments
 (0)