Skip to content

Commit 91639de

Browse files
mengxinssfdmengxinssfd
committed
docs: 添加 en-US.md 文档
1 parent b41de54 commit 91639de

File tree

36 files changed

+1651
-0
lines changed

36 files changed

+1651
-0
lines changed

‎packages/components/src/alert/index.en-US.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
category: Components
3+
title: Alert
4+
atomId: Alert
5+
demo:
6+
cols: 2
7+
group:
8+
title: Feedback
9+
---
10+
11+
Alert 提示。
12+
13+
## 代码演示
14+
15+
<!-- prettier-ignore -->
16+
<code src="./demo/basic.tsx"></code>
17+
<code src="./demo/bordered.tsx"></code>
18+
<code src="./demo/closable.tsx"></code>
19+
<code src="./demo/icon.tsx"></code>
20+
<code src="./demo/partial.tsx"></code>
21+
<code src="./demo/on-close.tsx"></code>
22+
23+
## API
24+
25+
Alert 的属性说明如下：
26+
27+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
28+
| -------- | ------------------------------------- | -------------------------------------------------------- | --------- | ---- |
29+
| type | 提示类型 | 'primary' \| 'success' \| 'info' \| 'warning' \| 'error' | 'primary' | -- |
30+
| bordered | 是否显示边框 | boolean | true | -- |
31+
| closable | 是否显示关闭按钮 | boolean | false | -- |
32+
| icon | 提示图标，为 null 时不显示图标 | React.ReactNode | 预设图标 | -- |
33+
| title | 提示标题，为空时不显示标题 | React.ReactNode | -- | -- |
34+
| onClose | 提示关闭时的回调 | (e: React.MouseEvent\<HTMLButtonElement\>) | -- | -- |
35+
| attrs | html 标签属性，如 className、style 等 | React.HTMLAttributes\<HTMLElement> | -- | -- |

‎packages/components/src/button/index.en-US.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
category: Components
3+
title: Button
4+
atomId: Button
5+
nav:
6+
title: components
7+
order: 2
8+
demo:
9+
cols: 2
10+
group:
11+
order: 0
12+
title: Common
13+
---
14+
15+
按钮用于开始一个即时操作。
16+
17+
## 何时使用
18+
19+
标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。
20+
21+
## 代码演示
22+
23+
<!-- prettier-ignore -->
24+
<code src="./demo/all.tsx"></code>
25+
26+
<!-- prettier-ignore -->
27+
<code src="./demo/type.tsx"></code>
28+
<code src="./demo/disabled.tsx"></code>
29+
<code src="./demo/size.tsx"></code>
30+
<code src="./demo/shape.tsx"></code>
31+
<code src="./demo/plain.tsx"></code>
32+
<code src="./demo/icon.tsx"></code>
33+
<code src="./demo/loading.tsx"></code>
34+
<code src="./demo/group.tsx"></code>
35+
36+
## API
37+
38+
### Button
39+
40+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `plain` -> `disabled`。
41+
42+
按钮的属性说明如下：
43+
44+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
45+
| --------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | --------- | ---- |
46+
| disabled | 设置按钮失效状态 | boolean | false | -- |
47+
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | 'submit' \| 'reset' \| 'button' \| undefined | -- | -- |
48+
| shape | 设置按钮形状 | 'default' \| 'none' \| 'circle' \| 'round' | 'default' | -- |
49+
| size | 设置按钮大小 | 'large' \| 'medium' \| 'small' | 'medium' | -- |
50+
| type | 设置按钮类型 | 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'default' | 'default' | -- |
51+
| plain | 设置按钮边框类型 | boolean \| 'dashed' \| 'text' | false | -- |
52+
| icon | 按钮的 icon | React.ReactElement \| boolean | -- | -- |
53+
| rightIcon | icon 放置在右侧，默认在左侧 | boolean | -- | -- |
54+
| loading | 显示加载状态 | boolean | -- | -- |
55+
| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | -- | -- |
56+
| attrs | 原生 button 的其他所有属性对象 | Partial\<React.ButtonHTMLAttributes\<HTMLButtonElement>> | -- | -- |
57+
58+
### ButtonGroup
59+
60+
按钮组的属性说明如下：
61+
62+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
63+
| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------ | ---- |
64+
| size | 设置按钮大小；<br /> **size 优先级： ButtonGroup props size > Button props size > ButtonContext size；** <br /> tips: 由于 size 覆盖需要复制子组件，若是子组件是 Provider 还会复制 Provider， 理论上没直接用 Provider 性能好，推荐直接使用 Provider 设置 size。 | 'large' \| 'medium' \| 'small' | -- | |
65+
66+
支持原生 div 的其他所有属性。

‎packages/components/src/calendar/index.en-US.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
category: Components
3+
title: Calendar
4+
atomId: Calendar
5+
demo:
6+
cols: 1
7+
group:
8+
title: Data Display
9+
---
10+
11+
Calendar 日历。
12+
13+
## 代码演示
14+
15+
<!-- prettier-ignore -->
16+
<code src="./demo/basic.tsx"></code>
17+
<code src="./demo/date-cell.tsx"></code>
18+
<code src="./demo/header.tsx"></code>
19+
<code src="./demo/week-start.tsx"></code>
20+
<code src="./demo/date-disabled.tsx"></code>
21+
22+
## API
23+
24+
Calendar 的属性说明如下：
25+
26+
```typescript
27+
type DateCell = (
28+
date: Date,
29+
attrs: Partial<React.HTMLAttributes<HTMLTableDataCellElement>>,
30+
status: {
31+
isNextMonth: boolean;
32+
isSelected: boolean;
33+
isPreMonth: boolean;
34+
disabled: boolean;
35+
isToday: boolean;
36+
},
37+
) => React.ReactNode;
38+
39+
interface CalendarLocale {
40+
monthBeforeYear: boolean;
41+
weekDayNames: string[];
42+
monthNames: string[];
43+
today: string;
44+
}
45+
```
46+
47+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
48+
| ------------ | ------------------------------------------ | ------------------------------------------------- | ---------- | ---- |
49+
| value | 选中的日期 | Date | new Date() | -- |
50+
| today | 今天的日期(可忽略，用于测试时固定为某一天) | Date | new Date() | -- |
51+
| month | 日历所展示的月份 | Date | new Date() | -- |
52+
| onChange | 当选中的日期变化触发的回调 | (value: Date) => void | -- | -- |
53+
| dateCell | 自定义渲染格子内容 | 见上面 DateCell | -- | -- |
54+
| dateDisabled | 日期禁用 | (date: Date, value: undefined \| Date) => boolean | -- | -- |
55+
| header | 头部显示或隐藏 | boolean | true | -- |
56+
| firstDay | 星期的第一天 | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 0 | -- |
57+
| locale | 语言文本配置 | CalendarLocale | -- | -- |
58+
| attrs | html 标签属性 | Partial\<React.HTMLAttributes\<HTMLDivElement>> | -- | -- |

‎packages/components/src/collapse-transition/index.en-US.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
category: Components
3+
title: CollapseTransition
4+
atomId: CollapseTransition
5+
demo:
6+
cols: 1
7+
group:
8+
title: Transition
9+
---
10+
11+
CollapseTransition 折叠动画。
12+
13+
## 代码演示
14+
15+
<!-- prettier-ignore -->
16+
<code src="./demo/basic.tsx"></code>
17+
<code src="./demo/padding.tsx"></code>
18+
<code src="./demo/width.tsx"></code>
19+
<code src="./demo/fixed-width.tsx"></code>
20+
21+
## API
22+
23+
CollapseTransition 的属性说明如下：
24+
25+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
26+
| ----- | -------- | ------- | ------ | ---- |
27+
| width | 宽度折叠 | boolean | -- | -- |
28+
29+
更多说明见[Transition](./transition#api)。

‎packages/components/src/collapse/index.en-US.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
category: Components
3+
title: Collapse
4+
atomId: Collapse
5+
demo:
6+
cols: 1
7+
group:
8+
title: Common
9+
---
10+
11+
Collapse 折叠面板。
12+
13+
## 组
14+
15+
推荐使用该方式。
16+
17+
<!-- prettier-ignore -->
18+
<code src="./demo/basic.tsx"></code>
19+
<code src="./demo/expanded.tsx"></code>
20+
<code src="./demo/disabled.tsx"></code>
21+
<code src="./demo/extra.tsx"></code>
22+
<code src="./demo/icon.tsx"></code>
23+
<code src="./demo/icon-placement.tsx"></code>
24+
<code src="./demo/nest.tsx"></code>
25+
<code src="./demo/accordion.tsx"></code>
26+
<code src="./demo/size.tsx"></code>
27+
28+
## 独立使用
29+
30+
<!-- prettier-ignore -->
31+
<code src="./demo/independent.tsx"></code>
32+
33+
## API
34+
35+
### Collapse API
36+
37+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
38+
| ------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------- | -------- | ---- |
39+
| title | 标题 | React.ReactNode | -- | -- |
40+
| expanded | 展开/收起面板 | boolean | false | -- |
41+
| disabled | 禁止点击 | boolean | false | -- |
42+
| header | 替换 header 内部内容 | (active: boolean) => React.ReactNode | -- | -- |
43+
| extra | header 右侧附加信息 | React.ReactNode | -- | -- |
44+
| icon | 替换默认 icon，为 null 时移除 icon | null \| ((active: boolean) => React.ReactNode) | 右箭头 | -- |
45+
| iconPlacement | icon 位置 | 'start' \| 'end' | 'start' | -- |
46+
| size | 尺寸 | 'small' \| 'medium' \| 'large' | 'medium' | -- |
47+
| destroyOnHide | 隐藏时是否销毁 dom ； 为 'mixed'时第一次渲染未展开时不渲染 dom，展开一次后收起也不销毁 dom | boolean \| 'mixed' | 'mixed' | -- |
48+
| onChange | 展开/收起时的回调 | (active: boolean) => void | -- | -- |
49+
50+
### CollapseGroup API
51+
52+
```typescript
53+
// CollapseProps就是上面的 Collapse API
54+
export type CollapseGroupItem = CollapseProps & {
55+
children: React.ReactNode;
56+
key: string | number;
57+
};
58+
```
59+
60+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
61+
| ------------- | ----------------------------- | ----------------------------------------------------------------- | ------ | ---- |
62+
| tag | html 标签名 | keyof HTMLElementTagNameMap | 'div' | -- |
63+
| accordion | 手风琴效果 | boolean | false | -- |
64+
| items | 面板 item 数组 | CollapseGroupItem[] | -- | -- |
65+
| collapseProps | items 的公共选项 | Partial\<CollapseProps> | -- | -- |
66+
| onChange | 内部面板展开/收起时触发的回调 | (item: CollapseGroupItem, index: number, active: boolean) => void | -- | -- |
67+
68+
其他说明。

‎packages/components/src/config-provider/index.en-US.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
category: Components
3+
title: ConfigProvider
4+
atomId: ConfigProvider
5+
demo:
6+
cols: 1
7+
group:
8+
title: Other
9+
order: 10
10+
---
11+
12+
为组件提供统一的全局化配置。
13+
14+
## 代码演示
15+
16+
```jsx | pure
17+
import { ConfigProvider } from '@tool-pack/react-ui';
18+
import zhCN from '@tool-pack/react-ui/dist/locale/zh-CN';
19+
20+
function Demo() {
21+
return (
22+
<ConfigProvider locale={zhCN}>
23+
<App />
24+
</ConfigProvider>
25+
);
26+
}
27+
```
28+
29+
## API
30+
31+
Calendar 的属性说明如下：
32+
33+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
34+
| ------ | ------------ | ------ | ------ | ---- |
35+
| locale | 语言文本配置 | object | -- | -- |

‎packages/components/src/date-picker/index.en-US.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
category: Components
3+
title: DatePicker
4+
atomId: DatePicker
5+
demo:
6+
cols: 2
7+
group:
8+
title: Data Input
9+
---
10+
11+
DatePicker 日期选择器。
12+
13+
## 代码演示
14+
15+
<!-- prettier-ignore -->
16+
<code src="./demo/basic.tsx"></code>
17+
<code src="./demo/format.tsx"></code>
18+
<code src="./demo/types.tsx"></code>
19+
<code src="./demo/icon.tsx"></code>
20+
<code src="./demo/range.tsx"></code>
21+
<code src="./demo/disabled.tsx"></code>
22+
<code src="./demo/date-disabled.tsx"></code>
23+
<code src="./demo/shortcut.tsx"></code>
24+
25+
## API
26+
27+
DatePicker 的属性说明如下：
28+
29+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
30+
| ------------ | ---------------------------------------------- | ---------------------------------------------------------- | ------ | ---- |
31+
| type | 类型 | 'datetime' \| 'month' \| 'year' \| 'date' \| 'time' | 'date' | -- |
32+
| range | 范围选取 | boolean | false | -- |
33+
| visible | 展开选项 | boolean | -- | -- |
34+
| onChange | 选取后的回调 | (value: RangeValueType \| Date) => void | -- | -- |
35+
| value | 值 | \[start: Date, end: Date\] \| Date | -- | -- |
36+
| icon | 图标 | React.ReactNode | -- | -- |
37+
| disabled | 禁用 | boolean | -- | -- |
38+
| format | 格式化 | string | -- | -- |
39+
| dateDisabled | 日期禁用，见[Calendar](./calendar#api) | -- | -- | -- |
40+
| dateCell | 自定义日期单元格，见[Calendar](./calendar#api) | -- | -- | -- |
41+
| shortcuts | 快捷方式 | {value: RangeValueType \| Date;label: React.ReactNode;}[\] | -- | -- |
42+
| attrs | html 标签属性 | Partial\<React.HTMLAttributes\<HTMLLabelElement>> | -- | -- |
43+
44+
其他说明。

‎packages/components/src/dialog/index.en-US.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
category: Components
3+
title: Dialog
4+
atomId: Dialog
5+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BrFMQ5s7AAQAAAAAAAAAAAAADrJ8AQ/original
6+
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Lp1kTYmSsgoAAAAAAAAAAAAADrJ8AQ/original
7+
demo:
8+
cols: 2
9+
group:
10+
title: Feedback
11+
order: 4
12+
---
13+
14+
对话框。
15+
16+
## 何时使用
17+
18+
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Dialog 在当前页面正中打开一个浮层，承载相应的操作。
19+
20+
## 代码演示
21+
22+
<!-- prettier-ignore -->
23+
<code src="./demo/basic.tsx"></code>
24+
<code src="./demo/centered.tsx"></code>
25+
<code src="./demo/center.tsx"></code>
26+
<code src="./demo/close.tsx"></code>
27+
28+
## API
29+
30+
dialog 的属性说明如下：
31+
32+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
33+
| ---------------- | -------------------------------- | -------------------------------------------- | ------ | ---- |
34+
| visible | 开关 | boolean | false | |
35+
| header | 窗体头部 | ReactNode | - | |
36+
| footer | 窗体尾部 | ReactNode | - | |
37+
| onClose | 内部关闭回调 | () => void | - | |
38+
| closeOnClickMask | 点击遮罩关闭 dialog | boolean | false | |
39+
| center | header 与 footer 水平居中 | boolean | false | |
40+
| centered | 窗体垂直居中 | boolean | false | |
41+
| esc | 按下 esc 关闭 dialog | boolean | false | |
42+
| zIndex | dialog 的 css z-index | number | 100 | |
43+
| attrs | 组件 html 根元素的所有属性 | Partial\<React.HTMLAttributes\<HTMLElement>> | -- | -- |
44+
| bodyAttrs | 组件抽屉窗体 html 元素的所有属性 | Partial\<React.HTMLAttributes\<HTMLElement>> | -- | -- |

0 commit comments

Comments
 (0)