Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 d4464f78 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!2790 docs测试修改 

Merge pull request !2790 from wangshuainan1/docs/3.29
上级 5792198c 22eb23b3
隐藏空白更改
内联 并排
Showing with 380 addition and 206 deletion
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ d4464f78
......@@ -12,7 +12,8 @@
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
&lt;input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" /&gt;</div>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias">
</div>
```
```
......@@ -27,9 +28,14 @@
},
antialias() {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d', { antialias: true }); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }}
const ctx = el.getContext('2d', { antialias: true });
ctx.beginPath(); ]
ctx.arc(100, 75, 50, 0, 6.28);
ctx.stroke();
}
}
```
- 示意图（关闭抗锯齿）
![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png)
......@@ -62,12 +68,13 @@
### fillStyle
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -103,6 +110,7 @@ export default {
ctx.strokeRect(25, 25, 85, 105);
}
}
```
![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
......@@ -260,22 +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);
}
}
```
......@@ -300,9 +307,7 @@ export default {
ctx.moveTo(0, 120);
ctx.lineTo(400, 120);
ctx.stroke();
ctx.font = '20px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Top', 10, 120);
ctx.textBaseline = 'bottom';
......@@ -339,7 +344,7 @@ export default {
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
}
}
```
......@@ -389,12 +394,12 @@ export default {
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
- 示例
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -423,12 +428,12 @@ export default {
### shadowBlur
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -571,12 +576,12 @@ fillRect(x: number, y: number, width:number, height: number): void
| height | number | 指定矩形的高度。 |
- 示例
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
......@@ -1740,8 +1745,8 @@ createImageData(width: number, height: number, imageData: Object): Object
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
var imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
var newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
}
}
```
......@@ -1777,8 +1782,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
//xxx.js
export default {
onShow() {
var test = this.$element('getImageData')
var ctx = test.getContext('2d');
const test = this.$element('getImageData')
const ctx = test.getContext('2d');
var imageData = ctx.getImageData(0, 0, 280, 300);
}
}
......@@ -1813,8 +1818,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
//xxx.js
export default {
onShow() {
var test = this.$element('getImageData')
var ctx = test.getContext('2d');
const test = this.$element('getImageData')
const ctx = test.getContext('2d');
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
......@@ -1922,7 +1927,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.fillRect(0, 0, 200, 200);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
......@@ -1930,3 +1935,7 @@ 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-animate-component.md
浏览文件 @ d4464f78
......@@ -104,7 +104,30 @@ export default {
this.options = {
duration: 4000,
};
this.keyframes = [ { transform: { translate: '-120px -0px', scale: 1, rotate: 0 }, transformOrigin: '100px 100px', offset: 0.0, width: 200, height: 200 }, { transform: { translate: '120px 0px', scale: 1.5, rotate: 90 }, transformOrigin: '100px 100px', offset: 1.0, width: 300, height: 300 } ];
this.keyframes = [
{
transform: {
translate: '-120px -0px',
scale: 1,
rotate: 0
},
transformOrigin: '100px 100px',
offset: 0.0,
width: 200,
height: 200
},
{
transform: {
translate: '120px 0px',
scale: 1.5,
rotate: 90
},
transformOrigin: '100px 100px',
offset: 1.0,
width: 300,
height: 300
}
];
},
Show() {
this.animation = this.$element('content').animate(this.keyframes, this.options);
......
zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
浏览文件 @ d4464f78
......@@ -25,6 +25,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -90,7 +92,7 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini
```
<!-- xxx.hml -->
<div style="flex-direction: column;align-items: center;">
<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
<div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
transform: scale({{scaleVal}});"></div>
<div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
......@@ -113,11 +115,6 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini
```
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
justify-content: center;
}
button{
width: 200px;
}
......@@ -128,7 +125,7 @@ button{
justify-content: space-between;
margin-top: 150px;
position: fixed;
top: 55%;
top: 52%;
left: 120px;
}
.row1{
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ d4464f78
......@@ -25,6 +25,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
align-items: center;
flex-direction: column;
......@@ -105,6 +107,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
display: flex;
justify-content: center;
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ d4464f78
......@@ -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,4 +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-button.md
浏览文件 @ d4464f78
......@@ -17,6 +17,8 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -44,6 +46,8 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
......@@ -106,6 +110,8 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
......
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ d4464f78
......@@ -60,7 +60,10 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
background-color: #F1F3F5;
}
canvas{
width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
width: 500px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
```
......@@ -83,9 +86,29 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
```
/* xxx.css */.container{ flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5;}canvas{ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
margin-bottom: 50px;
}.content{ border: 5px solid blue; padding: 10px; width: 90%; height: 400px; overflow: scroll;}
/* xxx.css */
.container{
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 500px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
margin-bottom: 50px;
}
.content{
border: 5px solid blue;
padding: 10px;
width: 90%;
height: 400px;
overflow: scroll;
}
```
......@@ -99,7 +122,9 @@ export default {
porc:'open',
},
onShow(){
let el = this.$refs.canvas1 let ctx = el.getContext("2d") ctx.strokeRect(100,100,300,300)
let el = this.$refs.canvas1;
let ctx = el.getContext("2d");
ctx.strokeRect(100,100,300,300);
},
getUrl(){
let el = this.$refs.canvas1
......
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ d4464f78
......@@ -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';
......@@ -395,7 +395,10 @@ export default {
this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400); gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35');
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// 设置绘制阴影时的模糊级别
this.ctx.shadowBlur = 30;
// 绘制阴影时的阴影颜色
......@@ -405,9 +408,13 @@ export default {
}else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35');
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// 设置绘制阴影时的模糊级别
this.ctx.shadowBlur = 30; this.ctx.shadowOffsetY = 30;
this.ctx.shadowBlur = 30;
this.ctx.shadowOffsetY = 30;
// 绘制阴影时的阴影颜色
this.ctx.shadowColor = 'rgb(23, 1, 1)';
this.ctx.fillStyle = gradient;
......
zh-cn/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ d4464f78
......@@ -9,7 +9,7 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId"><div class="content">
<dialog class="dialogClass" id="dialogId"><div class="content" dragable="ture">
<text>this is a dialog</text>
</div>
</dialog>
......@@ -20,6 +20,8 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
```
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -83,6 +85,8 @@ export default {
```
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @ d4464f78
......@@ -13,7 +13,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
```
<!-- xxx.hml -->
<div class="container">
<form> <input type="text" style="width:80%"></input>
<form style="width: 100%; height: 20%">
<input type="text" style="width:80%"></input>
</form>
</div>
```
......@@ -21,6 +22,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -59,9 +62,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
background-color: #F1F3F5;
}
.formClass{
width: 80%;
padding: 10px;
border: 1px solid #c3d3e7;
width: 100%;
height: 20%;
}
```
......@@ -72,26 +74,46 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 添加响应事件
为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<form onsubmit='onSubmit' onreset='onReset' style="justify-content: center; align-items: center;text-align: center;">
<div style="flex-direction: column;justify-content: center;align-self: center;">
<div style="justify-content: center; align-items: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="margin-top: 30px;justify-content: center; align-items: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
<input type="reset" value="Reset" style="width:100px;"></input>
</div>
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
<div style="width: 100%;justify-content: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="width: 100%;justify-content: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" >
</input>
<input type="reset" value="Reset" style="width:100px;"></input>
</div>
</div>
</form>
</div>
```
```
/* index.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-items: center
align-items: center;
background-color: #F1F3F5;
}
.form{
width: 100%;
height: 30%;
flex-direction: column;
justify-items: center
align-items: center;
}
```
```
/* xxx.js */
import prompt from '@system.prompt';
......
zh-cn/application-dev/ui/ui-js-components-images.md
浏览文件 @ d4464f78
......@@ -9,13 +9,15 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
```
<!-- index.hml -->
<div class="container">
<image src="common/images/bg-tv.jpg"> </image>
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -45,15 +47,15 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F1F3F5;
background-color:#F1F3F5;
}
image{
width: 80%; height: 500px;
width: 80%;
height: 500px;
border: 5px solid saddlebrown;
border-radius: 20px;
object-fit: contain;
match-text-direction:true;
}
```
......@@ -69,10 +71,13 @@ image{
<div class="page-container">
<list>
<list-item class="item-container" for="{{list}}">
<image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
<div class="text-container">
<text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
<text style="font-size: 23px;color: orange;font-style: italic;">content</text>
<div>
<image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};">
</image>
<div class="text-container">
<text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
<text style="font-size: 23px;color: orange;font-style: italic;">content</text>
</div>
</div>
</list-item>
</list>
......@@ -235,7 +240,10 @@ export default {
justify-content: space-between;
}
.testimage {
width: 100%; height: 400px; object-fit: scale-down; border-radius: 20px;}
width: 100%; height: 400px;
object-fit: scale-down;
border-radius: 20px;
}
```
```
......
zh-cn/application-dev/ui/ui-js-components-input.md
浏览文件 @ d4464f78
......@@ -17,6 +17,8 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -54,6 +56,8 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
......@@ -120,6 +124,7 @@ export default {
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -176,6 +181,7 @@ export default {
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......
zh-cn/application-dev/ui/ui-js-components-list.md
浏览文件 @ d4464f78
......@@ -10,7 +10,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
```
<!-- index.hml -->
<div class="container">
<list> <list-item class="listItem"></list-item>
<list>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
......@@ -21,6 +22,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
......@@ -191,6 +194,7 @@ export default {
![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
>
> - groupcollapse和groupexpand事件仅支持list-item-group组件使用。
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ d4464f78
......@@ -25,6 +25,8 @@
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
......@@ -65,6 +67,8 @@
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
......@@ -115,6 +119,8 @@ option{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
......@@ -254,7 +260,16 @@ export default {
{name: "black", checked:false},
],
},
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{ this.togglesList[i].checked = false; } } },
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 {
this.togglesList[i].checked = false;
}
}
},
select(e) {
this.width = e.value * 100;
this.height = e.value * 100;
......
zh-cn/application-dev/ui/ui-js-components-picker.md
浏览文件 @ d4464f78
......@@ -17,6 +17,8 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -42,6 +44,8 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -86,6 +90,8 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -121,6 +127,8 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......
zh-cn/application-dev/ui/ui-js-components-slider.md
浏览文件 @ d4464f78
......@@ -17,8 +17,6 @@ Slider为滑动条组件，用来快速调节音量、亮度等。具体用法
</div>
```
```
/* xxx.css */
.container {
......@@ -119,6 +117,8 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......
zh-cn/application-dev/ui/ui-js-components-stepper.md
浏览文件 @ d4464f78
......@@ -14,7 +14,8 @@
```
<!-- index.hml -->
<div class="container">
<stepper> <stepper-item>
<stepper>
<stepper-item>
<text>Step 1</text>
</stepper-item>
<stepper-item>
......@@ -27,6 +28,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -66,6 +69,8 @@ text{
```
/* index.css */
.container {
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
}
......@@ -102,7 +107,9 @@ text{
```
/* index.css */
.container {
.container {
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
}
......@@ -154,6 +161,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框
```
/* index.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -208,6 +217,8 @@ Stepper分别添加finish，change，next，back，skip事件。
```
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -325,6 +336,8 @@ export default {
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......
zh-cn/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ d4464f78
......@@ -28,18 +28,24 @@ Swiper为滑动容器，提供切换显示子组件的能力。具体用法请
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
height: 500px;
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
......@@ -84,11 +90,15 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
......@@ -96,6 +106,7 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
......@@ -138,11 +149,12 @@ text{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
width: 500px;
......@@ -205,11 +217,15 @@ text{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
......@@ -217,6 +233,7 @@ text{
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
......
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @ d4464f78
......@@ -44,6 +44,8 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
......@@ -53,7 +55,7 @@ switch{
// 选中时的字体颜色
texton-color: #002aff;
// 未选中时的字体颜色
textoff-color: silver;
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
}
......@@ -114,6 +116,8 @@ export default {
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
padding: 50px;
......
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @ d4464f78
......@@ -34,45 +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>
```
```
/* 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)
设置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;
}
```
![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">
......@@ -80,46 +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;
}
```
![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
```
/* 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)
- 隐藏文本内容
当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
......@@ -127,47 +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属性设置文本最多可以展示的行数。
![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
**说明：**
- text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
- max-lines属性设置文本最多可以展示的行数。
​ ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
- 设置文本折行
​ 设置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
```
设置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.css */
.container {
background-color: #F1F3F5;
......@@ -196,23 +179,25 @@ 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)子组件
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span>
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1
</span>
<span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span>
<span style="color: red;"> passage </span>
</text>
</div>
```
......@@ -253,6 +238,8 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
......
zh-cn/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @ d4464f78
......@@ -23,6 +23,8 @@ Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -44,7 +46,12 @@ toolbar-item{
<!-- xxx.hml -->
<div class="container">
<toolbar>
<toolbar-item value="item1"></toolbar-item> <toolbar-item value="item2"></toolbar-item> <toolbar-item value="item3"></toolbar-item> <toolbar-item value="item4"></toolbar-item> <toolbar-item value="item5"></toolbar-item> <toolbar-item value="item6"></toolbar-item>
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
<toolbar-item value="item3"></toolbar-item>
<toolbar-item value="item4"></toolbar-item>
<toolbar-item value="item5"></toolbar-item>
<toolbar-item value="item6"></toolbar-item>
</toolbar>
</div>
```
......@@ -53,6 +60,8 @@ toolbar-item{
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -92,6 +101,7 @@ toolbar-item{
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
......@@ -131,6 +141,7 @@ toolbar-item{
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
......
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ d4464f78
......@@ -108,8 +108,8 @@ GridContainer() {
struct GridContainerExample {
build() {
Column({ space: 5 }) {
GridContainer({ columns: 6, sizeType: SizeType.Auto, gutter: 10, margin: 20 }) {
Row() {
GridContainer({ columns: 6 }) {
Flex({justifyContent:FlexAlign.SpaceAround}) {
Text('1')
.useSizeType({
xs: { span: 2, offset: 0 },
......@@ -120,18 +120,18 @@ struct GridContainerExample {
.height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
Text('2')
.useSizeType({
xs: { span: 2, offset: 2 },
sm: { span: 2, offset: 2 },
md: { span: 4, offset: 1 },
lg: { span: 4, offset: 1 },
xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
md: { span: 4, offset: 0 },
lg: { span: 4, offset: 0 },
})
.height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
Text('3')
.useSizeType({
xs: { span: 2, offset: 4 },
sm: { span: 2, offset: 4 },
md: { span: 1, offset: 5 },
lg: { span: 1, offset: 5 },
xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 0 },
md: { span: 1, offset: 0 },
lg: { span: 1, offset: 0 },
})
.height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或