Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs
提交 e9a960fa 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 d318f2d3
展开全部 隐藏空白更改
内联 并排
Showing with 686 addition and 613 deletion
en/application-dev/ui/ui-js-building-ui-component.md
浏览文件 @ e9a960fa
...@@ -11,26 +11,11 @@ You can also customize a new component through proper combination of components ...@@ -11,26 +11,11 @@ You can also customize a new component through proper combination of components
Components can be classified into the following types based on their functions. Components can be classified into the following types based on their functions.
| Type | Components | | Type | Components |
| -------- | -------- | | --------- | ---------------------------------------- |
| Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content | | Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content |
| Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle | | Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle |
| Media | video | | Media | video |
| Canvas | canvas | | Canvas | canvas |
| Grid | grid-container, grid-row, grid-col | | Grid | grid-container, grid-row, grid-col |
| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform | | SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |
## Samples \ No newline at end of file
The following samples are provided to help you better understand how to develop components:
- [`JsPanel`: Content Display Panel (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
- [`Popup`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
- [`RefreshContainer`: Refresh Container (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
- [`JSComponments`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
- [`JsUserRegistration`: User Registration (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
- [`ECG`: Heart Rate Detection (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
- [`Badge`: Badge (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [`JsVideo`: JsVideo (API 8)](https://gitee.com/openharmony/app_samples/tree/master/media/JsVideo)
- [Rating (JavaScript)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
- [Simple Video Player](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)
zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md
浏览文件 @ e9a960fa
...@@ -14,118 +14,118 @@ ...@@ -14,118 +14,118 @@
## 属性 ## 属性
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | -------- | ------------------------- | ---- | ---------------------------------------- |
| type | string | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br>默认值：line | | type | string | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br>默认值：line |
| options | ChartOptions | 是 | 图表参数设置，柱状图和线形图必须设置参数设置。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | | options | ChartOptions | 是 | 图表参数设置，柱状图和线形图必须设置参数设置。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array&lt;ChartDataset&gt; | 是 | 数据集合，柱状图和线形图必须设置数据集合。可以设置多条数据集及其背景色。 | | datasets | Array&lt;ChartDataset&gt; | 是 | 数据集合，柱状图和线形图必须设置数据集合。可以设置多条数据集及其背景色。 |
| id | string | 否 | 组件的唯一标识。 | | id | string | 否 | 组件的唯一标识。 |
| style | string | 否 | 组件的样式声明。 | | style | string | 否 | 组件的样式声明。 |
| class | string | 否 | 组件的样式类，用于引用样式表。 | | class | string | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 | | ref | string | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
**表2** ChartOptions **表1** ChartOptions
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | ------ | ----------- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | | xAxis | ChartAxis | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | | yAxis | ChartAxis | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartSeries | 否 | 数据序列参数设置。可以设置：<br>1. 线的样式，如线宽、是否平滑；<br>2. 设置线最前端位置白点的样式和大小。<br/>**说明：**<br>仅线形图支持。 | | series | ChartSeries | 否 | 数据序列参数设置。可以设置：<br>1. 线的样式，如线宽、是否平滑；<br>2. 设置线最前端位置白点的样式和大小。<br/>**说明：**<br>仅线形图支持。 |
**表3** ChartDataset **表2** ChartDataset
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------------------- | ------------------- | -------- | ---- | -------------------- |
| backgroundColor(deprecated) | &lt;color&gt; | \#ff6384 | 否 | 设置线或柱的颜色（不推荐使用）。 | | backgroundColor(deprecated) | &lt;color&gt; | \#ff6384 | 否 | 设置线或柱的颜色（不推荐使用）。 |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色。仅线形图支持。 | | strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色。仅线形图支持。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 | | fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt; | - | 是 | 设置绘制线或柱中的点集。 | | data | Array&lt;number&gt; | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。仅线形图支持。 | | gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。仅线形图支持。 |
**表4** ChartAxis **表3** ChartAxis
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 轴的最小值。<br/>不支持负数。仅线形图支持。 | | min | number | 0 | 否 | 轴的最小值。<br/>不支持负数。仅线形图支持。 |
| max | number | 100 | 否 | 轴的最大值。<br/>不支持负数。仅线形图支持。 | | max | number | 100 | 否 | 轴的最大值。<br/>不支持负数。仅线形图支持。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>**说明：**<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。<br/>因轻量级智能穿戴为整型运行，在除不尽的情况下会有误差产生，具体的表现形式是x轴末尾可能会空出一段。<br/>在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | | axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>**说明：**<br/>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。<br/>因轻量级智能穿戴为整型运行，在除不尽的情况下会有误差产生，具体的表现形式是x轴末尾可能会空出一段。<br/>在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 | | display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 | | color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
**表5** ChartSeries **表4** ChartSeries
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | ----------- | -------------- | ---- | -------------------- |
| lineStyle | ChartLineStyle | 否 | 线样式设置，如线宽、是否平滑。 | | lineStyle | ChartLineStyle | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | PointStyle | 否 | 线最前端位置白点的样式和大小。 | | headPoint | PointStyle | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | PointStyle | 否 | 最高点的样式和大小。 | | topPoint | PointStyle | 否 | 最高点的样式和大小。 |
| bottomPoint | PointStyle | 否 | 最低点的样式和大小。 | | bottomPoint | PointStyle | 否 | 最低点的样式和大小。 |
| loop | ChartLoop | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | | loop | ChartLoop | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 |
**表6** ChartLineStyle **表5** ChartLineStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ----- | ---- | ----- |
| width | &lt;length&gt; | 1px | 否 | 线宽设置。 | | width | &lt;length&gt; | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 | | smooth | boolean | false | 否 | 是否平滑。 |
**表7** PointStyle **表6** PointStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------- | -------- | ---- | ---------------------------------- |
| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。 | | shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。 |
| size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 | | size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 |
| strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 | | strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 |
| strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 | | strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 |
| fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 | | fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 |
| display | boolean | true | 否 | 是否高亮显示。 | | display | boolean | true | 否 | 是否高亮显示。 |
**表8** ChartLoop **表7** ChartLoop
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ---- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | | margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
## 方法 ## 方法
| 方法 | 参数 | 描述 | | 方法 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| append | {<br/>serial:&nbsp;number,&nbsp;//&nbsp;设置要更新的线形图数据下标<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;//&nbsp;设置新增的数据<br/>} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 | | append | {<br/>serial:&nbsp;number,&nbsp;//&nbsp;设置要更新的线形图数据下标<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;//&nbsp;设置新增的数据<br/>} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 |
## 事件 ## 事件
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | ----------- |
| click | - | 点击动作触发该事件。 | | click | - | 点击动作触发该事件。 |
| longpress | - | 长按动作触发该事件。 | | longpress | - | 长按动作触发该事件。 |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 |
## 样式 ## 样式
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 | | width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 | | height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 |
| padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | | padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 | | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 |
| margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 | | margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | | margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 |
| border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | | border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 |
| border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 | | border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 |
| border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | | border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 | | background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
| [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
## 示例 ## 示例
1. 线形图 1. 线形图
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
![lite_line](figures/lite_line.PNG) ![lite_line](figures/lite_line.PNG)
2. 柱状图 2. 柱状图
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
......
zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
浏览文件 @ e9a960fa
...@@ -14,68 +14,68 @@ ...@@ -14,68 +14,68 @@
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------------- | -------------------------- | -------- | ---- | ---------------------------------------- |
| images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。<br/>**说明：**<br/>使用时需要使用数据绑定的方式，如images&nbsp;=&nbsp;{{images}}，js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png"},&nbsp;{src:&nbsp;"/common/heart-rate02.png"}]。 | | images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。<br/>**说明：**<br/>使用时需要使用数据绑定的方式，如images&nbsp;=&nbsp;{{images}}，js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png"},&nbsp;{src:&nbsp;"/common/heart-rate02.png"}]。 |
| iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | | iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 | | reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 | | fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效。 | | duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效。 |
| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | | fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 | | style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 | | class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 | | ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
**表2** ImageFrame说明 **表1** ImageFrame说明
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ---- | ---- | ---------------- |
| src | &lt;uri&gt; | - | 是 | 图片路径。 | | src | &lt;uri&gt; | - | 是 | 图片路径。 |
| width | &lt;length&gt; | 0 | 否 | 图片宽度。 | | width | &lt;length&gt; | 0 | 否 | 图片宽度。 |
| height | &lt;length&gt; | 0 | 否 | 图片高度。 | | height | &lt;length&gt; | 0 | 否 | 图片高度。 |
| top | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | | top | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的纵向坐标。 |
| left | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的横向坐标。 | | left | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的横向坐标。 |
## 事件 ## 事件
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | ----------- |
| stop | - | 帧动画结束时触发。 | | stop | - | 帧动画结束时触发。 |
| click | - | 点击动作触发该事件。 | | click | - | 点击动作触发该事件。 |
| longpress | - | 长按动作触发该事件。 | | longpress | - | 长按动作触发该事件。 |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 |
## 样式 ## 样式
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 | | width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 | | height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 |
| padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | | padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 | | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 |
| margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 | | margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | | margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 |
| border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | | border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 |
| border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 | | border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 |
| border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | | border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 | | background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
| [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
## 方法 ## 方法
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------- | ---- | ---------------------------------------- |
| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 | | start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 |
| pause | - | 暂停播放图片帧动画。 | | pause | - | 暂停播放图片帧动画。 |
| stop | - | 停止播放图片帧动画。 | | stop | - | 停止播放图片帧动画。 |
| resume | - | 继续播放图片帧。 | | resume | - | 继续播放图片帧。 |
| getState | - | 获取播放状态。可能值有：<br/>-&nbsp;playing：播放中<br/>-&nbsp;paused：已暂停<br/>-&nbsp;stopped：已停止。 | | getState | - | 获取播放状态。可能值有：<br/>-&nbsp;playing：播放中<br/>-&nbsp;paused：已暂停<br/>-&nbsp;stopped：已停止。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md
浏览文件 @ e9a960fa
...@@ -14,52 +14,52 @@ ...@@ -14,52 +14,52 @@
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 滑动选择器的最小值。 | | min | number | 0 | 否 | 滑动选择器的最小值。 |
| max | number | 100 | 否 | 滑动选择器的最大值。 | | max | number | 100 | 否 | 滑动选择器的最大值。 |
| value | number | 0 | 否 | 滑动选择器的初始值。 | | value | number | 0 | 否 | 滑动选择器的初始值。 |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 | | style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 | | class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 | | ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
## 事件 ## 事件
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | -------------- |
| change | ChangeEvent | 选择值发生变化时触发该事件。 | | change | ChangeEvent | 选择值发生变化时触发该事件。 |
| click | - | 点击动作触发该事件。 | | click | - | 点击动作触发该事件。 |
| longpress | - | 长按动作触发该事件。 | | longpress | - | 长按动作触发该事件。 |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 |
**表2** ChangeEvent **表1** ChangeEvent
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | ---------------------------------------- | ------ | ------------- |
| progress<sup>(deprecated<sup>5+</sup>)</sup> | string | 当前slider的进度值。 | | progress<sup>(deprecated<sup>5+</sup>)</sup> | string | 当前slider的进度值。 |
| value<sup>5+</sup> | number | 当前slider的进度值。 | | value<sup>5+</sup> | number | 当前slider的进度值。 |
## 样式 ## 样式
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#000000 | 否 | 滑动条的背景颜色。 | | color | &lt;color&gt; | \#000000 | 否 | 滑动条的背景颜色。 |
| selected-color | &lt;color&gt; | \#ffffff | 否 | 滑动条的已选择颜色。 | | selected-color | &lt;color&gt; | \#ffffff | 否 | 滑动条的已选择颜色。 |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 | | width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 | | height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 |
| padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | | padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 | | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 |
| margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 | | margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | | margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 |
| border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | | border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 |
| border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 | | border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 |
| border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | | border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 | | background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
| [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-js-lite/js-components-common-animation.md
浏览文件 @ e9a960fa
...@@ -4,43 +4,44 @@ ...@@ -4,43 +4,44 @@
组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。 组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------------------------- | ---------------------------------- | ----------- | ---------------------------------------- |
| transform | string | - | 详见表1。 | | transform | string | - | 详见表1。 |
| animation-name | string | - | 指定\@keyframes，详见表2。 | | animation-name | string | - | 指定\@keyframes，详见表2。 |
| animation-delay | &lt;time&gt; | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。 | | animation-delay | &lt;time&gt; | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。 |
| animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br/>**说明：**<br/>animation-duration&nbsp;样式必须设置，否则时长为&nbsp;0，则不会播放动画。 | | animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br/>**说明：**<br/>animation-duration&nbsp;样式必须设置，否则时长为&nbsp;0，则不会播放动画。 |
| animation-iteration-count | number&nbsp;&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 | | animation-iteration-count | number&nbsp;&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 |
| animation-timing-function | string | <br/>linear | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>-&nbsp;linear：表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease-in：表示动画以低速开始，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out：表示动画以低速结束，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 | | animation-timing-function | string | <br/>linear | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>-&nbsp;linear：表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease-in：表示动画以低速开始，cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out：表示动画以低速结束，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| animation-fill-mode | string | none | 指定动画开始和结束的状态：<br/>-&nbsp;none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 | | animation-fill-mode | string | none | 指定动画开始和结束的状态：<br/>-&nbsp;none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 |
**表1** transform操作说明 **表1** transform操作说明
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ---------- | ------------------------------------ | ---------- |
| translateX | &lt;length&gt; | X轴方向平移动画属性 | | translateX | &lt;length&gt; | X轴方向平移动画属性 |
| translateY | &lt;length&gt; | Y轴方向平移动画属性 | | translateY | &lt;length&gt; | Y轴方向平移动画属性 |
| rotate | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt; | 旋转动画属性 | | rotate | &lt;deg&gt;&nbsp;\|&nbsp;&lt;rad&gt; | 旋转动画属性 |
> **说明：** > **说明：**
> 轻量级智能穿戴仅支持原始大小的图片进行旋转。 >
> 轻量级智能穿戴仅支持原始大小的图片进行旋转。
**表2** \@keyframes属性说明 **表2** \@keyframes属性说明
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------- | -------------- | ---- | ------------------ |
| background-color | &lt;color&gt; | - | 动画执行后应用到组件上的背景颜色。 | | background-color | &lt;color&gt; | - | 动画执行后应用到组件上的背景颜色。 |
| width | &lt;length&gt; | - | 动画执行后应用到组件上的宽度值。 | | width | &lt;length&gt; | - | 动画执行后应用到组件上的宽度值。 |
| height | &lt;length&gt; | - | 动画执行后应用到组件上的高度值。 | | height | &lt;length&gt; | - | 动画执行后应用到组件上的高度值。 |
| transform | string | - | 定义应用在组件上的变换类型，见表1。 | | transform | string | - | 定义应用在组件上的变换类型，见表1。 |
对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例： 对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例：
``` ```css
@keyframes Go @keyframes Go
{ {
from { from {
...@@ -60,4 +61,5 @@ ...@@ -60,4 +61,5 @@
> **说明：** > **说明：**
> \@keyframes的from/to不支持动态绑定。 >
> \@keyframes的from/to不支持动态绑定。
zh-cn/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md
浏览文件 @ e9a960fa
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
**表1** 媒体逻辑操作符 **表1** 媒体逻辑操作符
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ------------------------------------------------------------ | | --------------- | ---------------------------------------- |
| and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;liteWearable)&nbsp;and&nbsp;(max-height:&nbsp;454)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。 | | and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;liteWearable)&nbsp;and&nbsp;(max-height:&nbsp;454)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。 |
| or<sup>9+</sup> | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;454) &nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。 | | or<sup>9+</sup> | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;454) &nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。 |
...@@ -55,18 +55,18 @@ ...@@ -55,18 +55,18 @@
## 媒体特征 ## 媒体特征
| 类型 | 说明 | | 类型 | 说明 |
| ---------------- | ------------------------------------------------------------ | | ---------------- | ---------------------------------------- |
| height | 应用页面显示区域的高度。 | | height | 应用页面显示区域的高度。 |
| min-height | 应用页面显示区域的最小高度。 | | min-height | 应用页面显示区域的最小高度。 |
| max-height | 应用页面显示区域的最大高度。 | | max-height | 应用页面显示区域的最大高度。 |
| width | 应用页面显示区域的宽度。 | | width | 应用页面显示区域的宽度。 |
| min-width | 应用页面显示区域的最小宽度。 | | min-width | 应用页面显示区域的最小宽度。 |
| max-width | 应用页面显示区域的最大宽度。 | | max-width | 应用页面显示区域的最大宽度。 |
| aspect-ratio | 应用页面显示区域的宽度与高度的比值。<br/>例如：aspect-ratio: 1/2 | | aspect-ratio | 应用页面显示区域的宽度与高度的比值。<br/>例如：aspect-ratio: 1/2 |
| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 | | min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 |
| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 | | max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 |
| round-screen | 屏幕类型，圆形屏幕为 true，&nbsp;非圆形屏幕为&nbsp;false。 | | round-screen | 屏幕类型，圆形屏幕为 true，&nbsp;非圆形屏幕为&nbsp;false。 |
## 通用媒体特征示例代码 ## 通用媒体特征示例代码
......
zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md
浏览文件 @ e9a960fa
...@@ -14,42 +14,43 @@ ...@@ -14,42 +14,43 @@
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 | | style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 | | class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 | | ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
## 事件 ## 事件
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------ | --------------------------------- | ----------- |
| click | - | 点击动作触发该事件。 | | click | - | 点击动作触发该事件。 |
| longpress | - | 长按动作触发该事件。 | | longpress | - | 长按动作触发该事件。 |
| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 |
## 样式 ## 样式
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 | | width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的宽度。<br/><br/>未设置时组件宽度默认为0。 |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 | | height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | - | 否 | 设置组件自身的高度。<br/><br/>未设置时组件高度默认为0。 |
| padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | | padding | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/>&nbsp;&nbsp;该属性可以有1到4个值：<br/>-&nbsp;指定一个值时，该值指定四个边的内边距。<br/>-&nbsp;指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>-&nbsp;指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>-&nbsp;指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 | | padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 设置左、上、右、下内边距属性。 |
| margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 | | margin | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>-&nbsp;只有一个值时，这个值会被指定给全部的四个边。<br/>-&nbsp;两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>-&nbsp;三个值时，第一个值被匹配给上,&nbsp;第二个值被匹配给左和右，第三个值被匹配给下。<br/>-&nbsp;四个值时，会依次按上、右、下、左的顺序匹配&nbsp;(即顺时针顺序)。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | | margin-[left\|top\|right\|bottom] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 |
| border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | | border-width | &lt;length&gt; | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 |
| border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 | | border-color | &lt;color&gt; | black | 否 | 使用简写属性设置元素的所有边框颜色。 |
| border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | | border-radius | &lt;length&gt; | - | 否 | border-radius属性是设置元素的外边框圆角半径。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 | | background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
| [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
>
> 由于绝对定位不支持设置百分比，所以也不支持stack组件的子组件上设置margin。 > 由于绝对定位不支持设置百分比，所以也不支持stack组件的子组件上设置margin。
......
zh-cn/application-dev/reference/arkui-js-lite/js-framework-file.md
浏览文件 @ e9a960fa
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下： JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下：
**图2** 目录结构   **图1** 目录结构  
![zh-cn_image_0000001431388581](figures/zh-cn_image_0000001431388581.png) ![zh-cn_image_0000001431388581](figures/zh-cn_image_0000001431388581.png)
...@@ -28,8 +28,8 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -28,8 +28,8 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如
> >
> - i18n是开发保留文件夹，不可重命名。 > - i18n是开发保留文件夹，不可重命名。
> >
> >
>- 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 > - 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。
## 文件访问规则 ## 文件访问规则
...@@ -45,29 +45,30 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -45,29 +45,30 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如
- CSS样式文件中通过url()函数创建&lt;url&gt;数据类型，如：url(/common/xxx.png)。 - CSS样式文件中通过url()函数创建&lt;url&gt;数据类型，如：url(/common/xxx.png)。
> **说明：** > **说明：**
> 当代码文件A需要引用代码文件B时： >
> > 当代码文件A需要引用代码文件B时：
> - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 >
> > - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
> - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 >
> > - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。
> >
>
## 媒体文件格式 ## 媒体文件格式
**表1** 支持的图片格式 **表1** 支持的图片格式
| 格式 | 支持版本 | 支持的文件类型 | | 格式 | 支持版本 | 支持的文件类型 |
| -------- | -------- | -------- | | ---- | ------------------------ | ------- |
| BMP | API&nbsp;Version&nbsp;4+ | .bmp | | BMP | API&nbsp;Version&nbsp;4+ | .bmp |
| JPEG | API&nbsp;Version&nbsp;4+ | .jpg | | JPEG | API&nbsp;Version&nbsp;4+ | .jpg |
| PNG | API&nbsp;Version&nbsp;4+ | .png | | PNG | API&nbsp;Version&nbsp;4+ | .png |
## 存储目录定义 ## 存储目录定义
从API Version 5开始，[image](js-components-basic-image.md)组件支持应用私有目录内的图片资源访问。 从API Version 5开始，[image](js-components-basic-image.md)组件支持应用私有目录内的图片资源访问。
| 目录类型 | 路径前缀 | 访问可见性 | 说明 | | 目录类型 | 路径前缀 | 访问可见性 | 说明 |
| ------------ | --------------- | ------------ | --------------------------------------------------- | | ------ | --------------- | ------ | --------------------------- |
| 应用私有目录 | internal://app/ | 仅本应用可见 | 目录随应用卸载删除，路径禁止使用../等方式访问父目录 | | 应用私有目录 | internal://app/ | 仅本应用可见 | 目录随应用卸载删除，路径禁止使用../等方式访问父目录 |
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-file.md
浏览文件 @ e9a960fa
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
``` ```js
// app.js // app.js
export default { export default {
onCreate() { onCreate() {
...@@ -28,11 +28,13 @@ export default { ...@@ -28,11 +28,13 @@ export default {
## 应用对象<sup>10+</sup> ## 应用对象<sup>10+</sup>
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ------ | -------- | ------------------------------------------------------------ | | ------ | -------- | ---------------------------------------- |
| getApp | Function | 提供getApp()全局方法，可以在页面js文件中获取app.js中暴露的数据对象。 | | getApp | Function | 提供getApp()全局方法，可以在页面js文件中获取app.js中暴露的数据对象。 |
> **说明**：应用对象是全局数据，其在整个应用消亡之前都会一直占用JS内存。尽管应用对象可为不同页面共享数据提供便利，但因为小型设备本身内存比较小，也应谨慎使用。如果过度使用，则容易造成应用在进入复杂page页面时，内存不够而出现异常。 > **说明**：
>
> 应用对象是全局数据，其在整个应用消亡之前都会一直占用JS内存。尽管应用对象可为不同页面共享数据提供便利，但因为小型设备本身内存比较小，也应谨慎使用。如果过度使用，则容易造成应用在进入复杂page页面时，内存不够而出现异常。
示例如下： 示例如下：
...@@ -80,4 +82,6 @@ export default { ...@@ -80,4 +82,6 @@ export default {
} }
``` ```
> **说明**：为了应用可在不支持getApp的低版本上正常运行，代码中应进行兼容性处理，即在使用getApp前先判断其是否可用。 > **说明**：
\ No newline at end of file >
> 为了应用可在不支持getApp的低版本上正常运行，代码中应进行兼容性处理，即在使用getApp前先判断其是否可用。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-tag.md
浏览文件 @ e9a960fa
...@@ -4,14 +4,15 @@ ...@@ -4,14 +4,15 @@
js标签中包含了实例名称、页面路由信息。 js标签中包含了实例名称、页面路由信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 | | 标签 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ------- | ---- | ----------------------------- |
| name | string | default | 是 | 标识JS实例的名字。 | | name | string | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 | | pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 |
> **说明：** > **说明：**
> name、pages标签配置需在配置文件中的“js”标签中完成设置。 >
> name、pages标签配置需在配置文件中的“js”标签中完成设置。
## pages ## pages
...@@ -33,10 +34,10 @@ js标签中包含了实例名称、页面路由信息。 ...@@ -33,10 +34,10 @@ js标签中包含了实例名称、页面路由信息。
> **说明：** > **说明：**
> >
> >
> - 应用首页固定为"pages/index/index"。 > - 应用首页固定为"pages/index/index"。
> >
> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 > - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md
浏览文件 @ e9a960fa
...@@ -14,16 +14,16 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -14,16 +14,16 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。
1. 内部样式，支持使用style、class属性来控制组件的样式。例如： 1. 内部样式，支持使用style、class属性来控制组件的样式。例如：
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<text style="color: red">Hello World</text> <text style="color: red">Hello World</text>
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container { .container {
justify-content: center; justify-content: center;
...@@ -31,16 +31,16 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -31,16 +31,16 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
``` ```
2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入： 2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入：
``` ```css
/* style.css */ /* style.css */
.title { .title {
font-size: 50px; font-size: 50px;
} }
``` ```
``` ```css
/* index.css */ /* index.css */
@import '../../common/style.css'; @import '../../common/style.css';
.container { .container {
...@@ -53,16 +53,16 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -53,16 +53,16 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：
| 选择器 | 样例 | 样例描述 | | 选择器 | 样例 | 样例描述 |
| -------- | -------- | -------- | | ------ | --------------------- | ------------------------------------- |
| .class | .container | 用于选择class="container"的组件。 | | .class | .container | 用于选择class="container"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 | | \#id | \#titleId | 用于选择id="titleId"的组件。 |
| , | .title,&nbsp;.content | 用于选择class="title"和class="content"的组件。 | | , | .title,&nbsp;.content | 用于选择class="title"和class="content"的组件。 |
示例： 示例：
``` ```html
<!-- 页面布局xxx.hml --> <!-- 页面布局xxx.hml -->
<div id="containerId" class="container"> <div id="containerId" class="container">
<text id="titleId" class="title">标题</text> <text id="titleId" class="title">标题</text>
...@@ -73,7 +73,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下 ...@@ -73,7 +73,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下
``` ```
``` ```css
/* 页面样式xxx.css */ /* 页面样式xxx.css */
/* 对class="title"的组件设置样式 */ /* 对class="title"的组件设置样式 */
.title { .title {
...@@ -97,15 +97,15 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -97,15 +97,15 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
| 名称 | 支持组件 | 描述 | | 名称 | 支持组件 | 描述 |
| -------- | -------- | -------- | | -------- | ----------------------------------- | ---------------------------------------- |
| :active | <br/>input[type="button"] | 表示被用户激活的元素，如：被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color&nbsp;和background-image&nbsp;的样式设置。 | | :active | <br/>input[type="button"] | 表示被用户激活的元素，如：被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color&nbsp;和background-image&nbsp;的样式设置。 |
| :checked | input[type="checkbox"、type="radio"] | 表示checked属性为true的元素。轻量级智能穿戴上伪类选择器上仅支持background-color&nbsp;和background-image&nbsp;的样式设置。 | | :checked | input[type="checkbox"、type="radio"] | 表示checked属性为true的元素。轻量级智能穿戴上伪类选择器上仅支持background-color&nbsp;和background-image&nbsp;的样式设置。 |
伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式： 伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式：
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<input type="button" class="button" value="Button"></input> <input type="button" class="button" value="Button"></input>
...@@ -113,7 +113,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -113,7 +113,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
``` ```
``` ```css
/* index.css */ /* index.css */
.button:active { .button:active {
background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */ background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
...@@ -126,8 +126,8 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -126,8 +126,8 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。 预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。
- 当前文件使用样式预编译，例如将原index.css改为index.less： - 当前文件使用样式预编译，例如将原index.css改为index.less：
``` ```css
/* index.less */ /* index.less */
/* 定义变量 */ /* 定义变量 */
@colorBackground: #000000; @colorBackground: #000000;
...@@ -137,8 +137,8 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -137,8 +137,8 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
``` ```
- 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss： - 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss：
``` ```css
/* style.scss */ /* style.scss */
/* 定义变量 */ /* 定义变量 */
$colorBackground: #000000; $colorBackground: #000000;
...@@ -146,8 +146,8 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -146,8 +146,8 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
在index.scss中引用： 在index.scss中引用：
``` ```css
/* index.scss */ /* index.scss */
/* 引入外部scss文件 */ /* 引入外部scss文件 */
@import '../../common/style.scss'; @import '../../common/style.scss';
...@@ -156,6 +156,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -156,6 +156,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
} }
``` ```
> **说明：** > **说明：**
> 引用的预编译文件建议放在common目录进行管理。 >
> 引用的预编译文件建议放在common目录进行管理。
zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md
浏览文件 @ e9a960fa
...@@ -7,7 +7,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -7,7 +7,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
## 页面结构 ## 页面结构
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="item-container"> <div class="item-container">
<text class="item-title">Image Show</text> <text class="item-title">Image Show</text>
...@@ -21,7 +21,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -21,7 +21,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
## 数据绑定 ## 数据绑定
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div onclick="changeText"> <div onclick="changeText">
<text> {{content[1]}} </text> <text> {{content[1]}} </text>
...@@ -29,7 +29,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -29,7 +29,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -42,9 +42,9 @@ export default { ...@@ -42,9 +42,9 @@ export default {
``` ```
> **说明：** > **说明：**
> - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 > - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。
> >
> - hml中的js表达式不支持ES6语法。 > - hml中的js表达式不支持ES6语法。
## 事件绑定 ## 事件绑定
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
事件绑定的回调函数接收一个事件对象参数，可以通过访问该事件对象获取事件信息。 事件绑定的回调函数接收一个事件对象参数，可以通过访问该事件对象获取事件信息。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<!-- 通过'@'绑定事件 --> <!-- 通过'@'绑定事件 -->
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -88,11 +88,11 @@ export default { ...@@ -88,11 +88,11 @@ export default {
> **说明：** > **说明：**
> >
> 事件冒泡机制从API Version 5开始支持。升级SDK后，运行存量JS应用，采用旧写法（onclick）的事件绑定还是按事件不冒泡进行处理。但如果使用新版本SDK重新打包JS应用，将旧写法按事件冒泡进行处理。为了避免业务逻辑错误，建议将旧写法（如onclick）改成新写法（grab:click）。 > 事件冒泡机制从API Version 5开始支持。升级SDK后，运行存量JS应用，采用旧写法（onclick）的事件绑定还是按事件不冒泡进行处理。但如果使用新版本SDK重新打包JS应用，将旧写法按事件冒泡进行处理。为了避免业务逻辑错误，建议将旧写法（如onclick）改成新写法（grab:click）。
**示例：** **示例：**
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title">{{count}}</text> <text class="title">{{count}}</text>
...@@ -108,8 +108,8 @@ export default { ...@@ -108,8 +108,8 @@ export default {
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
count: 0 count: 0
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -164,7 +164,7 @@ export default { ...@@ -164,7 +164,7 @@ export default {
## 列表渲染 ## 列表渲染
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="array-container"> <div class="array-container">
<!-- div列表渲染 --> <!-- div列表渲染 -->
...@@ -184,7 +184,7 @@ export default { ...@@ -184,7 +184,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -211,11 +211,12 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -211,11 +211,12 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 - for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
>
> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 > - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。
> >
> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 > - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。
> >
> - tid不支持表达式。 > - tid不支持表达式。
...@@ -224,7 +225,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -224,7 +225,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： 条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button> <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
...@@ -236,8 +237,8 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -236,8 +237,8 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
``` ```
``` ```css
// xxx.css /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -250,7 +251,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -250,7 +251,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -269,7 +270,7 @@ export default { ...@@ -269,7 +270,7 @@ export default {
优化渲染优化：show方法。当show为真时，节点正常渲染；当为假时，仅仅设置display样式为none。 优化渲染优化：show方法。当show为真时，节点正常渲染；当为假时，仅仅设置display样式为none。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="btn" type="capsule" value="toggle" onclick="toggle"></button> <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
...@@ -278,8 +279,8 @@ export default { ...@@ -278,8 +279,8 @@ export default {
``` ```
``` ```css
// xxx.css /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -292,7 +293,7 @@ export default { ...@@ -292,7 +293,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -305,4 +306,5 @@ export default { ...@@ -305,4 +306,5 @@ export default {
``` ```
> **说明：** > **说明：**
> 禁止在同一个元素上同时设置for和if属性。 >
> 禁止在同一个元素上同时设置for和if属性。
zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
浏览文件 @ e9a960fa
...@@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 模块声明 - 模块声明
使用import方法引入功能模块： 使用import方法引入功能模块：
``` ```
import router from '@system.router'; import router from '@system.router';
``` ```
...@@ -39,7 +39,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -39,7 +39,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 代码引用 - 代码引用
使用import方法导入js代码： 使用import方法导入js代码：
``` ```
import utils from '../../common/utils.js'; import utils from '../../common/utils.js';
``` ```
...@@ -48,25 +48,25 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -48,25 +48,25 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 对象 ## 对象
- 页面对象 - 页面对象
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ----- | --------------- | ---------------------------------------- |
| data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/> | | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/> |
| $refs | Object | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 | | $refs | Object | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
## 获取DOM元素 ## 获取DOM元素
1. 通过$refs获取DOM元素 1. 通过$refs获取DOM元素
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div> </div>
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -94,29 +94,29 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -94,29 +94,29 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 生命周期接口 ## 生命周期接口
- 页面生命周期 - 页面生命周期
| 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 | | 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 |
| -------- | -------- | -------- | -------- | -------- | -------- | | --------- | -------- | ---- | ---- | ------ | ------------------- |
| onInit | Function | 无 | 无 | 页面初始化 | 页面数据初始化完成时触发，只触发一次。 | | onInit | Function | 无 | 无 | 页面初始化 | 页面数据初始化完成时触发，只触发一次。 |
| onReady | Function | 无 | 无 | 页面创建完成 | 页面创建完成时触发，只触发一次。 | | onReady | Function | 无 | 无 | 页面创建完成 | 页面创建完成时触发，只触发一次。 |
| onShow | Function | 无 | 无 | 页面显示 | 页面显示时触发。 | | onShow | Function | 无 | 无 | 页面显示 | 页面显示时触发。 |
| onHide | Function | 无 | 无 | 页面消失 | 页面消失时触发。 | | onHide | Function | 无 | 无 | 页面消失 | 页面消失时触发。 |
| onDestroy | Function | 无 | 无 | 页面销毁 | 页面销毁时触发。 | | onDestroy | Function | 无 | 无 | 页面销毁 | 页面销毁时触发。 |
页面A的生命周期接口的调用顺序： 页面A的生命周期接口的调用顺序：
- 打开页面A：onInit() -&gt; onReady() -&gt; onShow() - 打开页面A：onInit() -&gt; onReady() -&gt; onShow()
- 在页面A打开页面B：onHide() -&gt; onDestroy() - 在页面A打开页面B：onHide() -&gt; onDestroy()
- 从页面B返回页面A：onInit() -&gt; onReady() -&gt; onShow() - 从页面B返回页面A：onInit() -&gt; onReady() -&gt; onShow()
- 退出页面A：onHide() -&gt; onDestroy() - 退出页面A：onHide() -&gt; onDestroy()
- 页面隐藏到后台运行：onHide() - 页面隐藏到后台运行：onHide()
- 页面从后台运行恢复到前台：onShow() - 页面从后台运行恢复到前台：onShow()
- 应用生命周期 - 应用生命周期
| 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 | | 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 |
| -------- | -------- | -------- | -------- | -------- | -------- | | --------- | -------- | ---- | ---- | ---- | --------- |
| onCreate | Function | 无 | 无 | 应用创建 | 当应用创建时调用。 | | onCreate | Function | 无 | 无 | 应用创建 | 当应用创建时调用。 |
| onDestroy | Function | 无 | 无 | 应用退出 | 当应用退出时触发。 | | onDestroy | Function | 无 | 无 | 应用退出 | 当应用退出时触发。 |
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ e9a960fa
# CanvasRenderingContext2D对象 # CanvasRenderingContext2D对象
> **说明：** > **说明：**
>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。
...@@ -862,10 +863,10 @@ moveTo(x: number, y: number): void ...@@ -862,10 +863,10 @@ moveTo(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------- | | ---- | ------ | ------------------ |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。<br>单位：vp |
| y | number | 指定位置的y坐标。 | | y | number | 指定位置的y坐标。<br>单位：vp |
**示例：** **示例：**
```html ```html
...@@ -901,8 +902,8 @@ lineTo(x: number, y: number): void ...@@ -901,8 +902,8 @@ lineTo(x: number, y: number): void
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。<br>单位：vp |
| y | number | 指定位置的y坐标。 | | y | number | 指定位置的y坐标。<br>单位：vp |
**示例：** **示例：**
```html ```html
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ e9a960fa
...@@ -28,7 +28,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ...@@ -28,7 +28,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ---------------------------------------- | ---- | ------- | | ---------- | ---------------------------------------- | ---- | ------- |
| src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 | | src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 |
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始，WebController不在维护，建议使用WebviewController替代。 | | controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
**示例：** **示例：**
...@@ -241,7 +241,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr ...@@ -241,7 +241,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 | | object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 | | name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | | methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不在维护，建议使用WebviewController替代。 | | controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController再维护，建议使用WebviewController替代。 |
**示例：** **示例：**
...@@ -2158,7 +2158,7 @@ onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void) ...@@ -2158,7 +2158,7 @@ onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)
onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)
当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。
从API version 10开始不在维护，建议使用[onLoadIntercept<sup>10+</sup>](#onloadintercept10)代替。 从API version 10开始再维护，建议使用[onLoadIntercept<sup>10+</sup>](#onloadintercept10)代替。
**参数：** **参数：**
...@@ -4988,7 +4988,7 @@ clearHistory(): void ...@@ -4988,7 +4988,7 @@ clearHistory(): void
setCookie(url: string, value: string): boolean setCookie(url: string, value: string): boolean
设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 设置cookie，该方法为同步方法。设置成功返回true，否则返回false。
从API version 9开始不在维护，建议使用[setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie)代替。 从API version 9开始不再维护，建议使用[setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie)代替。
**参数：** **参数：**
...@@ -5028,7 +5028,7 @@ setCookie(url: string, value: string): boolean ...@@ -5028,7 +5028,7 @@ setCookie(url: string, value: string): boolean
saveCookie(): boolean saveCookie(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
从API version 9开始不在维护，建议使用[saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync)代替。 从API version 9开始不再维护，建议使用[saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync)代替。
**返回值：** **返回值：**
......
zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md
浏览文件 @ e9a960fa
...@@ -43,7 +43,7 @@ onPageHide?(): void ...@@ -43,7 +43,7 @@ onPageHide?(): void
onBackPress?(): void onBackPress?(): void
当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。 当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。
```ts ```ts
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
浏览文件 @ e9a960fa
...@@ -33,54 +33,55 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -33,54 +33,55 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
支持以下四种方式：\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)，需要指定至少两种颜色。 支持以下四种方式：\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)，需要指定至少两种颜色。
- 参数 **参数：**
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
| direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向，如：to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;，或者to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 | | direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向，如：to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;，或者to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 |
| angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 | | angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 |
| color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | | color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 |
- 示例 **示例：**
1. 默认渐变方向为从上向下渐变。 1. 默认渐变方向为从上向下渐变。
```css ```css
#gradient { #gradient {
height: 300px; height: 300px;
width: 600px; width: 600px;
/* 从顶部开始向底部由红色向绿色渐变 */ /* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00); background: linear-gradient(red, #00ff00);
} }
``` ```
![111](figures/111.PNG) ![111](figures/111.PNG)
2. 45度夹角渐变。 2. 45度夹角渐变。
```css
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
```css ![222](figures/222.PNG)
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
![222](figures/222.PNG) 3. 设置方向从左向右渐变。
3. 设置方向从左向右渐变。 ```css
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
```css ![333](figures/333.PNG)
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
4. 重复渐变。
![333](figures/333.PNG) ```css
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
```
![444](figures/444.PNG)
4. 重复渐变。
```css
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
```
![444](figures/444.PNG)
zh-cn/application-dev/ui/arkts-common-components-xcomponent.md
浏览文件 @ e9a960fa
...@@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void) ...@@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void)
### 解析XComponent组件的NativeXComponent实例 ### 解析XComponent组件的NativeXComponent实例
NativeXComponent为XComponent提供了在native层的实例，可作为js层和native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。具体NKD接口可参考[Native XComponent](../reference/native-apis/_o_h___native_x_component.md)。 NativeXComponent为XComponent提供了在native层的实例，可作为js层和native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。具体NDK接口可参考[Native XComponent](../reference/native-apis/_o_h___native_x_component.md)。
可以在模块被加载时的回调内（即[Napi模块注册](#napi模块注册)中的Init函数）解析获得NativeXComponent实例 可以在模块被加载时的回调内（即[Napi模块注册](#napi模块注册)中的Init函数）解析获得NativeXComponent实例
......
zh-cn/application-dev/website.md
浏览文件 @ e9a960fa
...@@ -31,16 +31,41 @@ ...@@ -31,16 +31,41 @@
- [module对象内部结构](quick-start/module-structure.md) - [module对象内部结构](quick-start/module-structure.md)
- [资源分类与访问](quick-start/resource-categories-and-access.md) - [资源分类与访问](quick-start/resource-categories-and-access.md)
- 学习ArkTS语言 - 学习ArkTS语言
- [初识ArkTS语言](quick-start/arkts-get-started.md) - [初识ArkTS语言](quick-start/arkts-get-started.md)
- ArkTS语法（声明式UI） - 基本语法
- [基本UI描述](quick-start/arkts-basic-ui-description.md) - [基本语法概述](quick-start/arkts-basic-syntax-overview.md)
- [声明式UI描述](quick-start/arkts-declarative-ui-description.md)
- 自定义组件
- [创建自定义组件](quick-start/arkts-create-custom-components.md)
- [页面和自定义组件生命周期](quick-start/arkts-page-custom-components-lifecycle.md)
- [\@Builder：自定义构建函数](quick-start/arkts-builder.md)
- [\@BuilderParam：引用\@Builder函数](quick-start/arkts-builderparam.md)
- [\@Styles：定义组件重用样式](quick-start/arkts-style.md)
- [\@Extend：定义扩展组件样式](quick-start/arkts-extend.md)
- [stateStyles：多态样式](quick-start/arkts-statestyles.md)
- 状态管理 - 状态管理
- [基本概念](quick-start/arkts-state-mgmt-concepts.md) - [状态管理概述](quick-start/arkts-state-management-overview.md)
- [页面级变量的状态管理](quick-start/arkts-state-mgmt-page-level.md) - 管理组件拥有的状态
- [应用级变量的状态管理](quick-start/arkts-state-mgmt-application-level.md) - [\@State：组件内状态](quick-start/arkts-state.md)
- [动态构建UI元素](quick-start/arkts-dynamic-ui-elememt-building.md) - [\@Prop：父子单向同步](quick-start/arkts-prop.md)
- [渲染控制](quick-start/arkts-rendering-control.md) - [\@Link：父子双向同步](quick-start/arkts-link.md)
- [使用限制与扩展](quick-start/arkts-restrictions-and-extensions.md) - [\@Provide和\@Consume：与后代组件双向同步](quick-start/arkts-provide-and-consume.md)
- [\@Observed和\@ObjectLink：嵌套类对象属性变化](quick-start/arkts-observed-and-objectlink.md)
- 管理应用拥有的状态
- [管理应用拥有的状态概述](quick-start/arkts-application-state-management-overview.md)
- [LocalStorage：页面级UI状态存储](quick-start/arkts-localstorage.md)
- [AppStorage：应用全局的UI状态存储](quick-start/arkts-appstorage.md)
- [PersistentStorage：持久化存储UI状态](quick-start/arkts-persiststorage.md)
- [Environment：设备环境查询](quick-start/arkts-environment.md)
- 其他状态管理
- [其他状态管理概述](quick-start/arkts-other-state-mgmt-functions-overview.md)
- [\@Watch：状态变量更改通知](quick-start/arkts-watch.md)
- [$$语法：内置组件双向同步](quick-start/arkts-two-way-sync.md)
- 渲染控制
- [渲染控制概述](quick-start/arkts-rendering-control-overview.md)
- [if/else：条件渲染](quick-start/arkts-rendering-control-ifelse.md)
- [ForEach：循环渲染](quick-start/arkts-rendering-control-foreach.md)
- [LazyForEach：数据懒加载](quick-start/arkts-rendering-control-lazyforeach.md)
- 开发 - 开发
- 应用模型 - 应用模型
- 应用模型概述 - 应用模型概述
...@@ -174,31 +199,63 @@ ...@@ -174,31 +199,63 @@
- UI开发 - UI开发
- [方舟开发框架（ArkUI）概述](ui/arkui-overview.md) - [方舟开发框架（ArkUI）概述](ui/arkui-overview.md)
- 基于ArkTS的声明式开发范式 - 基于ArkTS的声明式开发范式
- [概述](ui/ui-ts-overview.md) - [UI开发（ArkTS声明式开发范式）概述](ui/arkts-ui-development-overview.md)
- [声明式UI开发指导](ui/ui-ts-developing-intro.md) - 开发布局
- 声明式UI开发实例 - [布局概述](ui/arkts-layout-development-overview.md)
- [创建简单视图](ui/ui-ts-creating-simple-page.md) - 构建布局
- 构建完整实例 - [线性布局](ui/arkts-layout-development-linear.md)
- [构建食物数据模型](ui/ui-ts-building-data-model.md) - [层叠布局](ui/arkts-layout-development-stack-layout.md)
- [构建食物列表List布局](ui/ui-ts-building-category-list-layout.md) - [弹性布局](ui/arkts-layout-development-flex-layout.md)
- [构建食物分类Grid布局](ui/ui-ts-building-category-grid-layout.md) - [相对布局](ui/arkts-layout-development-relative-layout.md)
- [页面跳转与数据传递](ui/ui-ts-page-redirection-data-transmission.md) - [栅格布局](ui/arkts-layout-development-grid-layout.md)
- 添加闪屏动画 - [媒体查询](ui/arkts-layout-development-media-query.md)
- [绘制图像](ui/ui-ts-drawing-feature.md) - [创建列表](ui/arkts-layout-development-create-list.md)
- [添加动画效果](ui/ui-ts-animation-feature.md) - [创建网格](ui/arkts-layout-development-create-grid.md)
- [常用组件说明](ui/ui-ts-components-intro.md) - [创建轮播](ui/arkts-layout-development-create-looping.md)
- 常见布局开发指导 - [改善布局性能](ui/arkts-layout-development-performance-boost.md)
- 自适应布局 - 添加组件
- [线性布局](ui/ui-ts-layout-linear.md) - 添加常用组件
- [层叠布局](ui/ui-ts-layout-stack.md) - [按钮](ui/arkts-common-components-button.md)
- [弹性布局](ui/ui-ts-layout-flex.md) - [单选框](ui/arkts-common-components-radio-button.md)
- [网格布局](ui/ui-ts-layout-grid.md) - [切换按钮](ui/arkts-common-components-switch.md)
- 响应式布局 - [进度条](ui/arkts-common-components-progress-indicator.md)
- [栅格布局](ui/ui-ts-layout-grid-container-new.md) - [文本显示](ui/arkts-common-components-text-display.md)
- [媒体查询](ui/ui-ts-layout-mediaquery.md) - [文本输入](ui/arkts-common-components-text-input.md)
- [自定义组件的生命周期](ui/ui-ts-custom-component-lifecycle-callbacks.md) - [自定义弹窗](ui/arkts-common-components-custom-dialog.md)
- [Web组件开发指导](ui/ui-ts-components-web.md) - [视频播放](ui/arkts-common-components-video-player.md)
- [性能提升的推荐方法](ui/ui-ts-performance-improvement-recommendation.md) - [XComponent](ui/arkts-common-components-xcomponent.md)
- 添加气泡和菜单
- [气泡提示](ui/arkts-popup-and-menu-components-popup.md)
- [菜单](ui/arkts-popup-and-menu-components-menu.md)
- 设置页面路由和组件导航
- [页面路由](ui/arkts-routing.md)
- 组件导航
- [Navigation](ui/arkts-navigation-navigation.md)
- [Tabs](ui/arkts-navigation-tabs.md)
- 显示图形
- [显示图片](ui/arkts-graphics-display.md)
- [绘制几何图形](ui/arkts-geometric-shape-drawing.md)
- [使用画布绘制自定义图形](ui/arkts-drawing-customization-on-canvas.md)
- 使用动画
- [动画概述](ui/arkts-animation-overview.md)
- 页面内的动画
- [布局更新动画](ui/arkts-layout-update-animation.md)
- [组件内转场动画](ui/arkts-transition-animation-within-component.md)
- [弹簧曲线动画](ui/arkts-spring-animation.md)
- 页面间的动画
- [放大缩小视图](ui/arkts-zoom-animation.md)
- [页面转场动画](ui/arkts-page-transition-animation.md)
- 支持交互事件
- [交互事件概述](ui/arkts-event-overview.md)
- 使用通用事件
- [触屏事件](ui/arkts-common-events-touch-screen-event.md)
- [键鼠事件](ui/arkts-common-events-device-input-event.md)
- [焦点事件](ui/arkts-common-events-focus-event.md)
- 使用手势事件
- [绑定手势方法](ui/arkts-gesture-events-binding.md)
- [单一手势](ui/arkts-gesture-events-single-gesture.md)
- [组合手势](ui/arkts-gesture-events-combined-gestures.md)
- [性能提升的推荐方法](ui/arkts-performance-improvement-recommendation.md)
- 兼容JS的类Web开发范式 - 兼容JS的类Web开发范式
- [概述](ui/ui-js-overview.md) - [概述](ui/ui-js-overview.md)
- 框架说明 - 框架说明
...@@ -271,6 +328,22 @@ ...@@ -271,6 +328,22 @@
- [动画动效](ui/ui-js-animate-dynamic-effects.md) - [动画动效](ui/ui-js-animate-dynamic-effects.md)
- [动画帧](ui/ui-js-animate-frame.md) - [动画帧](ui/ui-js-animate-frame.md)
- [自定义组件](ui/ui-js-custom-components.md) - [自定义组件](ui/ui-js-custom-components.md)
- Web
- [Web组件概述](web/web-component-overview.md)
- [使用Web组件加载页面](web/web-page-loading-with-web-components.md)
- 设置基本属性和事件
- [设置深色模式](web/web-set-dark-mode.md)
- [上传文件](web/web-file-upload.md)
- [在新窗口中打开页面](web/web-open-in-new-window.md)
- [管理位置权限](web/web-geolocation-permission.md)
- 在应用中使用前端页面JavaScript
- [应用侧调用前端页面函数](web/web-in-app-frontend-page-function-invoking.md)
- [前端页面调用应用侧函数](web/web-in-page-app-function-invoking.md)
- [建立应用侧与前端页面数据通道](web/web-app-page-data-channel.md)
- [管理页面跳转及浏览记录导航](web/web-redirection-and-browsing-history-mgmt.md)
- [管理Cookie及数据存储](web/web-cookie-and-data-storage-mgmt.md)
- [自定义页面请求响应](web/web-resource-interception-request-mgmt.md)
- [使用Devtools工具调试前端页面](web/web-debugging-with-devtools.md)
- 通知 - 通知
- [通知概述](notification/notification-overview.md) - [通知概述](notification/notification-overview.md)
- [订阅通知（仅对系统应用开放）](notification/notification-subscription.md) - [订阅通知（仅对系统应用开放）](notification/notification-subscription.md)
...@@ -1465,4 +1538,4 @@ ...@@ -1465,4 +1538,4 @@
- [IDE使用常见问题](faqs/faqs-ide.md) - [IDE使用常见问题](faqs/faqs-ide.md)
- [hdc_std命令使用常见问题](faqs/faqs-hdc-std.md) - [hdc_std命令使用常见问题](faqs/faqs-hdc-std.md)
- [开发板使用常见问题](faqs/faqs-development-board.md) - [开发板使用常见问题](faqs/faqs-development-board.md)
<!--no_check--> <!--no_check-->
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或