Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 22eb23b3 编写于 作者: W wangshuainan1
浏览文件
操作

docs修改 

Signed-off-by: Nwangshuainan1 <wangshuainan1@huawei.com>
Change-Id: Ica0ffd68cf9250d2da182a105872466d21b9676a
Signed-off-by: Nwangshuainan1 <wangshuainan1@huawei.com>
上级 8cd86b28
隐藏空白更改
内联 并排
Showing with 103 addition and 129 deletion
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 22eb23b3
...@@ -15,9 +15,8 @@ ...@@ -15,9 +15,8 @@
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias"> <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias">
</div> </div>
``` ```
```
```
```
// xxx.js // xxx.js
export default { export default {
handleClick() { handleClick() {
...@@ -71,10 +70,11 @@ ...@@ -71,10 +70,11 @@
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
``` ```
``` ```
//xxx.js //xxx.js
...@@ -110,6 +110,7 @@ export default { ...@@ -110,6 +110,7 @@ export default {
ctx.strokeRect(25, 25, 85, 105); ctx.strokeRect(25, 25, 85, 105);
} }
} }
``` ```
![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png) ![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
...@@ -267,20 +268,21 @@ export default { ...@@ -267,20 +268,21 @@ export default {
ctx.moveTo(140, 10); ctx.moveTo(140, 10);
ctx.lineTo(140, 160); ctx.lineTo(140, 160);
ctx.stroke(); ctx.stroke();
ctx.font = '18px sans-serif'; ctx.font = '18px sans-serif';
// Show the different textAlign values // Show the different textAlign values
ctx.textAlign = 'start'; ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 140, 60); ctx.fillText('textAlign=start', 140, 60);
ctx.textAlign = 'end'; ctx.textAlign = 'end';
ctx.fillText('textAlign=end', 140, 80); ctx.fillText('textAlign=end', 140, 80);
ctx.textAlign = 'left'; ctx.textAlign = 'left';
ctx.fillText('textAlign=left', 140, 100); ctx.fillText('textAlign=left', 140, 100);
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.fillText('textAlign=center',140, 120); ctx.fillText('textAlign=center',140, 120);
ctx.textAlign = 'right'; ctx.textAlign = 'right';
ctx.fillText('textAlign=right',140, 140); ctx.fillText('textAlign=right',140, 140);
} }
} }
``` ```
...@@ -397,7 +399,7 @@ export default { ...@@ -397,7 +399,7 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
``` ```
``` ```
//xxx.js //xxx.js
...@@ -431,7 +433,7 @@ export default { ...@@ -431,7 +433,7 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
``` ```
``` ```
//xxx.js //xxx.js
...@@ -579,7 +581,7 @@ fillRect(x: number, y: number, width:number, height: number): void ...@@ -579,7 +581,7 @@ fillRect(x: number, y: number, width:number, height: number): void
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
``` ```
``` ```
//xxx.js //xxx.js
...@@ -1934,4 +1936,6 @@ transferFromImageBitmap(bitmap: ImageBitmap): void ...@@ -1934,4 +1936,6 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
![zh-cn_image_0000001168984882](figures/zh-cn_image_0000001168984882.png) ![zh-cn_image_0000001168984882](figures/zh-cn_image_0000001168984882.png)
```
``` ```
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 22eb23b3
...@@ -230,12 +230,16 @@ export default { ...@@ -230,12 +230,16 @@ export default {
``` ```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
background-color:#F1F3F5; background-color:#F1F3F5;
} }
.tab_bar { .tab_bar {
width: 100%; width: 100%;
height: 150px;
} }
.tab_item { .tab_item {
height: 30%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
...@@ -302,9 +306,4 @@ export default { ...@@ -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)
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 22eb23b3
...@@ -274,7 +274,7 @@ export default { ...@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]); this.ctx.setLineDash([0,0]);
// 画具有边框的矩形 // 画具有边框的矩形
this.ctx.strokeRect(200, 150, 200, 200); 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.clearRect(0,0,600,500);
this.ctx.lineWidth = 30; this.ctx.lineWidth = 30;
this.ctx.strokeStyle = '#0000ff'; this.ctx.strokeStyle = '#0000ff';
...@@ -283,12 +283,12 @@ export default { ...@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300, 250, 150,0,6.28); this.ctx.arc(300, 250, 150,0,6.28);
//进行边框绘制 //进行边框绘制
this.ctx.stroke(); this.ctx.stroke();
}else if(e.newValue == 'value3'){ }else if (e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 5; this.ctx.lineWidth = 5;
this.ctx.setLineDash([5,5]); this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200, 150, 200, 200); 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.clearRect(0,0,600,500);
// 画一个有填充颜色的矩形 // 画一个有填充颜色的矩形
this.ctx.fillStyle = '#0000ff'; this.ctx.fillStyle = '#0000ff';
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 22eb23b3
...@@ -260,12 +260,12 @@ export default { ...@@ -260,12 +260,12 @@ export default {
{name: "black", checked:false}, {name: "black", checked:false},
], ],
}, },
toggleClick(index){ toggleClick(index) {
for(let i=0;i<this.togglesList.length;i++){ for(let i=0;i<this.togglesList.length;i++) {
if(i == index){ if (i == index) {
this.color = this.togglesList[index].name; this.color = this.togglesList[index].name;
this.togglesList[i].checked = true; this.togglesList[i].checked = true;
}else{ }else {
this.togglesList[i].checked = false; this.togglesList[i].checked = false;
} }
} }
......
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @ 22eb23b3
...@@ -34,47 +34,41 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -34,47 +34,41 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
- 添加文本样式 - 添加文本样式
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
​
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
```
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
```
​ ```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #F1F3F5; 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自有样式。
​
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline"> <text style="text-decoration:underline">
...@@ -82,50 +76,38 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -82,50 +76,38 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
</text> </text>
<text style="text-decoration:line-through;text-decoration-color: red"> <text style="text-decoration:line-through;text-decoration-color: red">
This is a passage This is a passage
</text> </text>
</div> </div>
``` ```
/* xxx.css */
.container {
​ width: 100%;
``` height: 100%;
/* xxx.css */ flex-direction: column;
.container { align-items: center;
width: 100%; justify-content: center;
height: 100%; }
flex-direction: column; text{
align-items: center; font-size: 50px;
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属性将隐藏内容以省略号的形式展现。 ```
<!-- xxx.hml -->
<div class="container">
​ <text class="text">
``` This is a passage
<!-- xxx.hml --> </text>
<div class="container"> </div>
<text class="text"> ```
This is a passage
</text>
</div>
```
​
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -133,51 +115,42 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -133,51 +115,42 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
justify-content: center; justify-content: center;
} }
.text{ .text{
width: 200px; width: 200px;
max-lines: 1; max-lines: 1;
text-overflow:ellipsis; text-overflow:ellipsis;
} }
```
**说明：**
​ - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** - 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自有样式。 ```
<!-- xxx.hml -->
<div class="container">
​ <div class="content">
``` <text class="text1">
<!-- xxx.hml --> Welcome to the world
<div class="container"> </text>
<div class="content"> <text class="text2">
<text class="text1"> Welcome to the world
Welcome to the world </text>
</text> </div>
<text class="text2"> </div
Welcome to the world ```
</text>
</div>
</div>
```
​
```
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -206,11 +179,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -206,11 +179,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
word-break: break-all; word-break: break-all;
font-size: 40px; font-size: 40px;
} }
```
​ ​ ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
- Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件 - Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件
......
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 22eb23b3
...@@ -120,7 +120,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F ...@@ -120,7 +120,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
Flex({ wrap: FlexWrap.WrapReverse}) { Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
} }
.width('90%') .width('90%')
.padding(10) .padding(10)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或