Skip to content

Commit 6b445fe

Browse files
HyperLife1119HyperLife1119
committed
docs: update docs
1 parent 81fa390 commit 6b445fe

File tree

6 files changed

+48
-56
lines changed

6 files changed

+48
-56
lines changed

‎packages/docs/src/app/pages/advanced/customization/examples/custom-template/custom-template.component.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<fluent-form [schema]="schema()" [(model)]="model">
2-
<input
3-
*fluentTemplate="'controlTpl'; let control = control"
4-
placeholder="一个原生样式的输入框"
5-
[formControl]="control" />
2+
<input *fluentTemplate="'controlTpl'; let control = control" placeholder="A native input" [formControl]="control" />
63

74
<ng-container *fluentTemplate="'namedTpl1'">
85
<button>click me</button>

‎packages/docs/src/app/pages/advanced/json-schema/examples/static-expression/schema.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
{
33
"kind": "text-field",
44
"key": "username",
5-
"label": "用户名"
5+
"label": "Username"
66
},
77
{
88
"kind": "text-field",
99
"key": "password",
10-
"label": "密码",
10+
"label": "Password",
1111
"disabled": "{{ !model.username }}"
1212
}
1313
]

‎packages/docs/src/app/pages/advanced/patch-schema/index.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
使用 `withSchemaPatchers()` 特性函数开启此功能，将一个或多个图示修补器添加到配置中。
66

7-
## 用例
7+
## Use Cases
88

99
一个自动补充输入框的 `placeholder` 占位提示的例子。
1010

@@ -19,23 +19,23 @@ provideFluentForm(
1919
{
2020
selector: 'text',
2121
patch: schema => {
22-
const label = schema.label || '文本';
23-
schema.placeholder ||= `请输入${label}`;
22+
const label = schema.label || 'Text';
23+
schema.placeholder ||= `Please enter ${label}`;
2424
return schema;
2525
}
2626
},
2727
{
2828
selector: 'number',
2929
patch: schema => {
30-
schema.placeholder ||= '请输入数字';
30+
schema.placeholder ||= 'Please enter a number';
3131
return schema;
3232
}
3333
}
3434
])
3535
)
3636
```
3737

38-
## 修补器定义
38+
## Type Definition
3939

4040
```ts
4141
type SchemaSelector = '*' | string | SchemaType | (string | SchemaType)[];
@@ -60,43 +60,43 @@ interface SchemaPatcher<S extends AbstractSchema = AbstractSchema> {
6060
```ts
6161
import { SchemaType } from '@fluent-form/core';
6262

63-
// 选择任意图示
63+
// Select any schemas
6464
{
6565
selector: '*',
6666
patch: schema => schema
6767
}
6868

69-
// 选择 text 图示
69+
// Select text-field schemas
7070
{
71-
selector: 'text',
71+
selector: 'text-field',
7272
patch: schema => schema
7373
}
7474

75-
// 选择 text 与 number 图示
75+
// Select text-field and number-field schemas
7676
{
77-
selector: ['text', 'number'],
77+
selector: ['text-field', 'number-field'],
7878
patch: schema => schema
7979
}
8080

81-
// 选择类型为控件的图示
81+
// Select schemas of type Control
8282
{
8383
selector: SchemaType.Control,
8484
patch: schema => schema
8585
}
8686

87-
// 选择类型为控件与组件的图示
87+
// Select schemas of type Control and Component
8888
{
8989
selector: [SchemaType.Control, SchemaType.Component],
9090
patch: schema => schema
9191
}
9292

93-
// 选择 button 图示 与 类型为控件组件的图示
93+
// Select button schemas and schemas of type Control
9494
{
9595
selector: ['button', SchemaType.Control],
9696
patch: schema => schema
9797
}
9898
```
9999

100-
## 执行顺序
100+
## Execution Order
101101

102102
图示修补器将根据它们在 `withSchemaPatchers()` 函数参数中的顺序，按顺序逐个执行修补函数。

‎packages/docs/src/app/pages/advanced/tips-and-tricks/examples/named-template.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
88
imports: [FluentFormModule, NzToolTipModule],
99
template: `
1010
<fluent-form [schema]="schema()" [(model)]="model">
11-
<span *fluentTemplate="'tld'" nz-tooltip nzTooltipTitle="顶级域名">.com</span>
11+
<span *fluentTemplate="'tld'" nz-tooltip nzTooltipTitle="Top-level domain">.com</span>
1212
</fluent-form>
1313
`
1414
})

‎packages/docs/src/app/pages/advanced/tips-and-tricks/index.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
使用 Fluent API，我们可以轻松地封装图示函数，以提高表单开发效率。
3333

3434
```ts
35-
import { form, headless } from '@fluent-form/core';
36-
import { button, toggle, radioGroup, textField } from '@fluent-form/ui-zorro';
35+
import { headless } from '@fluent-form/core';
36+
import { form, button, toggle, radioGroup, textField } from '@fluent-form/ui-zorro';
3737

3838
function entityForm(composeFn: () => void) {
3939
return form(() => {
@@ -44,23 +44,23 @@ function entityForm(composeFn: () => void) {
4444

4545
function genderRadioGroup(key = 'gender') {
4646
return radioGroup(key).options([
47-
{ label: '女', value: 0 },
48-
{ label: '男', value: 1 }
47+
{ label: 'Women', value: 0 },
48+
{ label: 'Male', value: 1 }
4949
]);
5050
}
5151

5252
function enabledToggle(key = 'enabled') {
53-
return toggle(key).placeholder(['有效', '无效']).defaultValue(true);
53+
return toggle(key).placeholder(['Enabled', 'Disabled']).defaultValue(true);
5454
}
5555

5656
function submitButton(key?: string) {
5757
return button(key).type('primary').mode('submit');
5858
}
5959

6060
entityForm(() => {
61-
textField('fullName').label('姓名');
62-
genderRadioGroup().label('性别');
63-
enabledToggle().label('状态');
64-
submitButton().content('提交信息');
61+
textField('fullName').label('Name');
62+
genderRadioGroup().label('Gender');
63+
enabledToggle().label('Status');
64+
submitButton().content('Submit');
6565
});
6666
```

‎packages/docs/src/app/pages/getting-started/basic-usage/index.md

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
本文档将详细介绍 {% include "../../../markdowns/brand.md" %} 的基本用法。
44

5-
## 选择 UI 库
5+
## Select UI Library
66

77
{% include "../../../markdowns/brand.md" %} 目前提供了以下 UI 库的支持：
88

9-
| UI | Package | 官网 |
9+
| UI | Package | Website |
1010
| ---------- | ----------------------- | --------------------- |
1111
| Ant Design | `@fluent-form/ui-zorro` | https://ng.ant.design |
1212

@@ -18,7 +18,7 @@
1818
> **NOTE**
1919
> 您可以根据自己的偏好和项目的需求来选择不同的 UI 库。教程中将主要使用 Ant Design 来演示。
2020
21-
## 注册部件
21+
## Register Widgets
2222

2323
在选择好 UI 库之后，您需要**按需注册**项目所需要的部件：
2424

@@ -45,7 +45,7 @@ export const appConfig: ApplicationConfig = {
4545

4646
要查看更多部件，请查阅 [API 文档](/api)。
4747

48-
## 创建图示
48+
## Create Schema
4949

5050
创建图示（schema）有两种主要方式：Fluent API 和 对象字面量。
5151

@@ -57,15 +57,15 @@ Fluent API 是一种可组合的、有限链式调用的 Builder-like API。它
5757
import { form, buttonGroup, button, textField } from '@fluent-form/ui-zorro';
5858

5959
const schema = form(() => {
60-
textField('text').label('文本').placeholder('请输入');
60+
textField('text').label('Text').placeholder('Please enter');
6161

6262
buttonGroup().schemas(() => {
63-
button().content('提交');
63+
button().content('Submit');
6464
});
6565
});
6666
```
6767

68-
### 对象字面量
68+
### Object Literal
6969

7070
对象字面量的方式更直观，更符合 JavaScript 的编程习惯。
7171

@@ -76,15 +76,15 @@ const schema = form([
7676
{
7777
kind: 'text-field',
7878
key: 'text',
79-
label: '文本',
80-
placeholder: '请输入'
79+
label: 'Text',
80+
placeholder: 'Please enter'
8181
},
8282
{
8383
kind: 'button-group',
8484
schemas: [
8585
{
8686
kind: 'button',
87-
content: '提交'
87+
content: 'Submit'
8888
}
8989
]
9090
}
@@ -94,7 +94,7 @@ const schema = form([
9494
> **NOTE**
9595
> 两种写法都是等效的，您可以根据自己的偏好和项目的需求来选择。教程中将主要使用 Fluent API 来演示。
9696
97-
## 核心组件
97+
## Core Components
9898

9999
`FluentFormComponent` 是 {% include "../../../markdowns/brand.md" %} 的核心组件，它用于创建和管理表单。
100100

@@ -110,34 +110,29 @@ const schema = form([
110110
- `(valueChanges)` 事件用于侦听表单值变更，参考 [AbstractControl#valueChanges](https://angular.cn/api/forms/AbstractControl#valueChanges)；
111111
- `(statusChanges)` 事件用于侦听表单状态变更，参考 [AbstractControl#statusChanges](https://angular.cn/api/forms/AbstractControl#statusChanges)；
112112

113-
## 创建表单
113+
## Create Form
114114

115115
接下来，我们将学习如何创建一个简单的英雄信息填写表单。
116116

117-
### 准备数据模型
117+
### Define Model
118118

119119
首先，我们需要定义一个英雄数据模型。在这里，我们的英雄数据模型是一个接口（interface），一个零行为的贫血模型。
120120

121121
```ts
122122
interface Hero {
123123
id: number;
124-
/** 名称 **/
125124
name: string;
126-
/** 能力 **/
127125
power: string;
128-
/** 身高 **/
129126
height?: number;
130-
/** 声望 **/
131127
popularity?: number;
132-
/** 有效/无效 **/
133128
enabled: boolean;
134129
}
135130
```
136131

137132
> **Note**
138133
> 注意，Hero 的 `height` 和 `popularity` 属性都是可选的，这意味着在表单中它们属于**非必填**项。
139134
140-
### 创建表单图示
135+
### Create form schema
141136

142137
根据英雄数据模型，我们为每个属性选择并配置合适的表单控件：
143138

@@ -146,11 +141,11 @@ import { form, textField, numberField, rate, textArea, toggle } from '@fluent-fo
146141

147142
const schema = form(() => {
148143
numberField('id').label('ID').required(true);
149-
textField('name').label('名称').required(true);
150-
textArea('power').label('能力').required(true);
151-
numberField('height').label('身高');
152-
rate('popularity').label('声望');
153-
toggle('enabled').label('状态').required(true);
144+
textField('name').label('Name').required(true);
145+
textArea('power').label('Power').required(true);
146+
numberField('height').label('Height');
147+
rate('popularity').label('Popularity');
148+
toggle('enabled').label('Status').required(true);
154149
});
155150
```
156151

@@ -171,8 +166,8 @@ const schema = form(() => {
171166
对于第二个问题，我们可以通过配置 `defaultValue` 选项来为控件提供默认值。
172167

173168
```diff
174-
- toggle('enabled').label('状态').required(true);
175-
+ toggle('enabled').label('状态').required(true).defaultValue(true);
169+
- toggle('enabled').label('Status').required(true);
170+
+ toggle('enabled').label('Status').required(true).defaultValue(true);
176171
```
177172
最后，我们将创建的表单图示应用到实际组件中：
178173

0 commit comments

Comments
 (0)