Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“09096aebd49b1c07b8c0fea29206413f1ca938cc”上不存在“paddle/phi/kernels/funcs/softmax.cc”
提交 619b52b9 编写于 作者: Y yamila
浏览文件
操作

uiANDjs example cherryPick 3.1release 

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 be45b036
显示空白变更内容
内联 并排
Showing with 328 addition and 304 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
浏览文件 @ 619b52b9
......@@ -92,34 +92,36 @@
## 示例
1. type为text
```
```html
<!-- xxx.hml -->
<div class="content">
<input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
headericon="/common/search.svg" placeholder="Please input text" onchange="change"
onenterkeyclick="enterkeyClick">
</input>
<input class="button" type="button" value="Submit" onclick="buttonClick"></input>
<input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input>
</div>
```
```
```css
/* xxx.css */
.content {
width: 60%;
width: 100%;
flex-direction: column;
align-items: center;
}
.input {
width: 60%;
placeholder-color: gray;
}
.button {
width: 60%;
background-color: gray;
margin-top: 20px;
}
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......@@ -140,20 +142,20 @@
error: 'error text'
});
},
}
}
```
![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png)
2. type为button
```
```html
<!-- xxx.hml -->
<div class="div-button">
<input class="button" type="button" value="Input-Button"></input>
</div>
```
```
```css
/* xxx.css */
.div-button {
flex-direction: column;
......@@ -168,14 +170,14 @@
![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png)
3. type为checkbox
```
```html
<!-- xxx.hml -->
<div class="content">
<input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div>
```
```
```css
/* xxx.css */
.content{
width: 100%;
......@@ -185,7 +187,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......@@ -201,7 +203,7 @@
![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png)
4. type为radio
```
```html
<!-- xxx.hml -->
<div class="content">
<input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input>
......@@ -210,7 +212,7 @@
</div>
```
```
```css
/* xxx.css */
.content{
width: 100%;
......@@ -220,7 +222,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
浏览文件 @ 619b52b9
......@@ -60,7 +60,7 @@
## 示例
```
```html
<!--xxx.hml -->
<div class="container">
<div class="row">
......@@ -78,11 +78,11 @@
</div>
```
```
```css
/*xxx.css */
.container {
flex-direction: column;
align-items: center;
margin-left: 20px;
}
.row {
flex-direction: row;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ 619b52b9
......@@ -53,7 +53,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}"
......@@ -71,7 +71,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -90,7 +90,7 @@ select{
}
```
```
```js
/* index.js */
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ 619b52b9
......@@ -37,7 +37,7 @@
### getContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
......@@ -77,7 +77,7 @@ toDataURL(type?: string, quality?: number): string
## 示例
```
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
......@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string
</div>
```
```
```css
// xxx.js
export default {
handleClick() {
......
zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 619b52b9
......@@ -42,7 +42,7 @@
PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。
```
```html
<!-- PageA -->
<!-- xxx.hml -->
<div>
......@@ -57,7 +57,7 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
</div>
```
```
```js
// xxx.js
import router from '@system.router';
export default {
......@@ -70,7 +70,7 @@ export default {
}
```
```
```css
/* xxx.css */
.shared-transition-style {
shared-transition-effect: exchange;
......@@ -82,7 +82,7 @@ export default {
}
```
```
```html
<!-- PageB -->
<!-- xxx.hml -->
<div>
......@@ -90,7 +90,7 @@ export default {
</div>
```
```
```js
// xxx.js
import router from '@system.router';
export default {
......@@ -100,7 +100,7 @@ export default {
}
```
```
```css
/* xxx.css */
.shared-transition-style {
shared-transition-effect: exchange;
......@@ -130,7 +130,7 @@ export default {
source_page包含顶部内容以及卡片列表，点击卡片可以跳转到target_page。
```
```html
<!-- source_page -->
<!-- xxx.hml -->
<div class="container">
......@@ -145,7 +145,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
</div>
```
```
```js
// xxx.js
import router from '@system.router'
export default {
......@@ -164,7 +164,7 @@ export default {
}
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -184,7 +184,7 @@ export default {
}
```
```
```html
<!-- target_page -->
<!-- xxx.hml -->
<div class="container">
......@@ -194,7 +194,7 @@ export default {
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -245,7 +245,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
1. Page1
```
```html
<!-- xxx.hml -->
<div class="container">
<text>index</text>
......@@ -253,7 +253,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
</div>
```
```
```js
<!-- xxx.js -->
import router from '@system.router';
export default {
......@@ -268,7 +268,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
```
```
```css
<!-- xxx.css -->
.container {
flex-direction: column;
......@@ -315,15 +315,15 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
2. Page2
```
```html
<!-- xxx.hml -->
<div class="container">
<text>transition</text>
<div class="move_page" onclick="jumpBack"></div>
</div
</div>
```
```
```js
<!-- xxx.js -->
import router from '@system.router';
export default {
......@@ -336,7 +336,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
```
```
```css
<!-- xxx.css -->
.container {
flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ 619b52b9
......@@ -71,7 +71,7 @@
| scrollend | - | 列表滑动已经结束。 |
| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
| requestitem | - | 请求创建新的list-item。<br/>长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
| rotate<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
| rotation<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
## 方法
......
zh-cn/application-dev/reference/arkui-js/js-components-media-video.md
浏览文件 @ 619b52b9
......@@ -5,15 +5,6 @@
>
> - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 需要在config.json对应的"abilities"中设置"configChanges"属性为"orientation"
> ```
> "abilities": [
> {
> "configChanges": ["orientation"],
> ...
> }
> ]
> ```
视频播放组件。
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 619b52b9
......@@ -21,7 +21,8 @@
Circle(options?: {width?: string | number, height?: string | number})
## 参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
......@@ -32,19 +33,19 @@ Circle(options?: {width?: string | number, height?: string | number})
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>**说明：**<br/>Circle组件无法设置锐角图形，该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 619b52b9
......@@ -22,30 +22,31 @@
ellipse(options?: {width?: string | number, height?: string | number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 |设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - |设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 619b52b9
......@@ -21,32 +21,33 @@
Line(options?: {width?: string | number, height?: string | number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| startPoint | Array | [0,&nbsp;0] | 是 | 直线起点坐标点(相对坐标)。 |
| endPoint | Array | [0,&nbsp;0] | 是 | 直线终点坐标点(相对坐标)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| startPoint | Array | [0,&nbsp;0] | 直线起点坐标点(相对坐标)。 |
| endPoint | Array | [0,&nbsp;0] | 直线终点坐标点(相对坐标)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。<br/>**说明：**<br/>Line组件无法形成闭合区域，该属性设置无效。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。<br/>**说明：**<br/>Line组件无法形成闭合区域，该属性设置无效。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>**说明：**<br/>Line组件无法设置锐角图形，该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 619b52b9
......@@ -16,13 +16,13 @@
Path(value?: { width?: number | string; height?: number | string; commands?: string })
- 参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------ | -------------------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度 |
| commands | string | 否 | '' | 路径绘制的命令字符串 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------ | -------------------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度 |
| commands | string | 否 | '' | 路径绘制的命令字符串 |
......@@ -30,20 +30,20 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------- | ----------------------------------- | ---- | ---------------------------------------- |
| commands | string | '' | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
commands支持的绘制命令如下：
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 619b52b9
......@@ -21,18 +21,19 @@
Polygon(options?: {width?: string | number, height?: string | number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 多边形的顶点坐标列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 619b52b9
......@@ -22,31 +22,32 @@
Polyline(options?: {width?: string | number, height?: string | number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 折线经过坐标点列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 折线经过坐标点列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## Point
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 619b52b9
......@@ -23,36 +23,37 @@
Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
| radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
| radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 否 | 圆角半径大小。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 圆角的宽度，仅设置宽时宽高一致。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 圆角的高度，仅设置高时宽高一致。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 圆角半径大小。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 619b52b9
......@@ -25,17 +25,18 @@
Shape(value?: PixelMap)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
......
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ 619b52b9
......@@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例代码
```
```js
// app.js
export default {
onCreate() {
......@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
};
```
```
```js
// index.js页面逻辑代码
export default {
data: {
......@@ -91,7 +91,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例代码
```
```js
// index.js
export default {
data: {
......@@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例：
```
```js
this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
```
......@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 获取DOM元素
1. 通过$refs获取DOM元素
```
```html
<!-- index.hml -->
<div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
```
2. 通过$element获取DOM元素
```
```html
<!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
根节点所在页面：
```
```html
<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
......@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
</div>
```
```
```js
// root.js
export default {
data: {
......@@ -243,25 +243,25 @@ export default {
自定义parent组件：
```
```html
<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
<text class="text-style" onclick="parentClicked">parent component click</text>
<text class="text-style" if="{{show}}">hello parent component!</text>
<text class="text-style" if="{{showValue}}">hello parent component!</text>
<childComp id = "selfDefineChild"></childComp>
</div>
```
```
```js
// parent.js
export default {
data: {
show: false,
showValue: false,
text: 'I am parent component!',
},
parentClicked () {
this.show = !this.show;
this.showValue = !this.showValue
console.info('parent component get parent text');
console.info(`${this.$parent().text}`);
console.info("parent component get child function");
......@@ -272,7 +272,7 @@ export default {
自定义child组件：
```
```html
<!-- child.hml -->
<div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">child component clicked</text>
......@@ -280,7 +280,7 @@ export default {
</div>
```
```
```js
// child.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-animate-svg.md
浏览文件 @ 619b52b9
......@@ -9,7 +9,7 @@
在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -46,7 +46,7 @@
在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="800" height="900">
......@@ -65,10 +65,10 @@
## animateTransform动画
在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
在Svg的子组件[animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
```
```html
<!-- xxx.hml -->
<div class="container" style="">
<svg>
......@@ -94,7 +94,7 @@
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 619b52b9
......@@ -7,7 +7,7 @@
创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="top"></div>
......@@ -22,7 +22,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -38,8 +38,8 @@
height: 428px;
background-color: #860303;
transform: rotate(45deg);
margin-top: 230px;
margin-left: 266px;
margin-top: 284px;
margin-left: 148px;
}
.content{
margin-top: 500px;
......@@ -52,7 +52,7 @@
width: 100px;
height: 150px;
background-color: #1033d9;
transform: translate(150px,-150px);
transform: translate(150px,-137px);
}
.window{
z-index: 1;
......@@ -85,7 +85,7 @@
height: 100px;
border-radius: 15px;
background-color: #9a7404;
transform: translate(200px,-830px) skewX(-5deg);
transform: translate(200px,-710px) skewX(-5deg);
}
```
......@@ -96,7 +96,7 @@
小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="circle"></div>
......@@ -104,7 +104,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -175,7 +175,7 @@
设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="rotate">
......@@ -194,7 +194,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -252,13 +252,13 @@
.rect4{
width: 100px;
height: 100px;
animation: rotate3d1 17ms infinite;
animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9)
}
.rect5{
width: 100px;
height: 100px;
animation: rotate3d1 17ms infinite;
animation: rotate3d1 1000ms infinite;
margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9)
}
......@@ -268,7 +268,7 @@
height: 100px;
border-radius: 50px;
border: 1px solid #e70303;
animation: rotate3d2 17ms infinite;
animation: rotate3d2 1000ms infinite;
}
/* 眼睛的动效 */
@keyframes rotate3d1{
......@@ -311,7 +311,7 @@
设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="circle">
......@@ -326,7 +326,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -422,14 +422,14 @@ text{
matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="rect"> </div>
</div>
```
```
```css
/* xxx.css */
.container{
background-color:#F1F3F5;
......@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY
transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="rect1"></div>
......@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 619b52b9
......@@ -7,7 +7,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
在pages/index目录下的hml文件中创建一个Tabs组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<tabs>
......@@ -15,7 +15,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<tab-content class="tabContent">
<div class="text">
<text>content1</text>
</div>
......@@ -27,7 +27,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -35,6 +35,10 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
align-items: center;
background-color: #F1F3F5;
}
.tabContent{
width: 100%;
height: 100%;
}
.text{
width: 100%;
height: 100%;
......@@ -50,7 +54,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
```
```html
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true">
......@@ -74,7 +78,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
```
```html
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;">
......@@ -100,7 +104,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
## 设置样式
设置Tabs背景色及边框和tab-content布局。
```
```html
<!-- index.hml -->
<div class="container">
<tabs class="tabs">
......@@ -120,7 +124,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -155,7 +159,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。
```
```html
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange">
......@@ -175,7 +179,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div>
```
```
```js
/* index.js */
import prompt from '@system.prompt';
export default {
......@@ -201,7 +205,7 @@ export default {
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
```
```html
<!-- index.hml -->
<div class="container">
<tabs onchange="changeTabactive">
......@@ -229,7 +233,7 @@ export default {
</div>
```
```
```css
/* xxx.css */
.container{
width: 100%;
......@@ -265,7 +269,7 @@ background-color:#F1F3F5;
}
```
```
```js
/* index.js */
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ 619b52b9
......@@ -9,7 +9,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
在pages/index目录下的hml文件中创建一个Canvas组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
......@@ -17,9 +17,11 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -43,7 +45,7 @@ canvas{
Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
......@@ -51,9 +53,11 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -75,7 +79,7 @@ canvas{
Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas>
......@@ -85,7 +89,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
```
```
```css
/* xxx.css */
.container{
width:100%;
......@@ -112,7 +116,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 619b52b9
......@@ -9,7 +9,7 @@
使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -24,9 +24,11 @@
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -47,7 +49,7 @@ select{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -209,7 +211,7 @@ export default {
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -222,11 +224,11 @@ export default {
</div>
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -246,9 +248,7 @@ select{
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -307,7 +307,7 @@ export default {
添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -321,9 +321,11 @@ export default {
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -344,7 +346,7 @@ select{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -432,7 +434,7 @@ export default {
先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -445,9 +447,11 @@ export default {
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -468,7 +472,7 @@ select{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -566,7 +570,7 @@ export default {
创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -588,7 +592,7 @@ export default {
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -623,7 +627,7 @@ text{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -742,7 +746,7 @@ export default {
save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -757,9 +761,11 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
......@@ -791,7 +797,7 @@ text{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @ 619b52b9
......@@ -10,7 +10,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 创建Form组件
在pages/index目录下的hml文件中创建一个Form组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<form style="width: 100%; height: 20%">
......@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -37,7 +37,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 实现表单缩放
为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
```
```html
<!-- xxx.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
......@@ -53,7 +53,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -79,7 +79,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
```
```html
<!-- xxx.hml -->
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
......@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div>
```
```
```css
/* index.css */
.container{
width: 100%;
......@@ -118,7 +118,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
}
```
```
```js
/* xxx.js */
import prompt from '@system.prompt';
export default{
......@@ -145,7 +145,7 @@ export default{
创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。
```
```html
<!-- xxx.hml -->
<div class="container">
<form onsubmit="formSubmit" onreset="formReset">
......@@ -180,9 +180,11 @@ export default{
</div>
```
```
```css
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction:column;
align-items:center;
background-color:#F1F3F5;
......@@ -197,7 +199,7 @@ label{
}
```
```
```js
/* xxx.js */
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 619b52b9
......@@ -9,7 +9,7 @@
在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
......@@ -22,12 +22,13 @@
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
......@@ -44,7 +45,7 @@
grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
......@@ -61,19 +62,20 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......@@ -113,7 +115,7 @@ export default {
创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
......@@ -148,12 +150,13 @@ export default {
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
......@@ -174,7 +177,7 @@ text{
本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。
```
```html
<!-- index.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -197,12 +200,13 @@ text{
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
height: 100%;
}
text{
color: #0a0aef;
......@@ -211,7 +215,7 @@ text{
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 619b52b9
......@@ -4,7 +4,7 @@
以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -23,9 +23,11 @@
</div>
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -45,7 +47,7 @@ select{
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -89,7 +91,7 @@ export default {
使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -103,9 +105,11 @@ export default {
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -136,7 +140,7 @@ button{
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 619b52b9
......@@ -8,14 +8,14 @@
创建Path2D，使用多条线段组合图形。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas"></canvas>
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -23,6 +23,7 @@
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
canvas{
width: 600px;
......@@ -32,7 +33,7 @@ canvas{
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -81,7 +82,7 @@ export default {
先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas"></canvas>
......@@ -93,7 +94,7 @@ export default {
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -101,6 +102,7 @@ export default {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
canvas{
width: 600px;
......@@ -128,7 +130,7 @@ text{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
......
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 619b52b9
......@@ -9,19 +9,17 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
在pages/index目录下的hml文件中创建一个Switch组件。
```
```html
<div class="container">
<switch></switch>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
```
......@@ -33,7 +31,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
```
```html
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
......@@ -60,7 +58,7 @@ switch{
```
```
```css
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -92,7 +90,7 @@ export default {
实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="change">
......@@ -111,7 +109,7 @@ export default {
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -166,7 +164,7 @@ switch{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或