Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 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 @@
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias">
</div>
```
```
```
```
// xxx.js
export default {
handleClick() {
......@@ -71,10 +70,11 @@
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//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 {
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -431,7 +433,7 @@ export default {
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -579,7 +581,7 @@ fillRect(x: number, y: number, width:number, height: number): void
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//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
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 22eb23b3
......@@ -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)
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 22eb23b3
......@@ -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';
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 22eb23b3
......@@ -260,12 +260,12 @@ export default {
{name: "black", checked:false},
],
},
toggleClick(index){
for(let i=0;i<this.togglesList.length;i++){
if(i == index){
toggleClick(index) {
for(let i=0;i<this.togglesList.length;i++) {
if (i == index) {
this.color = this.togglesList[index].name;
this.togglesList[i].checked = true;
}else{
}else {
this.togglesList[i].checked = false;
}
}
......
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @ 22eb23b3
......@@ -34,47 +34,41 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
- 添加文本样式
设置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>
```
设置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.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自有样式。
​
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline">
......@@ -82,50 +76,38 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
</text>
<text style="text-decoration:line-through;text-decoration-color: red">
This is a passage
</text>
</text>
</div>
```
​
```
/* 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属性将隐藏内容以省略号的形式展现。
​
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
​
```
/* 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自有样式。
​
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
</text>
<text class="text2">
Welcome to the world
</text>
</div>
</div>
```
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
</text>
<text class="text2">
Welcome to the world
</text>
</div>
</div
```
​
```
/* xxx.css */
.container {
background-color: #F1F3F5;
......@@ -206,11 +179,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
word-break: break-all;
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)子组件
......
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 22eb23b3
......@@ -120,7 +120,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
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%')
.padding(10)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或