Skip to content

Commit 98a8eae

Browse files
plainheartplainheart
committed
refine toolbox doc
1 parent 3a2d2f6 commit 98a8eae

6 files changed

Lines changed: 69 additions & 18 deletions

File tree

‎en/option/component/toolbox.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,31 @@ Whether to show toolbox component.
106106

107107
Background color of toolbox component.
108108

109+
## padding(number|Array) = 15
110+
111+
{{ use: partial-padding(
112+
componentName = "toolbox",
113+
defaultPadding: 15
114+
) }}
115+
116+
<ExampleUIControlVector dims="T,R,B,L" default="15,15,15,15" min="0" step="0.5" />
117+
118+
## borderColor(Color) = '#b7b9be'
119+
120+
<ExampleUIControlColor default="#b7b9be" />
121+
122+
The border color of the toolbox component.
123+
124+
## borderWidth(number) = 0
125+
126+
<ExampleUIControlNumber default="0" min="0" step="0.5" />
127+
128+
The border width in pixel (`px`) of the toolbox component.
129+
130+
{{ use: partial-border-radius(
131+
prefix = "#"
132+
) }}
133+
109134
## orient(string) = 'horizontal'
110135

111136
<ExampleUIControlEnum options="vertical,horizontal" />

‎en/option/partial/component-common-style.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ Border width of ${componentName}.
5858

5959
<ExampleUIControlVector min="0" dims="LT,RT,RB,LB" />
6060

61-
The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.
61+
The radius of the rounded corners, specified in pixels (px). Supports an array to define each of the four corners individually.
6262

6363
For example:
64-
```
65-
${propName|default('borderRadius')}: 5, // consistently set the size of 4 rounded corners
66-
${propName|default('borderRadius')}: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)
64+
```ts
65+
${propName|default('borderRadius')}: 5, // Applies to all four corners
66+
${propName|default('borderRadius')}: [5, 5, 0, 0] // Clockwise from top-left: [top-left, top-right, bottom-right, bottom-left]
6767
```
6868

‎en/option/partial/padding.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33

44
<ExampleUIControlVector min="0" dims="T,R,B,L" />
55

6-
${componentName} space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.
6+
The spacing around the ${componentName} content, specified in pixels (`px`). The default value for each side is `${defaultPadding|default(5)}`. Supports a single value, a 2-value array, or a 4-value array to configure each side.
77

88
Examples:
99
```ts
10-
// Set padding to be 5
10+
// Applies to all four sides
1111
padding: 5
12-
// Set the top and bottom paddings to be 5, and left and right paddings to be 10
12+
// [vertical, horizontal] -> top/bottom: 5, left/right: 10
1313
padding: [5, 10]
14-
// Set each of the four paddings separately
14+
// Clockwise order: [top, right, bottom, left]
1515
padding: [
16-
5, // up
16+
5, // top
1717
10, // right
18-
5, // down
18+
5, // bottom
1919
10, // left
2020
]
2121
```

‎zh/option/component/toolbox.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,31 @@ option = {
180180

181181
工具栏组件的背景色。
182182

183+
## padding(number|Array) = 15
184+
185+
{{ use: partial-padding(
186+
componentName = "toolbox",
187+
defaultPadding: 15
188+
) }}
189+
190+
<ExampleUIControlVector dims="T,R,B,L" default="15,15,15,15" min="0" step="0.5" />
191+
192+
## borderColor(Color) = '#b7b9be'
193+
194+
<ExampleUIControlColor default="#b7b9be" />
195+
196+
工具栏组件的边框颜色。
197+
198+
## borderWidth(number) = 0
199+
200+
<ExampleUIControlNumber default="0" min="0" step="0.5" />
201+
202+
工具栏组件的边框线宽，单位为像素 (`px`)。
203+
204+
{{ use: partial-border-radius(
205+
prefix = "#"
206+
) }}
207+
183208
## orient(string) = 'horizontal'
184209

185210
<ExampleUIControlEnum options="vertical,horizontal" />

‎zh/option/partial/component-common-style.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,11 @@ ${componentName}的边框线宽。
5858

5959
<ExampleUIControlVector min="0" dims="LT,RT,RB,LB" />
6060

61-
圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
62-
如:
63-
```
61+
圆角半径，单位为像素 (px)。支持传入单个数值或数组。传入数组时，可按顺时针方向分别指定四个角的半径。
62+
63+
例如：
64+
```ts
6465
${propName|default('borderRadius')}: 5, // 统一设置四个角的圆角大小
65-
${propName|default('borderRadius')}: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
66+
${propName|default('borderRadius')}: [5, 5, 0, 0] // 顺时针方向：[左上, 右上, 右下, 左下]
6667
```
6768

‎zh/option/partial/padding.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33

44
<ExampleUIControlVector min="0" dims="T,R,B,L" />
55

6-
${componentName}内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
6+
${componentName}的内边距（内容周围的留白区域），单位为像素 (`px`)。每个方向的默认值为 `${defaultPadding|default(5)}`。支持传入单个数值、双值数组或四值数组来灵活配置。
77

88
使用示例：
99
```ts
10-
// 设置内边距为 5
10+
// 同时应用于上下左右四个方向
1111
padding: 5
12-
// 设置上下的内边距为 5，左右的内边距为 10
12+
// [上下, 左右] -> 上下内边距为 5，左右内边距为 10
1313
padding: [5, 10]
14-
// 分别设置四个方向的内边距
14+
// 顺时针方向：[上, 右, 下, 左]
1515
padding: [
1616
5, // 上
1717
10, // 右

0 commit comments

Comments
 (0)