diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index 6c58fc8bb048d348ecbebd0ab6df2ff22e943c47..a6012798b6247535d90bfa64c7df361446a9b240 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -15,9 +15,8 @@
```
-```
-
-```
+
+ ```
// xxx.js
export default {
handleClick() {
@@ -71,10 +70,11 @@
```
+
-```
+ ```
```
//xxx.js
@@ -110,6 +110,7 @@ export default {
ctx.strokeRect(25, 25, 85, 105);
}
}
+
```
![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
@@ -267,20 +268,21 @@ export default {
ctx.moveTo(140, 10);
ctx.lineTo(140, 160);
ctx.stroke();
- ctx.font = '18px sans-serif';
- // Show the different textAlign values
- ctx.textAlign = 'start';
- ctx.fillText('textAlign=start', 140, 60);
- ctx.textAlign = 'end';
- ctx.fillText('textAlign=end', 140, 80);
- ctx.textAlign = 'left';
+ ctx.font = '18px sans-serif';
+ // Show the different textAlign values
+ ctx.textAlign = 'start';
+ ctx.fillText('textAlign=start', 140, 60);
+ ctx.textAlign = 'end';
+ ctx.fillText('textAlign=end', 140, 80);
+ ctx.textAlign = 'left';
ctx.fillText('textAlign=left', 140, 100);
- ctx.textAlign = 'center';
- ctx.fillText('textAlign=center',140, 120);
- ctx.textAlign = 'right';
+ ctx.textAlign = 'center';
+ ctx.fillText('textAlign=center',140, 120);
+ ctx.textAlign = 'right';
ctx.fillText('textAlign=right',140, 140);
}
}
+
```
@@ -397,7 +399,7 @@ export default {
- ```
+```
```
//xxx.js
@@ -431,7 +433,7 @@ export default {
-```
+ ```
```
//xxx.js
@@ -579,7 +581,7 @@ fillRect(x: number, y: number, width:number, height: number): void
- ```
+```
```
//xxx.js
@@ -1934,4 +1936,6 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
![zh-cn_image_0000001168984882](figures/zh-cn_image_0000001168984882.png)
+ ```
+
```
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_tab.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_tab.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fde104516f23c4dcc56b3c9f54334d7ee40925a6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_tab.gif differ
diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md
index 76f5835718244b28aa75d997f0086bfae614ba30..f074c9f5c2a24454d8396d3f26ed33f1136bc5ea 100644
--- a/zh-cn/application-dev/ui/ui-js-component-tabs.md
+++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md
@@ -230,12 +230,16 @@ export default {
```
/* xxx.css */
.container{
+width: 100%;
+height: 100%;
background-color:#F1F3F5;
}
.tab_bar {
width: 100%;
+ height: 150px;
}
.tab_item {
+ height: 30%;
flex-direction: column;
align-items: center;
}
@@ -302,9 +306,4 @@ export default {
}
```
-![zh-cn_image_0000001163228602](figures/zh-cn_image_0000001163228602.gif)
-
-
-
-
-
+![zh-cn_image_tab](figures\zh-cn_image_tab.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
index a3e0df5d5258236d6e03e7bcfab8818a6baf3b28..3865c41f1e740d805909dee85c0d5b0d62ea8c53 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]);
// 画具有边框的矩形
this.ctx.strokeRect(200, 150, 200, 200);
- }else if(e.newValue == 'value2'){
+ }else if (e.newValue == 'value2'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 30;
this.ctx.strokeStyle = '#0000ff';
@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300, 250, 150,0,6.28);
//进行边框绘制
this.ctx.stroke();
- }else if(e.newValue == 'value3'){
+ }else if (e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 5;
this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200, 150, 200, 200);
- }else if(e.newValue == 'value4'){
+ }else if (e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
// 画一个有填充颜色的矩形
this.ctx.fillStyle = '#0000ff';
diff --git a/zh-cn/application-dev/ui/ui-js-components-menu.md b/zh-cn/application-dev/ui/ui-js-components-menu.md
index 379b4ea4806c0f3a8f36b46e3f020bdb83e9d684..0ea286c5d05009fa0c147059a3ae069a8e823d23 100644
--- a/zh-cn/application-dev/ui/ui-js-components-menu.md
+++ b/zh-cn/application-dev/ui/ui-js-components-menu.md
@@ -260,12 +260,12 @@ export default {
{name: "black", checked:false},
],
},
- toggleClick(index){
- for(let i=0;i
-
-
- This is a passage
-
-
- This is a passage
-
-
- ```
+ 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
+```
+
+
+
+ This is a passage
+
+
+ This is a passage
+
+
+```
-
- /* xxx.css */
- .container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #F1F3F5;
- }
- ```
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
-
- ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png)
+ ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png)
- 添加划线
+ 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考 Text自有样式。
- 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考Text自有样式。
-
-
- ```
@@ -82,50 +76,38 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
This is a passage
-
+
- ```
-
-
-
- ```
- /* xxx.css */
- .container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- text{
- font-size: 50px;
- }
- ```
-
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+text{
+ font-size: 50px;
+}
+```
-
- ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
+ ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
- 隐藏文本内容
+ 当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现
- 当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。
-
-
-
- ```
-
-
-
- This is a passage
-
-
- ```
-
+```
+
+
+
+ This is a passage
+
+
+```
-
- ```
/* xxx.css */
.container {
width: 100%;
@@ -133,51 +115,42 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
- justify-content: center;
+ justify-content: center;
}
.text{
width: 200px;
max-lines: 1;
text-overflow:ellipsis;
}
- ```
+ **说明:**
-
- > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
- > - text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
- >
- > - max-lines属性设置文本最多可以展示的行数。
+- text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
+- max-lines属性设置文本最多可以展示的行数。
-
- ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
+ ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
- 设置文本折行
+ 设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。
- 设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。
-
-
-
- ```
-
-
-
-
- Welcome to the world
-
-
- Welcome to the world
-
-
-
- ```
+```
+
+
+
+
+ Welcome to the world
+
+
+ Welcome to the world
+
+
+