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 + +
+