Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 87721ce0 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 acea059c
显示空白变更内容
内联 并排
Showing with 1420 addition and 1360 deletion
zh-cn/application-dev/ui/js-framework-file.md
浏览文件 @ 87721ce0
...@@ -32,7 +32,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -32,7 +32,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如
- share目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 - share目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - i18n和resources是开发保留文件夹，不可重命名。 > - i18n和resources是开发保留文件夹，不可重命名。
> >
> >
...@@ -56,7 +56,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -56,7 +56,7 @@ 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)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 当代码文件A需要引用代码文件B时： > 当代码文件A需要引用代码文件B时：
> >
> - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 > - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
...@@ -72,7 +72,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -72,7 +72,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如
**表1** 支持的图片格式 **表1** 支持的图片格式
| 格式 | 支持的文件类型 | | 格式 | 支持的文件类型 |
| -------- | -------- | | ---- | ------- |
| BMP | .bmp | | BMP | .bmp |
| GIF | .gif | | GIF | .gif |
| JPEG | .jpg | | JPEG | .jpg |
...@@ -82,5 +82,5 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ...@@ -82,5 +82,5 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如
**表2** 支持的视频格式 **表2** 支持的视频格式
| 格式 | 支持的文件类型 | | 格式 | 支持的文件类型 |
| -------- | -------- | | ---------------------------------------- | ------------- |
| H.264&nbsp;AVC<br/>Baseline&nbsp;Profile&nbsp;(BP) | .3gp<br/>.mp4 | | H.264&nbsp;AVC<br/>Baseline&nbsp;Profile&nbsp;(BP) | .3gp<br/>.mp4 |
zh-cn/application-dev/ui/js-framework-js-file.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
## 应用生命周期 ## 应用生命周期
每个应用可以在app.js自定义应用级[生命周期](../ui/js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志： 每个应用可以在app.js自定义应用级[生命周期](../ui/js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志：
``` ```js
// app.js // app.js
export default { export default {
onCreate() { onCreate() {
...@@ -19,12 +19,12 @@ export default { ...@@ -19,12 +19,12 @@ export default {
## 应用对象<sup>6+</sup> ## 应用对象<sup>6+</sup>
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | -------- | ---------------------------------------- |
| getApp | Function | 提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。 | | getApp | Function | 提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。 |
示例如下： 示例如下：
``` ```js
// app.js // app.js
export default { export default {
data: { data: {
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
}; };
``` ```
``` ```js
// test.js 自定义逻辑代码 // test.js 自定义逻辑代码
export var appData = getApp().data; export var appData = getApp().data;
``` ```
zh-cn/application-dev/ui/js-framework-js-tag.md
浏览文件 @ 87721ce0
...@@ -4,13 +4,13 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 ...@@ -4,13 +4,13 @@ js标签中包含了实例名称、页面路由和窗口样式信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 | | 标签 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ------- | ---- | ------------------------------- |
| name | string | default | 是 | 标识JS实例的名字。 | | name | string | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 | | pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 |
| window | Object | - | 否 | 窗口信息，详见“**[window](#window)**”。 | | window | Object | - | 否 | 窗口信息，详见“**[window](#window)**”。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> name、pages和window等标签配置需在配置文件（config.json）中的“js”标签中完成设置。 > name、pages和window等标签配置需在配置文件（config.json）中的“js”标签中完成设置。
...@@ -18,7 +18,7 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 ...@@ -18,7 +18,7 @@ js标签中包含了实例名称、页面路由和窗口样式信息。
定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：
``` ```json
{ {
... ...
"pages": [ "pages": [
...@@ -29,7 +29,7 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 ...@@ -29,7 +29,7 @@ js标签中包含了实例名称、页面路由和窗口样式信息。
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - pages列表中第一个页面是应用的首页，即entry入口。 > - pages列表中第一个页面是应用的首页，即entry入口。
> >
...@@ -44,18 +44,18 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， ...@@ -44,18 +44,18 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题，
- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 - 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 1. 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。 > 1. 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。
> >
> 2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 > 2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
| 属性 | 类型 | 必填 | 缺省值 | 描述 | | 属性 | 类型 | 必填 | 缺省值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------- | ------- | ---- | -------- | ---------------------------------------- |
| designWidth | number | 否 | 720<br/> | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 | | designWidth | number | 否 | 720<br/> | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 | | autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
示例如下： 示例如下：
``` ```json
{ {
... ...
"window": { "window": {
...@@ -69,7 +69,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， ...@@ -69,7 +69,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题，
## 示例 ## 示例
``` ```json
{ {
"app": { "app": {
"bundleName": "com.example.player", "bundleName": "com.example.player",
......
zh-cn/application-dev/ui/js-framework-multiple-languages.md
浏览文件 @ 87721ce0
...@@ -29,7 +29,7 @@ language[-script-region].json ...@@ -29,7 +29,7 @@ language[-script-region].json
资源文件内容格式如下： 资源文件内容格式如下：
en-US.json en-US.json
``` ```json
{ {
"strings": { "strings": {
"hello": "Hello world!", "hello": "Hello world!",
...@@ -53,7 +53,7 @@ en-US.json ...@@ -53,7 +53,7 @@ en-US.json
en-US.json en-US.json
``` ```json
{ {
"strings": { "strings": {
"people": { "people": {
...@@ -67,7 +67,7 @@ en-US.json ...@@ -67,7 +67,7 @@ en-US.json
ar-AE.json ar-AE.json
``` ```json
{ {
"strings": { "strings": {
"people": { "people": {
...@@ -104,7 +104,7 @@ ar-AE.json ...@@ -104,7 +104,7 @@ ar-AE.json
| params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：<br/>- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：```$t('strings.object', {name:'Hello world'})```。 <br> - 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：```$t('strings.array', [Hello world']``` | | params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：<br/>- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：```$t('strings.object', {name:'Hello world'})```。 <br> - 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：```$t('strings.array', [Hello world']``` |
- 简单格式化示例代码 - 简单格式化示例代码
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<!-- 不使用占位符，text中显示“Hello world!” --> <!-- 不使用占位符，text中显示“Hello world!” -->
...@@ -127,7 +127,7 @@ ar-AE.json ...@@ -127,7 +127,7 @@ ar-AE.json
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
// 下面为在js文件中的使用方法。 // 下面为在js文件中的使用方法。
export default { export default {
...@@ -162,7 +162,7 @@ ar-AE.json ...@@ -162,7 +162,7 @@ ar-AE.json
| count | number | 是 | 要表达的值 | | count | number | 是 | 要表达的值 |
- 单复数格式化示例代码 - 单复数格式化示例代码
``` ```html
<!--xxx.hml--> <!--xxx.hml-->
<div> <div>
<!-- 传递数值为0时： "0 people" 阿拉伯语中此处匹配key为zero的词条--> <!-- 传递数值为0时： "0 people" 阿拉伯语中此处匹配key为zero的词条-->
......
zh-cn/application-dev/ui/js-framework-resource-restriction.md
浏览文件 @ 87721ce0
...@@ -88,5 +88,5 @@ resources/res-defaults.json: ...@@ -88,5 +88,5 @@ resources/res-defaults.json:
</div> </div>
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 资源限定文件中不支持颜色枚举格式。 > 资源限定文件中不支持颜色枚举格式。
zh-cn/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 87721ce0
...@@ -22,14 +22,14 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -22,14 +22,14 @@ 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;
...@@ -37,14 +37,14 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -37,14 +37,14 @@ 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 {
...@@ -58,7 +58,7 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ...@@ -58,7 +58,7 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：
| 选择器 | 样例 | 样例描述 | | 选择器 | 样例 | 样例描述 |
| -------- | -------- | -------- | | ------------------------- | ------------------------------------- | ---------------------------------------- |
| .class | .container | 用于选择class="container"的组件。 | | .class | .container | 用于选择class="container"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 | | \#id | \#titleId | 用于选择id="titleId"的组件。 |
| tag | text | 用于选择text组件。 | | tag | text | 用于选择text组件。 |
...@@ -67,7 +67,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下 ...@@ -67,7 +67,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下
示例： 示例：
``` ```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>
...@@ -77,7 +77,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下 ...@@ -77,7 +77,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下
</div> </div>
``` ```
``` ```css
/* 页面样式xxx.css */ /* 页面样式xxx.css */
/\* 对所有div组件设置样式 \*/ /\* 对所有div组件设置样式 \*/
div { div {
...@@ -125,7 +125,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -125,7 +125,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列： 除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列：
| 名称 | 支持组件 | 描述 | | 名称 | 支持组件 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 | | :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 |
| :active | 支持click事件的组件<br/> | 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 | | :active | 支持click事件的组件<br/> | 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 |
| :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 | | :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 |
...@@ -133,21 +133,21 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -133,21 +133,21 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
伪类示例如下，设置按钮的: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>
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.button:active { .button:active {
background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */ background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker > 针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker
...@@ -156,7 +156,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -156,7 +156,7 @@ 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：
``` ```less
/* index.less */ /* index.less */
/* 定义变量 */ /* 定义变量 */
@colorBackground: #000000; @colorBackground: #000000;
...@@ -166,7 +166,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -166,7 +166,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
``` ```
- 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss： - 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss：
``` ```scss
/* style.scss */ /* style.scss */
/* 定义变量 */ /* 定义变量 */
$colorBackground: #000000; $colorBackground: #000000;
...@@ -174,7 +174,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -174,7 +174,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
在index.scss中引用： 在index.scss中引用：
``` ```scss
/* index.scss */ /* index.scss */
/* 引入外部scss文件 */ /* 引入外部scss文件 */
@import '../../common/style.scss'; @import '../../common/style.scss';
...@@ -183,7 +183,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ...@@ -183,7 +183,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 引用的预编译文件建议放在common目录进行管理。 > 引用的预编译文件建议放在common目录进行管理。
## CSS样式继承<sup>6+</sup> ## CSS样式继承<sup>6+</sup>
......
zh-cn/application-dev/ui/js-framework-syntax-hml.md
浏览文件 @ 87721ce0
...@@ -5,7 +5,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -5,7 +5,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>
...@@ -18,19 +18,19 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ...@@ -18,19 +18,19 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
## 数据绑定 ## 数据绑定
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div onclick="changeText"> <div onclick="changeText">
<text> {{content[1]}} </text> <text> {{content[1]}} </text>
</div> </div>
``` ```
``` ```css
/*xxx.css*/ /*xxx.css*/
.container{ .container{
margin: 200px; margin: 200px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 > - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。
> >
> - hml文件中的js表达式不支持ES6语法。 > - hml文件中的js表达式不支持ES6语法。
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
- "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 - "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。
- 示例 - 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title">{{count}}</text> <text class="title">{{count}}</text>
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
}; };
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -135,11 +135,11 @@ export default { ...@@ -135,11 +135,11 @@ export default {
- 绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{event}.bubble。 - 绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{event}.bubble。
- 绑定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。 - 绑定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 详细冒泡事件说明参见[通用事件](../reference/arkui-js/js-components-common-events.md)章节。 > 详细冒泡事件说明参见[通用事件](../reference/arkui-js/js-components-common-events.md)章节。
- 示例 - 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<!-- 使用事件冒泡模式绑定事件回调函数。5+ -->; <!-- 使用事件冒泡模式绑定事件回调函数。5+ -->;
...@@ -157,7 +157,7 @@ export default { ...@@ -157,7 +157,7 @@ export default {
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
clickfunc: function(e) { clickfunc: function(e) {
...@@ -169,7 +169,7 @@ export default { ...@@ -169,7 +169,7 @@ export default {
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。 > 采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。
## 捕获事件绑定<sup>5+</sup> ## 捕获事件绑定<sup>5+</sup>
...@@ -183,7 +183,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ...@@ -183,7 +183,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
- 绑定并阻止事件向下传递：grab:{event}.capture。 - 绑定并阻止事件向下传递：grab:{event}.capture。
- 示例 - 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<!-- 使用事件捕获模式绑定事件回调函数。5+ --> <!-- 使用事件捕获模式绑定事件回调函数。5+ -->
...@@ -193,7 +193,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ...@@ -193,7 +193,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
touchstartfuc: function(e) { touchstartfuc: function(e) {
...@@ -205,7 +205,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ...@@ -205,7 +205,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
## 列表渲染 ## 列表渲染
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="array-container" style="flex-direction: column;margin: 200px;"> <div class="array-container" style="flex-direction: column;margin: 200px;">
<!-- div列表渲染 --> <!-- div列表渲染 -->
...@@ -225,7 +225,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ...@@ -225,7 +225,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -252,7 +252,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -252,7 +252,7 @@ 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字段，因为它们属于唯一字段。
...@@ -265,7 +265,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -265,7 +265,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>
...@@ -276,7 +276,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -276,7 +276,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -289,7 +289,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 ...@@ -289,7 +289,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -309,7 +309,7 @@ export default { ...@@ -309,7 +309,7 @@ export default {
优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。 优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置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>
...@@ -317,7 +317,7 @@ export default { ...@@ -317,7 +317,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -330,7 +330,7 @@ export default { ...@@ -330,7 +330,7 @@ export default {
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -342,7 +342,7 @@ export default { ...@@ -342,7 +342,7 @@ export default {
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 禁止在同一个元素上同时设置for和if属性。 > 禁止在同一个元素上同时设置for和if属性。
![zh-cn_image_0000001118642005](figures/zh-cn_image_0000001118642005.gif) ![zh-cn_image_0000001118642005](figures/zh-cn_image_0000001118642005.gif)
...@@ -351,7 +351,7 @@ export default { ...@@ -351,7 +351,7 @@ export default {
&lt;block&gt;控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。 &lt;block&gt;控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<list> <list>
<block for="glasses"> <block for="glasses">
...@@ -367,7 +367,7 @@ export default { ...@@ -367,7 +367,7 @@ export default {
</list> </list>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -385,7 +385,7 @@ export default { ...@@ -385,7 +385,7 @@ export default {
HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。 HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。
``` ```html
<!-- template.hml --> <!-- template.hml -->
<div class="item"> <div class="item">
<text>Name: {{name}}</text> <text>Name: {{name}}</text>
...@@ -393,7 +393,7 @@ HML可以通过element引用模板文件，详细介绍可参考[自定义组件 ...@@ -393,7 +393,7 @@ HML可以通过element引用模板文件，详细介绍可参考[自定义组件
</div> </div>
``` ```
``` ```html
<!-- index.hml --> <!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element> <element name='comp' src='../../common/template.hml'></element>
<div> <div>
......
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ 87721ce0
...@@ -10,14 +10,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -10,14 +10,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 模块声明 - 模块声明
使用import方法引入功能模块： 使用import方法引入功能模块：
``` ```js
import router from '@system.router'; import router from '@system.router';
``` ```
- 代码引用 - 代码引用
使用import方法导入js代码： 使用import方法导入js代码：
``` ```js
import utils from '../../common/utils.js'; import utils from '../../common/utils.js';
``` ```
...@@ -26,12 +26,12 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -26,12 +26,12 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 应用对象 - 应用对象
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ---- | ------ | ---------------------------------------- |
| $def | Object | 使用this.$app.$def获取在app.js中暴露的对象。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;应用对象不支持数据绑定，需主动触发UI更新。 | | $def | Object | 使用this.$app.$def获取在app.js中暴露的对象。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;应用对象不支持数据绑定，需主动触发UI更新。 |
示例代码 示例代码
``` ```js
// app.js // app.js
export default { export default {
onCreate() { onCreate() {
...@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
}; };
``` ```
``` ```js
// index.js页面逻辑代码 // index.js页面逻辑代码
export default { export default {
data: { data: {
...@@ -73,7 +73,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -73,7 +73,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 页面对象 - 页面对象
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | -------- | --------------- | ---------------------------------------- |
| data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。 | | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。 |
| $refs | Object | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 | | $refs | Object | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
| private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 | | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 |
...@@ -85,13 +85,13 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -85,13 +85,13 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 数据方法 - 数据方法
| 方法 | 参数 | 描述 | | 方法 | 参数 | 描述 |
| -------- | -------- | -------- | | ------- | -------------------------------------- | ---------------------------------------- |
| $set | key:&nbsp;string,&nbsp;value:&nbsp;any | 添加新的数据属性或者修改已有数据属性。<br/>用法：<br/>this.$set('key',value)：添加数据属性。 | | $set | key:&nbsp;string,&nbsp;value:&nbsp;any | 添加新的数据属性或者修改已有数据属性。<br/>用法：<br/>this.$set('key',value)：添加数据属性。 |
| $delete | key:&nbsp;string | 删除数据属性。<br/>用法：<br/>this.$delete('key')：删除数据属性。 | | $delete | key:&nbsp;string | 删除数据属性。<br/>用法：<br/>this.$delete('key')：删除数据属性。 |
示例代码 示例代码
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -112,7 +112,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -112,7 +112,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 公共方法 - 公共方法
| 方法 | 参数 | 描述 | | 方法 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------ | --------------- | ---------------------------------------- |
| $element | id:&nbsp;string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。<br/>用法：<br/>&lt;div&nbsp;id='xxx'&gt;&lt;/div&gt;<br/>-&nbsp;this.$element('xxx')：获得id为xxx的组件对象。<br/>-&nbsp;this.$element()：获得根组件对象。 | | $element | id:&nbsp;string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。<br/>用法：<br/>&lt;div&nbsp;id='xxx'&gt;&lt;/div&gt;<br/>-&nbsp;this.$element('xxx')：获得id为xxx的组件对象。<br/>-&nbsp;this.$element()：获得根组件对象。 |
| $rootElement | 无 | 获取根组件对象。<br/>用法：this.$rootElement().scrollTo({&nbsp;duration:&nbsp;500,&nbsp;position:&nbsp;300&nbsp;}),&nbsp;页面在500ms内滚动300px。 | | $rootElement | 无 | 获取根组件对象。<br/>用法：this.$rootElement().scrollTo({&nbsp;duration:&nbsp;500,&nbsp;position:&nbsp;300&nbsp;}),&nbsp;页面在500ms内滚动300px。 |
| $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | | $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
...@@ -121,18 +121,18 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -121,18 +121,18 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 事件方法 - 事件方法
| 方法 | 参数 | 描述 | | 方法 | 参数 | 描述 |
| -------- | -------- | -------- | | ---------------------------------------- | ---- | ---- |
| $watch | data:&nbsp;string,&nbsp;callback:&nbsp;string&nbsp;\|&nbsp;Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。<br/>用法：<br/>this.$watch('key',&nbsp;callback) | | $watch | data:&nbsp;string,&nbsp;callback:&nbsp;string&nbsp;\|&nbsp;Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。<br/>用法：<br/>this.$watch('key',&nbsp;callback) | | |
- 页面方法 - 页面方法
| 方法 | 参数 | 描述 | | 方法 | 参数 | 描述 |
| -------- | -------- | -------- | | --------------------- | -------------------------------- | ------------------------------- |
| scrollTo<sup>6+</sup> | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 | | scrollTo<sup>6+</sup> | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 |
**表1** ScrollPageParam<sup>6+</sup> **表1** ScrollPageParam<sup>6+</sup>
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | -------------- | ----------------------- | ---- | ---------------------------------------- |
| position | number | - | 指定滚动位置。 | | position | number | - | 指定滚动位置。 |
| id | string | - | 指定需要滚动到的元素id。 | | id | string | - | 指定需要滚动到的元素id。 |
| duration | number | 300 | 指定滚动时长，单位为毫秒。 | | duration | number | 300 | 指定滚动时长，单位为毫秒。 |
...@@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例： 示例：
``` ```js
this.$rootElement().scrollTo({position: 0}) this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
``` ```
...@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 获取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: {
...@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
``` ```
2. 通过$element获取DOM元素 2. 通过$element获取DOM元素
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;"> <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> <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div> </div>
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
根节点所在页面： 根节点所在页面：
``` ```html
<!-- root.hml --> <!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element> <element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container"> <div class="container">
...@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
</div> </div>
``` ```
``` ```js
// root.js // root.js
export default { export default {
data: { data: {
...@@ -243,7 +243,7 @@ export default { ...@@ -243,7 +243,7 @@ export default {
自定义parent组件： 自定义parent组件：
``` ```html
<!-- parent.hml --> <!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element> <element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked"> <div class="item" onclick="textClicked">
...@@ -253,7 +253,7 @@ export default { ...@@ -253,7 +253,7 @@ export default {
</div> </div>
``` ```
``` ```js
// parent.js // parent.js
export default { export default {
data: { data: {
...@@ -272,7 +272,7 @@ export default { ...@@ -272,7 +272,7 @@ export default {
自定义child组件： 自定义child组件：
``` ```html
<!-- child.hml --> <!-- child.hml -->
<div class="item" onclick="textClicked"> <div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">child component clicked</text> <text class="text-style" onclick="childClicked">child component clicked</text>
...@@ -280,7 +280,7 @@ export default { ...@@ -280,7 +280,7 @@ export default {
</div> </div>
``` ```
``` ```js
// child.js // child.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ts-application-states-apis-environment.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。Environment及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从Environment获取语音环境： Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。Environment及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从Environment获取语音环境：
``` ```ts
Environment.EnvProp("accessibilityEnabled", "default"); Environment.EnvProp("accessibilityEnabled", "default");
var enable = AppStorage.Get("accessibilityEnabled"); var enable = AppStorage.Get("accessibilityEnabled");
``` ```
...@@ -14,7 +14,7 @@ accessibilityEnabled是Environment提供默认系统变量识别符。首先需 ...@@ -14,7 +14,7 @@ accessibilityEnabled是Environment提供默认系统变量识别符。首先需
## Environment接口 ## Environment接口
| key | 参数 | 返回值 | 说明 | | key | 参数 | 返回值 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | ---------------------------------------- | ------- | ---------------------------------------- |
| EnvProp | key:&nbsp;string,<br/>defaultValue:&nbsp;any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 | | EnvProp | key:&nbsp;string,<br/>defaultValue:&nbsp;any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 |
| EnvProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联此系统项数组到AppStorage中。 | | EnvProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联此系统项数组到AppStorage中。 |
| Keys | Array&lt;string&gt; | number | 返回关联的系统项。 | | Keys | Array&lt;string&gt; | number | 返回关联的系统项。 |
...@@ -23,7 +23,7 @@ accessibilityEnabled是Environment提供默认系统变量识别符。首先需 ...@@ -23,7 +23,7 @@ accessibilityEnabled是Environment提供默认系统变量识别符。首先需
## Environment内置的环境变量 ## Environment内置的环境变量
| key | 类型 | 说明 | | key | 类型 | 说明 |
| -------- | -------- | -------- | | -------------------- | --------------- | ---------------------------------------- |
| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | | accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 |
| colorMode | ColorMode | 深浅色模式，可选值为：<br/>-&nbsp;ColorMode.LIGHT：浅色模式；<br/>-&nbsp;ColorMode.DARK：深色模式。 | | colorMode | ColorMode | 深浅色模式，可选值为：<br/>-&nbsp;ColorMode.LIGHT：浅色模式；<br/>-&nbsp;ColorMode.DARK：深色模式。 |
| fontScale | number | 字体大小比例，取值范围为[0.85,&nbsp;1.45]。 | | fontScale | number | 字体大小比例，取值范围为[0.85,&nbsp;1.45]。 |
......
zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md
浏览文件 @ 87721ce0
...@@ -4,20 +4,21 @@ ...@@ -4,20 +4,21 @@
| 方法 | 参数说明 | 返回值 | 定义 | | 方法 | 参数说明 | 返回值 | 定义 |
| -------- | -------- | -------- | -------- | | ------------ | ---------------------------------------- | ------------------- | ---------------------------------------- |
| PersistProp | key&nbsp;:&nbsp;string<br/>defaultValue:&nbsp;T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：<br/>-&nbsp;首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。<br/>-&nbsp;其次，Persistent中有此命名的属性，使用Persistent中的属性值。<br/>-&nbsp;最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 | | PersistProp | key&nbsp;:&nbsp;string<br/>defaultValue:&nbsp;T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：<br/>-&nbsp;首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。<br/>-&nbsp;其次，Persistent中有此命名的属性，使用Persistent中的属性值。<br/>-&nbsp;最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 |
| DeleteProp | key:&nbsp;string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 | | DeleteProp | key:&nbsp;string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 |
| PersistProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联多个命名的属性绑定。 | | PersistProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联多个命名的属性绑定。 |
| Keys | void | Array&lt;string&gt; | 返回所有持久化属性的标记。 | | Keys | void | Array&lt;string&gt; | 返回所有持久化属性的标记。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - PersistProp接口使用时，需要保证输入对应的key应当在AppStorage存在。 > - PersistProp接口使用时，需要保证输入对应的key应当在AppStorage存在。
> >
> - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 > - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。
``` ```ts
// xxx.ets
PersistentStorage.PersistProp("highScore", "0"); PersistentStorage.PersistProp("highScore", "0");
@Entry @Entry
......
zh-cn/application-dev/ui/ts-application-states-appstorage.md
浏览文件 @ 87721ce0
...@@ -15,7 +15,7 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同 ...@@ -15,7 +15,7 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同
## AppStorage接口 ## AppStorage接口
| 方法 | 参数说明 | 返回值 | 定义 | | 方法 | 参数说明 | 返回值 | 定义 |
| -------- | -------- | -------- | -------- | | ----------- | ---------------------------------------- | ------------------- | ---------------------------------------- |
| SetAndLink | key:&nbsp;string,<br/>defaultValue:&nbsp;T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 | | SetAndLink | key:&nbsp;string,<br/>defaultValue:&nbsp;T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 |
| Set | key:&nbsp;string,<br/>newValue:&nbsp;T | void | 对已保存的key值，替换其value值。 | | Set | key:&nbsp;string,<br/>newValue:&nbsp;T | void | 对已保存的key值，替换其value值。 |
| Link | key:&nbsp;string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 | | Link | key:&nbsp;string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 |
...@@ -49,7 +49,8 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同 ...@@ -49,7 +49,8 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同
## 示例 ## 示例
``` ```ts
// xxx.ets
let varA = AppStorage.Link('varA') let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode') let envLang = AppStorage.Prop('languageCode')
......
zh-cn/application-dev/ui/ts-attribution-configuration.md
浏览文件 @ 87721ce0
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
- 配置Text组件的字体大小属性： - 配置Text组件的字体大小属性：
``` ```ts
Text('123') Text('123')
.fontSize(12) .fontSize(12)
``` ```
- 使用“.”操作进行链式调用并同时配置组件的多个属性，如下所示： - 使用“.”操作进行链式调用并同时配置组件的多个属性，如下所示：
``` ```ts
Image('a.jpg') Image('a.jpg')
.alt('error.jpg') .alt('error.jpg')
.width(100) .width(100)
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
- 除了直接传递常量参数外，还可以传递变量或表达式，如下所示： - 除了直接传递常量参数外，还可以传递变量或表达式，如下所示：
``` ```ts
// Size, count, and offset are private variables defined in the component. // Size, count, and offset are private variables defined in the component.
Text('hello') Text('hello')
.fontSize(this.size) .fontSize(this.size)
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
- 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置Text组件的颜色和字体属性： - 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置Text组件的颜色和字体属性：
``` ```ts
Text('hello') Text('hello')
.fontSize(20) .fontSize(20)
.fontColor(Color.Red) .fontColor(Color.Red)
......
zh-cn/application-dev/ui/ts-child-component-configuration.md
浏览文件 @ 87721ce0
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
- 以下是简单的Column示例： - 以下是简单的Column示例：
``` ```ts
Column() { Column() {
Text('Hello') Text('Hello')
.fontSize(100) .fontSize(100)
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
- 可以嵌套多个子组件： - 可以嵌套多个子组件：
``` ```ts
Column() { Column() {
Column() { Column() {
Button() { Button() {
......
zh-cn/application-dev/ui/ts-component-based-builder.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。\@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。 @Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。\@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CompA { struct CompA {
...@@ -51,7 +52,8 @@ struct CompA { ...@@ -51,7 +52,8 @@ struct CompA {
### 参数初始化组件 ### 参数初始化组件
通过参数初始化组件时，将@Builder装饰的方法赋值给@BuilderParam修饰的属性，并在自定义组件内调用content属性值。对@BuilderParam修饰的属性进行赋值时不带参数（如：`content: this.specificParam`），则此属性的类型需定义成无返回值的函数（如：`@BuilderParam content: () => void`）。若带参数（如：`callContent: this.specificParam1("111")`），则此属性的类型需定义成any（如：`@BuilderParam callContent: any;`）。 通过参数初始化组件时，将@Builder装饰的方法赋值给@BuilderParam修饰的属性，并在自定义组件内调用content属性值。对@BuilderParam修饰的属性进行赋值时不带参数（如：`content: this.specificParam`），则此属性的类型需定义成无返回值的函数（如：`@BuilderParam content: () => void`）。若带参数（如：`callContent: this.specificParam1("111")`），则此属性的类型需定义成any（如：`@BuilderParam callContent: any;`）。
``` ```ts
// xxx.ets
@Component @Component
struct CustomContainer { struct CustomContainer {
header: string = ""; header: string = "";
...@@ -100,7 +102,8 @@ struct CustomContainerUser { ...@@ -100,7 +102,8 @@ struct CustomContainerUser {
在自定义组件中使用@BuilderParam修饰的属性接收尾随闭包（在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景（`CustomComponent(){}`）。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件（`{Column(){Text("content")}`），闭包内语法规范与[build](../ui/ts-function-build.md)一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。 在自定义组件中使用@BuilderParam修饰的属性接收尾随闭包（在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景（`CustomComponent(){}`）。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件（`{Column(){Text("content")}`），闭包内语法规范与[build](../ui/ts-function-build.md)一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。
示例：在闭包内增加Column组件并添加点击事件，在新增的Column组件内调用@Builder修饰的specificParam方法，点击Column组件后该改变自定义组件中header的属性值为“changeHeader”。并且在初始化自定义组件时会把尾随闭包的内容赋值给使用@BuilderParam修饰的closer属性。 示例：在闭包内增加Column组件并添加点击事件，在新增的Column组件内调用@Builder修饰的specificParam方法，点击Column组件后该改变自定义组件中header的属性值为“changeHeader”。并且在初始化自定义组件时会把尾随闭包的内容赋值给使用@BuilderParam修饰的closer属性。
``` ```ts
// xxx.ets
@Component @Component
struct CustomContainer { struct CustomContainer {
header: string = ""; header: string = "";
......
zh-cn/application-dev/ui/ts-component-based-component.md
浏览文件 @ 87721ce0
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
如下代码定义了MyComponent组件： 如下代码定义了MyComponent组件：
``` ```ts
@Component @Component
struct MyComponent { struct MyComponent {
build() { build() {
...@@ -44,7 +44,7 @@ MyComponent的build方法会在初始渲染时执行，此外，当组件中的 ...@@ -44,7 +44,7 @@ MyComponent的build方法会在初始渲染时执行，此外，当组件中的
以下代码使用了MyComponent组件： 以下代码使用了MyComponent组件：
``` ```ts
@Component @Component
struct ParentComponent { struct ParentComponent {
build() { build() {
...@@ -61,7 +61,7 @@ struct ParentComponent { ...@@ -61,7 +61,7 @@ struct ParentComponent {
可以多次使用MyComponent，并在不同的组件中进行重用： 可以多次使用MyComponent，并在不同的组件中进行重用：
``` ```ts
@Component @Component
struct ParentComponent { struct ParentComponent {
build() { build() {
......
zh-cn/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
@CustomDialog装饰器用于装饰自定义弹窗。 @CustomDialog装饰器用于装饰自定义弹窗。
``` ```ts
// custom-dialog-demo.ets // custom-dialog-demo.ets
@CustomDialog @CustomDialog
struct DialogExample { struct DialogExample {
......
zh-cn/application-dev/ui/ts-component-based-entry.md
浏览文件 @ 87721ce0
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。 用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 在单个源文件中，最多可以使用@Entry装饰一个自定义组件。 > 在单个源文件中，最多可以使用@Entry装饰一个自定义组件。
@Entry的用法如下： @Entry的用法如下：
``` ```ts
// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed.
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/ui/ts-component-based-extend.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
@Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过@Extend装饰器可以快速定义并复用组件的自定义样式。 @Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过@Extend装饰器可以快速定义并复用组件的自定义样式。
``` ```ts
// xxx.ets
@Extend(Text) function fancy(fontSize: number) { @Extend(Text) function fancy(fontSize: number) {
.fontColor(Color.Red) .fontColor(Color.Red)
.fontSize(fontSize) .fontSize(fontSize)
...@@ -25,5 +26,5 @@ struct FancyUse { ...@@ -25,5 +26,5 @@ struct FancyUse {
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> @Extend装饰器不能用在自定义组件struct定义框内。 > @Extend装饰器不能用在自定义组件struct定义框内。
zh-cn/application-dev/ui/ts-component-based-preview.md
浏览文件 @ 87721ce0
...@@ -3,14 +3,15 @@ ...@@ -3,14 +3,15 @@
用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 在单个源文件中，最多可以使用10个@Preview装饰自定义组件。 > 在单个源文件中，最多可以使用10个@Preview装饰自定义组件。
@Preview的用法如下： @Preview的用法如下：
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
......
zh-cn/application-dev/ui/ts-component-based-styles.md
浏览文件 @ 87721ce0
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
@Styles可以定义在组件内或组件外，在组件外定义时需在方法前添加function关键字，组件内定义时不需要添加function关键字。 @Styles可以定义在组件内或组件外，在组件外定义时需在方法前添加function关键字，组件内定义时不需要添加function关键字。
``` ```ts
// xxx.ets
@Styles function globalFancy() { @Styles function globalFancy() {
.backgroundColor(Color.Red) .backgroundColor(Color.Red)
} }
...@@ -39,7 +40,8 @@ struct FancyUse { ...@@ -39,7 +40,8 @@ struct FancyUse {
在StateStyles内可以直接调用组件外定义的Styles，但需要通过this关键字调用组件内定义的Styles。 在StateStyles内可以直接调用组件外定义的Styles，但需要通过this关键字调用组件内定义的Styles。
``` ```ts
// xxx.ets
@Styles function globalFancy() { @Styles function globalFancy() {
.width(100) .width(100)
.height(100) .height(100)
......
zh-cn/application-dev/ui/ts-component-creation-re-initialization.md
浏览文件 @ 87721ce0
...@@ -46,7 +46,8 @@ ...@@ -46,7 +46,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ParentComp { struct ParentComp {
......
zh-cn/application-dev/ui/ts-component-states-link.md
浏览文件 @ 87721ce0
...@@ -14,13 +14,14 @@ ...@@ -14,13 +14,14 @@
- 创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过`'$'`操作符创建引用。 - 创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过`'$'`操作符创建引用。
> ![icon-note.gif](public_sys-resources/icon-note.gif) 说明： > 说明：
> @Link变量不能在组件内部进行初始化。 > @Link变量不能在组件内部进行初始化。
## 简单类型示例 ## 简单类型示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Player { struct Player {
...@@ -53,7 +54,8 @@ struct PlayButton { ...@@ -53,7 +54,8 @@ struct PlayButton {
## 复杂类型示例 ## 复杂类型示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Parent { struct Parent {
...@@ -93,7 +95,8 @@ struct Child { ...@@ -93,7 +95,8 @@ struct Child {
## @Link、@State和@Prop结合使用示例 ## @Link、@State和@Prop结合使用示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ParentView { struct ParentView {
......
zh-cn/application-dev/ui/ts-component-states-prop.md
浏览文件 @ 87721ce0
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ParentComponent { struct ParentComponent {
...@@ -65,5 +66,5 @@ struct CountDownComponent { ...@@ -65,5 +66,5 @@ struct CountDownComponent {
在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行build方法，此时将创建一个新的CountDownComponent组件。父组件的countDownStartValue状态属性被用于初始化子组件的@Prop变量，当按下子组件的“Try again”按钮时，其@Prop变量count将被更改，CountDownComponent重新渲染。但是count值的更改不会影响父组件的countDownStartValue值。 在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行build方法，此时将创建一个新的CountDownComponent组件。父组件的countDownStartValue状态属性被用于初始化子组件的@Prop变量，当按下子组件的“Try again”按钮时，其@Prop变量count将被更改，CountDownComponent重新渲染。但是count值的更改不会影响父组件的countDownStartValue值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 创建新组件实例时，必须初始化其所有@Prop变量。 > 创建新组件实例时，必须初始化其所有@Prop变量。
zh-cn/application-dev/ui/ts-component-states-state.md
浏览文件 @ 87721ce0
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
## 简单类型的状态属性示例 ## 简单类型的状态属性示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -42,8 +43,9 @@ struct MyComponent { ...@@ -42,8 +43,9 @@ struct MyComponent {
## 复杂类型的状态变量示例 ## 复杂类型的状态变量示例
``` ```ts
// Customize the status data class. // Customize the status data class.
// xxx.ets
class Model { class Model {
value: string value: string
constructor(value: string) { constructor(value: string) {
...@@ -97,6 +99,6 @@ struct MyComponent { ...@@ -97,6 +99,6 @@ struct MyComponent {
- EntryComponent中有多个MyComponent组件实例，第一个MyComponent内部状态的更改不会影响第二个MyComponent； - EntryComponent中有多个MyComponent组件实例，第一个MyComponent内部状态的更改不会影响第二个MyComponent；
- 创建MyComponent实例时通过变量名给组件内的变量进行初始化，如： - 创建MyComponent实例时通过变量名给组件内的变量进行初始化，如：
``` ```ts
MyComponent({title: {value: 'Hello, World 2'}, count: 7}) MyComponent({title: {value: 'Hello, World 2'}, count: 7})
``` ```
zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md
浏览文件 @ 87721ce0
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
- Image组件的必选参数src： - Image组件的必选参数src：
``` ```ts
Image('http://xyz/a.jpg') Image('http://xyz/a.jpg')
``` ```
- Text组件的必选参数content： - Text组件的必选参数content：
``` ```ts
Text('123') Text('123')
``` ```
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造Image和Text组件的参数： 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造Image和Text组件的参数：
``` ```ts
// imagePath, where imageUrl is a private data variable defined in the component. // imagePath, where imageUrl is a private data variable defined in the component.
Image(this.imagePath) Image(this.imagePath)
Image('http://' + this.imageUrl) Image('http://' + this.imageUrl)
......
zh-cn/application-dev/ui/ts-custom-component-initialization.md
浏览文件 @ 87721ce0
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
- 本地初始化，例如： - 本地初始化，例如：
``` ```ts
@State counter: Counter = new Counter() @State counter: Counter = new Counter()
``` ```
- 在构造组件时通过构造参数初始化，例如： - 在构造组件时通过构造参数初始化，例如：
``` ```ts
MyComponent({counter: $myCounter}) MyComponent({counter: $myCounter})
``` ```
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 | | 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 |
| -------- | -------- | -------- | | ------------ | ----- | ----------- |
| @State | 必须 | 可选 | | @State | 必须 | 可选 |
| @Prop | 禁止 | 必须 | | @Prop | 禁止 | 必须 |
| @Link | 禁止 | 必须 | | @Link | 禁止 | 必须 |
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
| 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 | | 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------- | ------ | ----- | ----- | ---- |
| @State | 不允许 | 允许 | 允许 | 允许 | | @State | 不允许 | 允许 | 允许 | 允许 |
| @Link | 不允许 | 允许 | 不推荐 | 允许 | | @Link | 不允许 | 允许 | 不推荐 | 允许 |
| @Prop | 不允许 | 不允许 | 允许 | 允许 | | @Prop | 不允许 | 不允许 | 允许 | 允许 |
...@@ -69,7 +69,8 @@ ...@@ -69,7 +69,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
class ClassA { class ClassA {
public a:number public a:number
constructor(a: number) { constructor(a: number) {
......
zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
## 生命周期回调函数定义 ## 生命周期回调函数定义
| 函数名 | 描述 | | 函数名 | 描述 |
| -------- | -------- | | ---------------- | ---------------------------------------- |
| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 | | aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 |
| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 | | aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | | onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CountDownTimerComponent { struct CountDownTimerComponent {
...@@ -48,7 +49,7 @@ struct CountDownTimerComponent { ...@@ -48,7 +49,7 @@ struct CountDownTimerComponent {
上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。 上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等； > - 允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等；
> >
> - 不允许在生命周期函数中使用async await。 > - 不允许在生命周期函数中使用async await。
zh-cn/application-dev/ui/ts-event-configuration.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
- 使用lambda表达式配置组件的事件方法： - 使用lambda表达式配置组件的事件方法：
``` ```ts
// Counter is a private data variable defined in the component. // Counter is a private data variable defined in the component.
Button('add counter') Button('add counter')
.onClick(() => { .onClick(() => {
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
- 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this引用包含的组件： - 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this引用包含的组件：
``` ```ts
// Counter is a private data variable defined in the component. // Counter is a private data variable defined in the component.
Button('add counter') Button('add counter')
.onClick(function () { .onClick(function () {
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
- 使用组件的成员函数配置组件的事件方法： - 使用组件的成员函数配置组件的事件方法：
``` ```ts
myClickHandler(): void { myClickHandler(): void {
// do something // do something
} }
......
zh-cn/application-dev/ui/ts-framework-directory.md
浏览文件 @ 87721ce0
...@@ -24,8 +24,8 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下： ...@@ -24,8 +24,8 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下：
- **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。 - **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - 资源目录resources文件夹位于src/main下，此目录下资源文件的详细规范以及子目录结构规范参看[资源文件的分类](../quick-start/basic-resource-file-categories.md)。 > - 资源目录resources文件夹位于src/main下，此目录下资源文件的详细规范以及子目录结构规范参看[资源文件的分类](basic-resource-file-categories.md)。
> >
> - 页面支持导入TypeScript和JavaScript文件。 > - 页面支持导入TypeScript和JavaScript文件。
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ 87721ce0
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets"; import { FoodData, FoodList } from "../common/utils/utils.ets";
@Entry @Entry
...@@ -33,7 +34,7 @@ struct FoodCategoryList { ...@@ -33,7 +34,7 @@ struct FoodCategoryList {
导入文件示例： 导入文件示例：
``` ```ts
//common/utils/utils.ets //common/utils/utils.ets
export class FoodData { export class FoodData {
......
zh-cn/application-dev/ui/ts-framework-js-tag.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
| 标签 | 类型 | 默认值 | 必填 | 描述 | | 标签 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ------- | ---- | ---------------------------------------- |
| name | string | default | 是 | 标识ETS实例的名字。 | | name | string | default | 是 | 标识ETS实例的名字。 |
| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 | | pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 |
| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 | | window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 |
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： 定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：
``` ```json
{ {
"pages": [ "pages": [
"pages/index", "pages/index",
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - pages列表中第一个页面为应用的首页入口。 > - pages列表中第一个页面为应用的首页入口。
> >
> - 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。 > - 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。
...@@ -37,10 +37,10 @@ ...@@ -37,10 +37,10 @@
window用于配置相关视图显示窗口，支持配置如下属性： window用于配置相关视图显示窗口，支持配置如下属性：
| 类型 | 默认值 | 说明 | | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | | ----------- | ---- | ---------------------------------------- |
| designWidth | - | 配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见[lpx像素单位](../ui/ts-pixel-units.md)说明。 | | designWidth | - | 配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见[lpx像素单位](../ui/ts-pixel-units.md)说明。 |
``` ```json
{ {
... ...
"window": { "window": {
...@@ -56,11 +56,11 @@ window用于配置相关视图显示窗口，支持配置如下属性： ...@@ -56,11 +56,11 @@ window用于配置相关视图显示窗口，支持配置如下属性：
mode用于配置JS Component的运行类型与语法风格，支持如下属性： mode用于配置JS Component的运行类型与语法风格，支持如下属性：
| 类型 | 默认值 | 说明 | | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | | ------ | ---- | ---------------------------------------- |
| type | - | 配置该JS&nbsp;Component的运行类型，可选值为：<br/>-&nbsp;pageAbility：以ability的方式运行该JS&nbsp;Component。<br/>-&nbsp;form：以卡片的方式运行该JS&nbsp;Component。 | | type | - | 配置该JS&nbsp;Component的运行类型，可选值为：<br/>-&nbsp;pageAbility：以ability的方式运行该JS&nbsp;Component。<br/>-&nbsp;form：以卡片的方式运行该JS&nbsp;Component。 |
| syntax | - | 配置该JS&nbsp;Component的语法风格，可选值为：<br/>-&nbsp;hml：以hml/css/js风格进行编写。<br/>-&nbsp;ets：以声明式语法风格进行编写。 | | syntax | - | 配置该JS&nbsp;Component的语法风格，可选值为：<br/>-&nbsp;hml：以hml/css/js风格进行编写。<br/>-&nbsp;ets：以声明式语法风格进行编写。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 不支持同时配置type类型为form，syntax类型为ets。 > 不支持同时配置type类型为form，syntax类型为ets。
...@@ -68,7 +68,7 @@ mode用于配置JS Component的运行类型与语法风格，支持如下属性 ...@@ -68,7 +68,7 @@ mode用于配置JS Component的运行类型与语法风格，支持如下属性
config.json: config.json:
``` ```json
{ {
"app": { "app": {
"bundleName": "com.example.player", "bundleName": "com.example.player",
......
zh-cn/application-dev/ui/ts-function-build.md
浏览文件 @ 87721ce0
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
build函数满足Builder构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述Builder接口约束，在build方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用build方法。 build函数满足Builder构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述Builder接口约束，在build方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用build方法。
``` ```ts
interface Builder { interface Builder {
build: () => void build: () => void
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> build方法仅支持组合组件，使用渲染控制语法。 > build方法仅支持组合组件，使用渲染控制语法。
zh-cn/application-dev/ui/ts-general-ui-concepts.md
浏览文件 @ 87721ce0
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
## HelloWorld基本示例 ## HelloWorld基本示例
``` ```ts
// An example of displaying Hello World. After you click the button, Hello UI is displayed. // An example of displaying Hello World. After you click the button, Hello UI is displayed.
// xxx.ets
@Entry @Entry
@Component @Component
struct Hello { struct Hello {
......
zh-cn/application-dev/ui/ts-other-states-consume-provide.md
浏览文件 @ 87721ce0
...@@ -5,7 +5,7 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触 ...@@ -5,7 +5,7 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触
表1 @Provide 表1 @Provide
| 名称 | 说明 | | 名称 | 说明 |
| -------- | -------- | | ------- | ---------------------------------------- |
| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 | | 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 |
| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 | | 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 |
| 初始值 | 必须制定初始值。 | | 初始值 | 必须制定初始值。 |
...@@ -14,18 +14,19 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触 ...@@ -14,18 +14,19 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触
表2 @Consume 表2 @Consume
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ---- | -------- |
| 初始值 | 不可设置默认值。 | | 初始值 | 不可设置默认值。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 使用@Provide 和@Consume时避免循环引用导致死循环。 > 使用@Provide 和@Consume时避免循环引用导致死循环。
其他属性说明与Provide一致。 其他属性说明与Provide一致。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CompA { struct CompA {
......
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
浏览文件 @ 87721ce0
...@@ -120,7 +120,7 @@ struct ViewB { ...@@ -120,7 +120,7 @@ struct ViewB {
### 案例2 ### 案例2
```ts ```ts
//父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新 // 父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新
var nextID: number = 0; var nextID: number = 0;
@Observed @Observed
class ClassA { class ClassA {
......
zh-cn/application-dev/ui/ts-other-states-watch.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
@Watch用于监听状态变量的变化，语法结构为： @Watch用于监听状态变量的变化，语法结构为：
``` ```ts
@State @Watch("onChanged") count : number = 0 @State @Watch("onChanged") count : number = 0
``` ```
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink装饰的变量可以监听其变化。 装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink装饰的变量可以监听其变化。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CompA { struct CompA {
......
zh-cn/application-dev/ui/ts-parameterless-configuration.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。例如，Divider组件不包含构造参数： 组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。例如，Divider组件不包含构造参数：
``` ```ts
Column() { Column() {
Text('item 1') Text('item 1')
Divider() // No parameter configuration of the divider component Divider() // No parameter configuration of the divider component
......
zh-cn/application-dev/ui/ts-pixel-units.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---- | ---------------------------------------- |
| px | 屏幕物理像素单位。 | | px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | | vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 |
| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | | fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 |
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
提供其他单位与px单位互相转换的方法。 提供其他单位与px单位互相转换的方法。
| 接口 | 描述 | | 接口 | 描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------- |
| vp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将vp单位的数值转换为以px为单位的数值。 | | vp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将vp单位的数值转换为以px为单位的数值。 |
| px2vp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以vp为单位的数值。 | | px2vp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以vp为单位的数值。 |
| fp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将fp单位的数值转换为以px为单位的数值。 | | fp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将fp单位的数值转换为以px为单位的数值。 |
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Example { struct Example {
......
zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。ForEach定义如下： 开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。ForEach定义如下：
``` ```ts
ForEach( ForEach(
arr: any[], // Array to be iterated arr: any[], // Array to be iterated
itemGenerator: (item: any, index?: number) => void, // child component generator itemGenerator: (item: any, index?: number) => void, // child component generator
...@@ -21,25 +21,25 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGen ...@@ -21,25 +21,25 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGen
表1 参数说明 表1 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,&nbsp;3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 | | arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,&nbsp;3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 |
| itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 | | itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 | | keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 必须在容器组件内使用； > - 必须在容器组件内使用；
> >
> - 生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中； > - 生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中；
> >
> - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： > - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作：
> ``` > ```ts
> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) > ForEach(anArray, item => {Text(`${++counter}. item.label`)})
> ``` > ```
> >
> 正确的示例如下： > 正确的示例如下：
> >
> ``` > ```ts
> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), > ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
> item => Text(`${item.i}. item.data.label`), > item => Text(`${item.i}. item.data.label`),
> item => item.data.id.toString()) > item => item.data.id.toString())
...@@ -50,7 +50,8 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGen ...@@ -50,7 +50,8 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGen
简单类型数组示例： 简单类型数组示例：
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -76,7 +77,8 @@ struct MyComponent { ...@@ -76,7 +77,8 @@ struct MyComponent {
``` ```
复杂类型数组示例： 复杂类型数组示例：
``` ```ts
// xxx.ets
class Month { class Month {
year: number year: number
month: number month: number
......
zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
使用if/else进行条件渲染。 使用if/else进行条件渲染。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - if条件语句可以使用状态变量。 > - if条件语句可以使用状态变量。
> >
> - 使用if可以使子组件的渲染依赖条件语句。 > - 使用if可以使子组件的渲染依赖条件语句。
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
使用if条件语句： 使用if条件语句：
``` ```ts
Column() { Column() {
if (this.count > 0) { if (this.count > 0) {
Text('count is positive') Text('count is positive')
...@@ -29,7 +29,7 @@ Column() { ...@@ -29,7 +29,7 @@ Column() {
使用if、else if、else条件语句： 使用if、else if、else条件语句：
``` ```ts
Column() { Column() {
if (this.count < 0) { if (this.count < 0) {
Text('count is negative') Text('count is negative')
......
zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
开发框架提供数据懒加载（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。LazyForEach定义如下： 开发框架提供数据懒加载（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。LazyForEach定义如下：
``` ```ts
LazyForEach( LazyForEach(
dataSource: IDataSource, // Data source to be iterated dataSource: IDataSource, // Data source to be iterated
itemGenerator: (item: any) => void, // child component generator itemGenerator: (item: any) => void, // child component generator
...@@ -37,7 +37,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -37,7 +37,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
表1 参数说明 表1 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | --------------------------------------- | ---- | ---- | ---------------------------------------- |
| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 | | dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 |
| itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 | | itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 | | keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
...@@ -46,7 +46,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -46,7 +46,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
表2 IDataSource类型说明 表2 IDataSource类型说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---------------------------------------- | ----------- |
| totalCount():&nbsp;number | 获取数据总数。 | | totalCount():&nbsp;number | 获取数据总数。 |
| getData(index:&nbsp;number):&nbsp;any | 获取索引对应的数据。 | | getData(index:&nbsp;number):&nbsp;any | 获取索引对应的数据。 |
| registerDataChangeListener(listener:DataChangeListener):&nbsp;void | 注册改变数据的控制器。 | | registerDataChangeListener(listener:DataChangeListener):&nbsp;void | 注册改变数据的控制器。 |
...@@ -56,19 +56,19 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -56,19 +56,19 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
表3 DataChangeListener类型说明 表3 DataChangeListener类型说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------- |
| onDataReloaded():&nbsp;void | 重新加载所有数据。 | | onDataReloaded():&nbsp;void | 重新加载所有数据。 |
| onDataAdded(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件index的位置有数据添加。 | | onDataAdded(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件index的位置有数据添加。 |
| onDataMoved(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件数据从from的位置移到to的位置。 | | onDataMoved(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件数据从from的位置移到to的位置。 |
| onDataDeleted(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件index的位置有数据删除。 | | onDataDeleted(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件index的位置有数据删除。 |
| onDataChanged(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件index的位置有数据变化。 | | onDataChanged(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件index的位置有数据变化。 |
| onDataAdd(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据添加。 | | onDataAdd(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据添加。 |
| onDataMove(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件数据从from的位置移到to的位置。 | | onDataMove(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件数据从from的位置移到to的位置。 |
| onDataDelete(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据删除。 | | onDataDelete(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据删除。 |
| onDataChange(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据变化。 | | onDataChange(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据变化。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据； > - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据；
> >
> - LazyForEach在每次迭代中，必须且只允许创建一个子组件； > - LazyForEach在每次迭代中，必须且只允许创建一个子组件；
...@@ -80,13 +80,13 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -80,13 +80,13 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
> - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新； > - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新；
> >
> - 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： > - 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作：
> ``` > ```ts
> LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)}) > LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)})
> ``` > ```
> >
> 正确的示例如下： > 正确的示例如下：
> >
> ``` > ```ts
> LazyForEach(dataSource, > LazyForEach(dataSource,
> item => Text(`${item.i}. item.data.label`)), > item => Text(`${item.i}. item.data.label`)),
> item => item.data.id.toString()) > item => item.data.id.toString())
...@@ -95,7 +95,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG ...@@ -95,7 +95,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) =&gt; void, keyG
## 示例 ## 示例
``` ```ts
// Basic implementation of IDataSource to handle data listener // Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource { class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = [] private listeners: DataChangeListener[] = []
......
zh-cn/application-dev/ui/ts-resource-access.md
浏览文件 @ 87721ce0
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。 在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。 引用rawfile下资源时使用```"$rawfile('filename')"```的形式，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
> **说明：** > **说明：**
> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 > 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
...@@ -63,7 +63,7 @@ Image($r('sys.media.ohos_app_icon')) ...@@ -63,7 +63,7 @@ Image($r('sys.media.ohos_app_icon'))
color.json文件的内容如下： color.json文件的内容如下：
``` ```json
{ {
"color": [ "color": [
{ {
...@@ -81,7 +81,7 @@ color.json文件的内容如下： ...@@ -81,7 +81,7 @@ color.json文件的内容如下：
float.json文件的内容如下： float.json文件的内容如下：
``` ```json
{ {
"float":[ "float":[
{ {
...@@ -99,7 +99,7 @@ float.json文件的内容如下： ...@@ -99,7 +99,7 @@ float.json文件的内容如下：
string.json文件的内容如下： string.json文件的内容如下：
``` ```json
{ {
"string":[ "string":[
{ {
...@@ -121,7 +121,7 @@ string.json文件的内容如下： ...@@ -121,7 +121,7 @@ string.json文件的内容如下：
plural.json文件的内容如下： plural.json文件的内容如下：
``` ```json
{ {
"plural":[ "plural":[
{ {
......
zh-cn/application-dev/ui/ts-syntactic-sugar.md
浏览文件 @ 87721ce0
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
如下示例为@Component和@State的使用，被 @Component装饰的元素具备了组件化的含义，使用@State装饰的变量具备了状态数据的含义。 如下示例为@Component和@State的使用，被 @Component装饰的元素具备了组件化的含义，使用@State装饰的变量具备了状态数据的含义。
``` ```ts
@Component @Component
struct MyComponent { struct MyComponent {
@State count: number = 0 @State count: number = 0
...@@ -20,7 +20,7 @@ struct MyComponent { ...@@ -20,7 +20,7 @@ struct MyComponent {
装饰器定义在同一行上的描述如下： 装饰器定义在同一行上的描述如下：
``` ```ts
@Entry @Component struct MyComponent { @Entry @Component struct MyComponent {
} }
``` ```
...@@ -29,7 +29,7 @@ struct MyComponent { ...@@ -29,7 +29,7 @@ struct MyComponent {
但更推荐定义在多行上： 但更推荐定义在多行上：
``` ```ts
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -40,7 +40,7 @@ struct MyComponent { ...@@ -40,7 +40,7 @@ struct MyComponent {
### 支持的装饰器列表 ### 支持的装饰器列表
| 装饰器 | 装饰内容 | 说明 | | 装饰器 | 装饰内容 | 说明 |
| -------- | -------- | -------- | | ------------- | ---------------------------------------- | ---------------------------------------- |
| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 | | @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 |
| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | | @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 |
| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco&nbsp;Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 | | @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco&nbsp;Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 |
...@@ -61,7 +61,7 @@ struct MyComponent { ...@@ -61,7 +61,7 @@ struct MyComponent {
允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。 允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。
``` ```ts
Column() { Column() {
Image('1.jpg') Image('1.jpg')
.alt('error.jpg') .alt('error.jpg')
...@@ -75,7 +75,7 @@ Column() { ...@@ -75,7 +75,7 @@ Column() {
组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。 组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。
``` ```ts
@Component @Component
struct MyComponent { struct MyComponent {
@State data: string = '' @State data: string = ''
...@@ -90,7 +90,7 @@ struct MyComponent { ...@@ -90,7 +90,7 @@ struct MyComponent {
对于struct的实例化，可以省略new。 对于struct的实例化，可以省略new。
``` ```ts
// 定义 // 定义
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -124,7 +124,7 @@ TS语言的使用在生成器函数中存在一定的限制： ...@@ -124,7 +124,7 @@ TS语言的使用在生成器函数中存在一定的限制：
非法示例： 非法示例：
``` ```ts
build() { build() {
let a: number = 1 // invalid: variable declaration not allowed let a: number = 1 // invalid: variable declaration not allowed
Column() { Column() {
...@@ -137,14 +137,15 @@ build() { ...@@ -137,14 +137,15 @@ build() {
``` ```
## $$ ## $
$$支持变量双向绑定，支持简单变量、@State、@Link、@Prop等类型。 $$支持变量双向绑定，支持简单变量、@State、@Link、@Prop等类型。
当前$$仅支持[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)属性的show参数和@State变量之间的渲染，以及Radio组件的checked属性。 当前$$仅支持[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)属性的show参数和@State变量之间的渲染，以及Radio组件的checked属性。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct bindPopup { struct bindPopup {
......
zh-cn/application-dev/ui/ts-syntax-intro.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考组件说明。 本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考组件说明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 本节所有示例都以TS语言为例，请遵循相应语言的语法要求。 > - 本节所有示例都以TS语言为例，请遵循相应语言的语法要求。
> >
> - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 > - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。
......
zh-cn/application-dev/ui/ts-types.md
浏览文件 @ 87721ce0
...@@ -3,21 +3,21 @@ ...@@ -3,21 +3,21 @@
## 长度类型 ## 长度类型
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ------ | -------------------------- | ---------------------------------------- |
| Length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | | Length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
## 角度类型 ## 角度类型
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ----- | -------------------------- | ---------------------------------------- |
| Angle | string&nbsp;\|&nbsp;number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：<br/>-&nbsp;deg：如'100deg'。<br/>-&nbsp;rad：如'3.14rad'。 | | Angle | string&nbsp;\|&nbsp;number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：<br/>-&nbsp;deg：如'100deg'。<br/>-&nbsp;rad：如'3.14rad'。 |
## 点类型 ## 点类型
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ----- | --------------------- | --------------------------- |
| Point | [Length,&nbsp;Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | | Point | [Length,&nbsp;Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 |
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
组件属性方法使用的颜色Color说明如下： 组件属性方法使用的颜色Color说明如下：
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ----- | ---------------------------------------- | ---------------------------------------- |
| Color | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'。<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'。<br/>-&nbsp;HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。<br/>-&nbsp;枚举格式：Color.Black，Color.White等。 | | Color | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'。<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'。<br/>-&nbsp;HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。<br/>-&nbsp;枚举格式：Color.Black，Color.White等。 |
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
| 颜色名称 | 颜色值 | 颜色示意 | | 颜色名称 | 颜色值 | 颜色示意 |
| -------- | -------- | -------- | | ------ | -------- | ---------------------------------------- |
| Black | 0x000000 | ![zh-cn_image_0000001219864153](figures/zh-cn_image_0000001219864153.png) | | Black | 0x000000 | ![zh-cn_image_0000001219864153](figures/zh-cn_image_0000001219864153.png) |
| Blue | 0x0000ff | ![zh-cn_image_0000001174104404](figures/zh-cn_image_0000001174104404.png) | | Blue | 0x0000ff | ![zh-cn_image_0000001174104404](figures/zh-cn_image_0000001174104404.png) |
| Brown | 0xa52a2a | ![zh-cn_image_0000001219744201](figures/zh-cn_image_0000001219744201.png) | | Brown | 0xa52a2a | ![zh-cn_image_0000001219744201](figures/zh-cn_image_0000001219744201.png) |
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
颜色断点类型，用于描述渐进色颜色断点。 颜色断点类型，用于描述渐进色颜色断点。
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | --------- | -------------------- | -------------------------------------- |
| ColorStop | [Color,&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | | ColorStop | [Color,&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
...@@ -75,27 +75,27 @@ ...@@ -75,27 +75,27 @@
filename：工程中resources/rawfile目录下的文件名称。 filename：工程中resources/rawfile目录下的文件名称。
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | -------- | ---------------------------------------- | ---------------------------------------- |
| Resource | {<br/>readonly&nbsp;id:&nbsp;[number];<br/>readonly&nbsp;type:&nbsp;[number];<br/>readonly&nbsp;params?:&nbsp;any[];<br/>} | - id：资源id值。<br/>- type：资源类型（枚举值）。<br/>- params：可选参数。<br/>通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 | | Resource | {<br/>readonly&nbsp;id:&nbsp;[number];<br/>readonly&nbsp;type:&nbsp;[number];<br/>readonly&nbsp;params?:&nbsp;any[];<br/>} | - id：资源id值。<br/>- type：资源类型（枚举值）。<br/>- params：可选参数。<br/>通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 |
## ResourceStr类型<sup>8+</sup> ## ResourceStr类型<sup>8+</sup>
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ----------- | ---------------------------- | ------------- |
| ResourceStr | string&nbsp;\|&nbsp;Resource| 用于描述资源字符串的类型。 | | ResourceStr | string&nbsp;\|&nbsp;Resource | 用于描述资源字符串的类型。 |
## ResourceColor类型<sup>8+</sup> ## ResourceColor类型<sup>8+</sup>
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ------------- | ---------------------------------------- | ----------- |
| ResourceColor | Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Resource | 用于描述资源颜色类型。 | | ResourceColor | Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Resource | 用于描述资源颜色类型。 |
## Font类型<sup>8+</sup> ## Font类型<sup>8+</sup>
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ---- | ---------------------------------------- | ---------------------------------------- |
| Font | {<br/>size?: Length;<br/>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a> &nbsp;\| number &nbsp;\| string;<br/>family?: string &nbsp;\| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="https://gitee.com/superFat/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li6906111945316">FontStyle</a>;<br/>} | 设置文本样式：<br/>size: 设置文本尺寸，Length为number类型时，使用fp单位。<br/>weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。<br/>style: 设置文本的字体样式。 | | Font | {<br/>size?: Length;<br/>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a> &nbsp;\| number &nbsp;\| string;<br/>family?: string &nbsp;\| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="https://gitee.com/superFat/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li6906111945316">FontStyle</a>;<br/>} | 设置文本样式：<br/>size: 设置文本尺寸，Length为number类型时，使用fp单位。<br/>weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。<br/>style: 设置文本的字体样式。 |
## CustomBuilder类型<sup>8+</sup> ## CustomBuilder类型<sup>8+</sup>
...@@ -103,13 +103,14 @@ ...@@ -103,13 +103,14 @@
组件属性方法参数可使用CustomBuilder类型来自定义UI描述。 组件属性方法参数可使用CustomBuilder类型来自定义UI描述。
| 名称 | 类型定义 | 描述 | | 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- | | ------------- | ---------------------- | ---------------------------------------- |
| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 | | CustomBuilder | ()&nbsp;=&gt;&nbsp;any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct dataTypeExample { struct dataTypeExample {
......
zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md
浏览文件 @ 87721ce0
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
- @Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。 - @Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。
- @Prop：原理类似@Link，但是子组件所做的更改不会同步到父组件上，属于单向传递。 - @Prop：原理类似@Link，但是子组件所做的更改不会同步到父组件上，属于单向传递。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 状态变量名称不能使用id，如@Prop id:number 。 > 状态变量名称不能使用id，如@Prop id:number 。
......
zh-cn/application-dev/ui/ui-js-animate-attribute-style.md
浏览文件 @ 87721ce0
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。 在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="fade"> <div class="fade">
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -86,7 +86,7 @@ text{ ...@@ -86,7 +86,7 @@ text{
![zh-cn_image_0000001217168141](figures/zh-cn_image_0000001217168141.gif) ![zh-cn_image_0000001217168141](figures/zh-cn_image_0000001217168141.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。 > - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。
> >
> - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。 > - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。
zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ 87721ce0
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。 通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"></div> <div class="content"></div>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
height: 100%; height: 100%;
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。 > background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif) ![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
......
zh-cn/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 87721ce0
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。 通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" class="box" onclick="Show"></div> <div id="content" class="box" onclick="Show"></div>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
...@@ -60,23 +60,23 @@ export default { ...@@ -60,23 +60,23 @@ export default {
![zh-cn_image_0000001175235138](figures/zh-cn_image_0000001175235138.gif) ![zh-cn_image_0000001175235138](figures/zh-cn_image_0000001175235138.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
>- 使用animate方法时必须传入Keyframes和Options参数。 > - 使用animate方法时必须传入Keyframes和Options参数。
>- 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。 > - 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。
## 设置动画参数 ## 设置动画参数
在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。 在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" class="box" onclick="Show"></div> <div id="content" class="box" onclick="Show"></div>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
...@@ -138,21 +138,21 @@ export default { ...@@ -138,21 +138,21 @@ export default {
![zh-cn_image_0000001174916742](figures/zh-cn_image_0000001174916742.gif) ![zh-cn_image_0000001174916742](figures/zh-cn_image_0000001174916742.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - translate、scale和rtotate的先后顺序会影响动画效果。 > - translate、scale和rtotate的先后顺序会影响动画效果。
> >
> - transformOrigin只对scale和rtotate起作用。 > - transformOrigin只对scale和rtotate起作用。
在获取动画对象后，通过设置参数Options来设置动画的属性。 在获取动画对象后，通过设置参数Options来设置动画的属性。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" class="box" onclick="Show"></div> <div id="content" class="box" onclick="Show"></div>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -168,7 +168,7 @@ export default { ...@@ -168,7 +168,7 @@ export default {
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
...@@ -206,7 +206,7 @@ export default { ...@@ -206,7 +206,7 @@ export default {
![zh-cn_image_0000001220396499](figures/zh-cn_image_0000001220396499.gif) ![zh-cn_image_0000001220396499](figures/zh-cn_image_0000001220396499.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> direction：指定动画的播放模式。 > direction：指定动画的播放模式。
> >
> normal： 动画正向循环播放。 > normal： 动画正向循环播放。
...@@ -222,7 +222,7 @@ export default { ...@@ -222,7 +222,7 @@ export default {
animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。 animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);"> <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
...@@ -238,7 +238,7 @@ animation对象支持动画事件和动画方法。可以通过添加开始和 ...@@ -238,7 +238,7 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -270,8 +270,8 @@ button{ ...@@ -270,8 +270,8 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -348,7 +348,7 @@ export default { ...@@ -348,7 +348,7 @@ export default {
通过改变playStat的属性实现动画状态的改变。 通过改变playStat的属性实现动画状态的改变。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);"> <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
...@@ -362,7 +362,7 @@ export default { ...@@ -362,7 +362,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -394,8 +394,8 @@ button{ ...@@ -394,8 +394,8 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
通过设置插值器来实现动画效果。 通过设置插值器来实现动画效果。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 6 开始支持。 > 从API Version 6 开始支持。
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。 通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});"> <div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});">
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -44,8 +44,8 @@ button{ ...@@ -44,8 +44,8 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import animator from '@ohos.animator'; import animator from '@ohos.animator';
export default { export default {
data: { data: {
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
![zh-cn_image_0000001174756776](figures/zh-cn_image_0000001174756776.gif) ![zh-cn_image_0000001174756776](figures/zh-cn_image_0000001174756776.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 使用createAnimator创建动画对象时必须传入options参数。 > - 使用createAnimator创建动画对象时必须传入options参数。
> >
> - begin插值起点，不设置时默认为0。 > - begin插值起点，不设置时默认为0。
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的[createAnimator](../reference/apis/js-apis-animator.md)。 animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的[createAnimator](../reference/apis/js-apis-animator.md)。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;"> <div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
<div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b); <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
...@@ -113,7 +113,7 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini ...@@ -113,7 +113,7 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
button{ button{
width: 200px; width: 200px;
...@@ -150,8 +150,8 @@ button{ ...@@ -150,8 +150,8 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import animator from '@ohos.animator'; import animator from '@ohos.animator';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -234,5 +234,5 @@ export default { ...@@ -234,5 +234,5 @@ export default {
![zh-cn_image_0000001220635059](figures/zh-cn_image_0000001220635059.gif) ![zh-cn_image_0000001220635059](figures/zh-cn_image_0000001220635059.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。 > 在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。
zh-cn/application-dev/ui/ui-js-animate-frame.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函数step，将step中的timestamp赋予起始的startTime。当timestamp与startTime的差值小于规定的时间时将再次调用requestAnimationFrame，最终动画将会停止。 runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函数step，将step中的timestamp赋予起始的startTime。当timestamp与startTime的差值小于规定的时间时将再次调用requestAnimationFrame，最终动画将会停止。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs onchange="changecontent"> <tabs onchange="changecontent">
...@@ -25,7 +25,7 @@ runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函 ...@@ -25,7 +25,7 @@ runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -39,8 +39,8 @@ button{ ...@@ -39,8 +39,8 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
timer: null, timer: null,
...@@ -95,7 +95,7 @@ export default { ...@@ -95,7 +95,7 @@ export default {
![zh-cn_image_0000001174756860](figures/zh-cn_image_0000001174756860.gif) ![zh-cn_image_0000001174756860](figures/zh-cn_image_0000001174756860.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。 > requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。
...@@ -103,7 +103,7 @@ export default { ...@@ -103,7 +103,7 @@ export default {
通过cancelAnimationFrame函数取消逐帧回调，在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。 通过cancelAnimationFrame函数取消逐帧回调，在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs onchange="changecontent"> <tabs onchange="changecontent">
...@@ -122,7 +122,7 @@ export default { ...@@ -122,7 +122,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -136,8 +136,8 @@ button{ ...@@ -136,8 +136,8 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
timer: null, timer: null,
...@@ -184,5 +184,5 @@ export default { ...@@ -184,5 +184,5 @@ export default {
![zh-cn_image_0000001220316655](figures/zh-cn_image_0000001220316655.gif) ![zh-cn_image_0000001220316655](figures/zh-cn_image_0000001220316655.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 在调用该函数时需传入一个具有标识id的参数。 > 在调用该函数时需传入一个具有标识id的参数。
zh-cn/application-dev/ui/ui-js-animate-svg.md
浏览文件 @ 87721ce0
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。 在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
![zh-cn_image_0000001183871404](figures/zh-cn_image_0000001183871404.gif) ![zh-cn_image_0000001183871404](figures/zh-cn_image_0000001183871404.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 在设置动画变化值时，如果已经设置了values属性，则from和to都失效。 > 在设置动画变化值时，如果已经设置了values属性，则from和to都失效。
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="800" height="900"> <svg fill="white" width="800" height="900">
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style=""> <div class="container" style="">
<svg> <svg>
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 87721ce0
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。 创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="top"></div> <div class="top"></div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。 小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"></div> <div class="circle"></div>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rotate"> <div class="rotate">
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -301,7 +301,7 @@ ...@@ -301,7 +301,7 @@
![zh-cn_image_0000001220316305](figures/zh-cn_image_0000001220316305.gif) ![zh-cn_image_0000001220316305](figures/zh-cn_image_0000001220316305.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。 > transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。
...@@ -311,7 +311,7 @@ ...@@ -311,7 +311,7 @@
设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。 设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"> <div class="circle">
...@@ -326,7 +326,7 @@ ...@@ -326,7 +326,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -414,7 +414,7 @@ text{ ...@@ -414,7 +414,7 @@ text{
![zh-cn_image_0000001220396251](figures/zh-cn_image_0000001220396251.gif) ![zh-cn_image_0000001220396251](figures/zh-cn_image_0000001220396251.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width），子元素不会改变。 > 设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width），子元素不会改变。
...@@ -422,14 +422,14 @@ text{ ...@@ -422,14 +422,14 @@ text{
matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。 matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect"> </div> <div class="rect"> </div>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY ...@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY
transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。 transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect1"></div> <div class="rect1"></div>
...@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ...@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction:column; flex-direction:column;
...@@ -568,7 +568,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ...@@ -568,7 +568,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
![zh-cn_image_0000001220554911](figures/zh-cn_image_0000001220554911.gif) ![zh-cn_image_0000001220554911](figures/zh-cn_image_0000001220554911.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) translate(0,0)。 > - 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) translate(0,0)。
> >
> - transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 > - transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
......
zh-cn/application-dev/ui/ui-js-building-ui-animation.md
浏览文件 @ 87721ce0
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
具体的使用示例如下，更多信息请参考[组件方法](../reference/arkui-js/js-components-common-methods.md)。 具体的使用示例如下，更多信息请参考[组件方法](../reference/arkui-js/js-components-common-methods.md)。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="translate">hello</text> <text class="translate">hello</text>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
animation样式需要在css文件中先定义keyframe，在keyframe中设置动画的过渡效果，并通过一个样式类型在hml文件中调用。animation-name的使用示例如下： animation样式需要在css文件中先定义keyframe，在keyframe中设置动画的过渡效果，并通过一个样式类型在hml文件中调用。animation-name的使用示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="item-container"> <div class="item-container">
<text class="header">animation-name</text> <text class="header">animation-name</text>
...@@ -92,7 +92,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动 ...@@ -92,7 +92,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.item-container { .item-container {
margin-right: 60px; margin-right: 60px;
......
zh-cn/application-dev/ui/ui-js-building-ui-event.md
浏览文件 @ 87721ce0
...@@ -21,7 +21,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。 ...@@ -21,7 +21,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
具体的使用示例如下： 具体的使用示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="text-container" onclick="click"> <div class="text-container" onclick="click">
...@@ -45,7 +45,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。 ...@@ -45,7 +45,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -68,7 +68,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。 ...@@ -68,7 +68,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-interactions.md
浏览文件 @ 87721ce0
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
click事件作为一个函数定义在js文件中，可以更改isPressed的状态，从而更新显示的image组件。如果isPressed为真，则点赞数加1。该函数在hml文件中对应的div组件上生效，点赞按钮各子组件的样式设置在css文件当中。具体的实现示例如下： click事件作为一个函数定义在js文件中，可以更改isPressed的状态，从而更新显示的image组件。如果isPressed为真，则点赞数加1。该函数在hml文件中对应的div组件上生效，点赞按钮各子组件的样式设置在css文件当中。具体的实现示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<!-- 点赞按钮 --> <!-- 点赞按钮 -->
<div> <div>
...@@ -29,7 +29,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状 ...@@ -29,7 +29,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.like { .like {
width: 104px; width: 104px;
...@@ -53,7 +53,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状 ...@@ -53,7 +53,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件（通过if属性控制）。在包含文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示例如下： 留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件（通过if属性控制）。在包含文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="comment-title">Comment</text> <text class="comment-title">Comment</text>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
margin-top: 24px; margin-top: 24px;
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md
浏览文件 @ 87721ce0
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
当页面结构较为复杂时，如果使用div循环渲染，容易出现卡顿，因此推荐使用list组件代替div组件实现长列表布局，从而实现更加流畅的列表滚动体验。需要注意的是，list仅支持list-item作为子组件，具体的使用示例如下： 当页面结构较为复杂时，如果使用div循环渲染，容易出现卡顿，因此推荐使用list组件代替div组件实现长列表布局，从而实现更加流畅的列表滚动体验。需要注意的是，list仅支持list-item作为子组件，具体的使用示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<list class="list"> <list class="list">
<list-item type="listItem" for="{{textList}}"> <list-item type="listItem" for="{{textList}}">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</list> </list>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.desc-text { .desc-text {
width: 683.3px; width: 683.3px;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
当页面经常需要动态加载时，推荐使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示例如下： 当页面经常需要动态加载时，推荐使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<tabs> <tabs>
<tab-bar> <tab-bar>
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
</tabs> </tabs>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md
浏览文件 @ 87721ce0
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../ui/js-framework-file.md#目录结构)。代码示例如下： 图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../ui/js-framework-file.md#目录结构)。代码示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<image class="img" src="{{middleImage}}"></image> <image class="img" src="{{middleImage}}"></image>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.img { .img {
margin-top: 30px; margin-top: 30px;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md
浏览文件 @ 87721ce0
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考[text](../reference/arkui-js/js-components-basic-text.md)。在页面中插入标题和文本区域的示例如下： 实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考[text](../reference/arkui-js/js-components-basic-text.md)。在页面中插入标题和文本区域的示例如下：
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title-text">{{headTitle}}</text> <text class="title-text">{{headTitle}}</text>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-routes.md
浏览文件 @ 87721ce0
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
index和detail这两个页面均包含一个text组件和button组件：text组件用来指明当前页面，button组件用来实现两个页面之间的相互跳转。hml文件代码示例如下： index和detail这两个页面均包含一个text组件和button组件：text组件用来指明当前页面，button组件用来实现两个页面之间的相互跳转。hml文件代码示例如下：
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<text class="title">This is the index page.</text> <text class="title">This is the index page.</text>
...@@ -25,7 +25,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组 ...@@ -25,7 +25,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组
</div> </div>
``` ```
``` ```html
<!-- detail.hml --> <!-- detail.hml -->
<div class="container"> <div class="container">
<text class="title">This is the detail page.</text> <text class="title">This is the detail page.</text>
...@@ -38,7 +38,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组 ...@@ -38,7 +38,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组
构建index和detail页面的页面样式，text组件和button组件居中显示，两个组件之间间距为50px。css代码如下（两个页面样式代码一致）： 构建index和detail页面的页面样式，text组件和button组件居中显示，两个组件之间间距为50px。css代码如下（两个页面样式代码一致）：
``` ```css
/* index.css */ /* index.css */
/* detail.css */ /* detail.css */
.container { .container {
...@@ -58,7 +58,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组 ...@@ -58,7 +58,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组
为了使button组件的launch方法生效，需要在页面的js文件中实现跳转逻辑。调用router.push()接口将uri指定的页面添加到路由栈中，即跳转到uri指定的页面。在调用router方法之前，需要导入router模块。代码示例如下： 为了使button组件的launch方法生效，需要在页面的js文件中实现跳转逻辑。调用router.push()接口将uri指定的页面添加到路由栈中，即跳转到uri指定的页面。在调用router方法之前，需要导入router模块。代码示例如下：
``` ```js
// index.js // index.js
import router from '@system.router'; import router from '@system.router';
export default { export default {
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
} }
``` ```
``` ```js
// detail.js // detail.js
import router from '@system.router'; import router from '@system.router';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 87721ce0
# Tabs # tabs开发指导
Tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考[Tabs API](../reference/arkui-js/js-components-container-tabs.md)。 tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考[tabs API](../reference/arkui-js/js-components-container-tabs.md)。
## 创建Tabs ## 创建tabs
在pages/index目录下的hml文件中创建一个Tabs组件。 在pages/index目录下的hml文件中创建一个tabs组件。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" > <div class="container" >
<tabs> <tab-bar> <tabs> <tab-bar>
<text>item1</text> <text>item1</text>
...@@ -26,7 +26,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -26,7 +26,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -45,12 +45,12 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -45,12 +45,12 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif) ![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif)
## 设置Tabs方向 ## 设置tabs方向
Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。 tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true"> <tabs index="1" vertical="true">
<tab-bar > <tab-bar >
...@@ -73,8 +73,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -73,8 +73,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。 设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;"> <tabs style="margin-top: 30px;">
<tab-bar mode="fixed"> <tab-bar mode="fixed">
...@@ -98,9 +98,9 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -98,9 +98,9 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
## 设置样式 ## 设置样式
设置Tabs背景色及边框和tab-content布局。 设置tabs背景色及边框和tab-content布局。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs class="tabs"> <tabs class="tabs">
<tab-bar class="tabBar"> <tab-bar class="tabBar">
...@@ -119,7 +119,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -119,7 +119,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -152,10 +152,10 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -152,10 +152,10 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
## 显示页签索引 ## 显示页签索引
开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。 开发者可以为tabs添加change事件，实现页签切换后显示当前页签索引的功能。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange"> <tabs class="tabs" onchange="tabChange">
<tab-bar class="tabBar"> <tab-bar class="tabBar">
...@@ -174,8 +174,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -174,8 +174,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div> </div>
``` ```
``` ```js
/* index.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
tabChange(e){ tabChange(e){
...@@ -189,7 +189,7 @@ export default { ...@@ -189,7 +189,7 @@ export default {
![zh-cn_image_0000001163228638](figures/zh-cn_image_0000001163228638.gif) ![zh-cn_image_0000001163228638](figures/zh-cn_image_0000001163228638.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> tabs子组件仅支持一个[\<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md)和一个[\<tab-content>](../reference/arkui-js/js-components-container-tab-content.md)。 > tabs子组件仅支持一个[\<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md)和一个[\<tab-content>](../reference/arkui-js/js-components-container-tab-content.md)。
...@@ -200,8 +200,8 @@ export default { ...@@ -200,8 +200,8 @@ export default {
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。 用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs onchange="changeTabactive"> <tabs onchange="changeTabactive">
<tab-content> <tab-content>
...@@ -228,7 +228,7 @@ export default { ...@@ -228,7 +228,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -264,8 +264,8 @@ background-color:#F1F3F5; ...@@ -264,8 +264,8 @@ background-color:#F1F3F5;
} }
``` ```
``` ```js
/* index.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data() { data() {
...@@ -312,6 +312,6 @@ export default { ...@@ -312,6 +312,6 @@ export default {
## 相关实例 ## 相关实例
针对Tabs开发，有以下相关实例可供参考： 针对tabs开发，有以下相关实例可供参考：
- [`Tabs`：页签容器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs) - [`Tabs`：页签容器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-button.md
浏览文件 @ 87721ce0
# Button # button开发指导
Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[Button API](../reference/arkui-js/js-components-basic-button.md)。 button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[button API](../reference/arkui-js/js-components-basic-button.md)。
## 创建Button组件 ## 创建button组件
在pages/index目录下的hml文件中创建一个Button组件。 在pages/index目录下的hml文件中创建一个button组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button type="capsule" value="Capsule button"></button> <button type="capsule" value="Capsule button"></button>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -29,12 +29,12 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -29,12 +29,12 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
![zh-cn_image_0000001211225091](figures/zh-cn_image_0000001211225091.png) ![zh-cn_image_0000001211225091](figures/zh-cn_image_0000001211225091.png)
## 设置Button类型 ## 设置button类型
通过设置Button的type属性来选择按钮类型，如定义Button为圆形按钮、文本按钮等。 通过设置button的type属性来选择按钮类型，如定义button为圆形按钮、文本按钮等。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="circle" type="circle" >+</button> <button class="circle" type="circle" >+</button>
...@@ -43,7 +43,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -43,7 +43,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -73,14 +73,14 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -73,14 +73,14 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
![zh-cn_image_0000001208771093](figures/zh-cn_image_0000001208771093.png) ![zh-cn_image_0000001208771093](figures/zh-cn_image_0000001208771093.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 胶囊按钮（type=capsule）不支持border相关样式。 > - 胶囊按钮（type=capsule）不支持border相关样式。
> >
> - 圆形按钮（type=circle）不支持文本相关样式。 > - 圆形按钮（type=circle）不支持文本相关样式。
> >
> - 文本按钮（type=text），自适应文本大小，不支持尺寸样式设置（radius，width，height），背景透明不支持background-color样式。 > - 文本按钮（type=text），自适应文本大小，不支持尺寸样式设置（radius，width，height），背景透明不支持background-color样式。
> >
> - Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。 > - button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。
如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。 如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。
...@@ -98,16 +98,16 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -98,16 +98,16 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
## 显示下载进度 ## 显示下载进度
为Button组件添加progress方法，来实时显示下载进度条的进度。 为button组件添加progress方法，来实时显示下载进度条的进度。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button> <button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -124,7 +124,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -124,7 +124,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -174,16 +174,16 @@ export default { ...@@ -174,16 +174,16 @@ export default {
![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif) ![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> setProgress方法只支持button的类型为download。 > setProgress方法只支持button的类型为download。
## 场景示例 ## 场景示例
在本场景中，开发者可根据输入的文本内容进行Button类型切换。 在本场景中，开发者可根据输入的文本内容进行button类型切换。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="input-item"> <div class="input-item">
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -248,7 +248,7 @@ export default { ...@@ -248,7 +248,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ 87721ce0
...@@ -17,7 +17,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C ...@@ -17,7 +17,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -32,7 +32,7 @@ canvas{ ...@@ -32,7 +32,7 @@ canvas{
![zh-cn_image_0000001222984605](figures/zh-cn_image_0000001222984605.png) ![zh-cn_image_0000001222984605](figures/zh-cn_image_0000001222984605.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - Canvas组件默认背景色与父组件的背景色一致。 > - Canvas组件默认背景色与父组件的背景色一致。
> >
> - Canvas默认宽高为width: 300px，height: 150px。 > - Canvas默认宽高为width: 300px，height: 150px。
...@@ -43,7 +43,7 @@ canvas{ ...@@ -43,7 +43,7 @@ canvas{
Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。 Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas></canvas> <canvas></canvas>
...@@ -51,7 +51,7 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo ...@@ -51,7 +51,7 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -75,7 +75,7 @@ canvas{ ...@@ -75,7 +75,7 @@ canvas{
Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。 Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas> <canvas ref="canvas1" onlongpress="getUrl"></canvas>
...@@ -85,7 +85,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ...@@ -85,7 +85,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width:100%; width:100%;
...@@ -112,7 +112,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ...@@ -112,7 +112,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -137,7 +137,7 @@ export default { ...@@ -137,7 +137,7 @@ export default {
![zh-cn_image_0000001222985331](figures/zh-cn_image_0000001222985331.gif) ![zh-cn_image_0000001222985331](figures/zh-cn_image_0000001222985331.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 画布不支持在onInit和onReady中进行创建。 > 画布不支持在onInit和onReady中进行创建。
## 相关实例 ## 相关实例
......
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 87721ce0
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。 使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -47,7 +47,7 @@ select{ ...@@ -47,7 +47,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -209,7 +209,7 @@ export default { ...@@ -209,7 +209,7 @@ export default {
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -224,7 +224,7 @@ export default { ...@@ -224,7 +224,7 @@ export default {
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -248,7 +248,7 @@ select{ ...@@ -248,7 +248,7 @@ select{
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -307,7 +307,7 @@ export default { ...@@ -307,7 +307,7 @@ export default {
添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。 添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -321,7 +321,7 @@ export default { ...@@ -321,7 +321,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -344,7 +344,7 @@ select{ ...@@ -344,7 +344,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -432,7 +432,7 @@ export default { ...@@ -432,7 +432,7 @@ export default {
先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。 先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -445,7 +445,7 @@ export default { ...@@ -445,7 +445,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -468,7 +468,7 @@ select{ ...@@ -468,7 +468,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -557,7 +557,7 @@ export default { ...@@ -557,7 +557,7 @@ export default {
![zh-cn_image_0000001223064401](figures/zh-cn_image_0000001223064401.gif) ![zh-cn_image_0000001223064401](figures/zh-cn_image_0000001223064401.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 > ltr布局模式下start和left一致，rtl布局模式下start和right一致·。
...@@ -566,7 +566,7 @@ export default { ...@@ -566,7 +566,7 @@ export default {
创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。 创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -588,7 +588,7 @@ export default { ...@@ -588,7 +588,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -623,7 +623,7 @@ text{ ...@@ -623,7 +623,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -638,7 +638,7 @@ export default { ...@@ -638,7 +638,7 @@ export default {
img.src = 'common/images/2.png'; img.src = 'common/images/2.png';
// 设置图片宽度 // 设置图片宽度
img.width= 150; img.width= 150;
// 设置图片告度 // 设置图高度
img.height=150; img.height=150;
// 图片平铺容器 // 图片平铺容器
var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat; var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat;
...@@ -728,7 +728,7 @@ export default { ...@@ -728,7 +728,7 @@ export default {
![zh-cn_image_0000001218279600](figures/zh-cn_image_0000001218279600.gif) ![zh-cn_image_0000001218279600](figures/zh-cn_image_0000001218279600.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 > - setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
> >
> - 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： > - 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
...@@ -742,7 +742,7 @@ export default { ...@@ -742,7 +742,7 @@ export default {
save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。 save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -757,7 +757,7 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢 ...@@ -757,7 +757,7 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -791,7 +791,7 @@ text{ ...@@ -791,7 +791,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -816,7 +816,8 @@ export default { ...@@ -816,7 +816,8 @@ export default {
restore(){ restore(){
this.ctx.beginPath(); this.ctx.beginPath();
// 画笔恢复 // 画笔恢复
this.ctx.restore(); this.ctx.fillRect(200, 150, 200, 200); this.ctx.restore();
this.ctx.fillRect(200, 150, 200, 200);
}, },
} }
``` ```
......
zh-cn/application-dev/ui/ui-js-components-chart.md
浏览文件 @ 87721ce0
# Chart开发指导 # chart开发指导
Chart为图表组件，用于呈现线形图、柱状图和量规图界面。具体用法请参考[Chart](../reference/arkui-js/js-components-basic-chart.md)。 chart为图表组件，用于呈现线形图、柱状图和量规图界面。具体用法请参考[chart](../reference/arkui-js/js-components-basic-chart.md)。
## 创建Chart组件 ## 创建chart组件
在pages/index目录下的hml文件中创建一个Chart组件。 在pages/index目录下的hml文件中创建一个chart组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart> <chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -31,8 +31,8 @@ Chart为图表组件，用于呈现线形图、柱状图和量规图界面。具 ...@@ -31,8 +31,8 @@ Chart为图表组件，用于呈现线形图、柱状图和量规图界面。具
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
lineData: [ lineData: [
...@@ -67,10 +67,10 @@ export default { ...@@ -67,10 +67,10 @@ export default {
## 设置图表类型 ## 设置图表类型
Chart组件通过设置type属性定义图表t类型，如将图表设置为柱状图。 chart组件通过设置type属性定义图表t类型，如将图表设置为柱状图。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="container"> <div class="container">
...@@ -108,7 +108,7 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱 ...@@ -108,7 +108,7 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -144,8 +144,8 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱 ...@@ -144,8 +144,8 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
title: "类型展示", title: "类型展示",
...@@ -211,16 +211,16 @@ export default { ...@@ -211,16 +211,16 @@ export default {
![zh-cn_image_0000001227423251](figures/zh-cn_image_0000001227423251.gif) ![zh-cn_image_0000001227423251](figures/zh-cn_image_0000001227423251.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> Chart不支持显示每个点的值。 > chart不支持显示每个点的值。
## 设置图表属性 ## 设置图表属性
Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置，在datasets属性里添加对线条颜色、填充颜色、填充渐变颜色和绘制点集的设置。 chart组件在options属性中设置对x轴、y轴和数据序列参数的设置，在datasets属性里添加对线条颜色、填充颜色、填充渐变颜色和绘制点集的设置。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart> <chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
...@@ -228,7 +228,7 @@ Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置 ...@@ -228,7 +228,7 @@ Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -245,8 +245,8 @@ Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置 ...@@ -245,8 +245,8 @@ Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
//线形图数据 //线形图数据
...@@ -298,7 +298,7 @@ export default { ...@@ -298,7 +298,7 @@ export default {
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - options只支持柱状图和线形图设置参数，量规图不生效。 > - options只支持柱状图和线形图设置参数，量规图不生效。
> >
> - datasets只支持柱状图和线形图设置数据集合，量规图不生效。 > - datasets只支持柱状图和线形图设置数据集合，量规图不生效。
...@@ -308,10 +308,10 @@ export default { ...@@ -308,10 +308,10 @@ export default {
## 添加数据 ## 添加数据
通过Chart组件的append方法，实现动态添加数据。 通过chart组件的append方法，实现动态添加数据。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stack class="chart-region"> <stack class="chart-region">
...@@ -322,7 +322,7 @@ export default { ...@@ -322,7 +322,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -348,7 +348,7 @@ button { ...@@ -348,7 +348,7 @@ button {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -391,7 +391,12 @@ export default { ...@@ -391,7 +391,12 @@ export default {
} }
}, },
}, },
addData() { this.$refs.linechart.append({ serial: 0, data: [Math.floor(Math.random() * 400) + 200] }) } addData() {
this.$refs.linechart.append({
serial: 0,
data: [Math.floor(Math.random() * 400) + 200]
})
}
} }
``` ```
...@@ -403,7 +408,7 @@ export default { ...@@ -403,7 +408,7 @@ export default {
开发者可以根据开关Switch的状态来选择数据展示的状态，当Switch状态为true时，通过定时器来实现数据的动态展示。 开发者可以根据开关Switch的状态来选择数据展示的状态，当Switch状态为true时，通过定时器来实现数据的动态展示。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="container"> <div class="container">
...@@ -452,7 +457,7 @@ export default { ...@@ -452,7 +457,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
display:flex; display:flex;
...@@ -490,7 +495,7 @@ export default { ...@@ -490,7 +495,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -617,8 +622,8 @@ export default { ...@@ -617,8 +622,8 @@ export default {
## 相关实例 ## 相关实例
针对Chart开发，有以下相关实例可供参考： 针对chart开发，有以下相关实例可供参考：
- [`Chart`：图表组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/chart) - [`chart`：图表组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
- [chart（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication) - [chart（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication)
zh-cn/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ 87721ce0
# Dialog # dialog开发指导
Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考[Dialog API](../reference/arkui-js/js-components-container-dialog.md)。 dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考[dialog API](../reference/arkui-js/js-components-container-dialog.md)。
## 创建Dialog组件 ## 创建dialog组件
在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。 在pages/index目录下的hml文件中创建一个dialog组件，并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<dialog class="dialogClass" id="dialogId" dragable="true"> <dialog class="dialogClass" id="dialogId" dragable="true">
...@@ -14,11 +14,11 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要 ...@@ -14,11 +14,11 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
<text>this is a dialog</text> <text>this is a dialog</text>
</div> </div>
</dialog> </dialog>
<button value="click me" onclick="openDialog"></button> <button value="click me" onclick="opendialog"></button>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width:100%; width:100%;
...@@ -51,11 +51,11 @@ button{ ...@@ -51,11 +51,11 @@ button{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
//Touch to open the dialog box. //Touch to open the dialog box.
openDialog(){ opendialog(){
this.$element('dialogId').show() this.$element('dialogId').show()
}, },
} }
...@@ -66,10 +66,10 @@ export default { ...@@ -66,10 +66,10 @@ export default {
## 设置弹窗响应 ## 设置弹窗响应
开发者点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。 开发者点击页面上非dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog"> <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
...@@ -78,12 +78,12 @@ export default { ...@@ -78,12 +78,12 @@ export default {
<button value="confirm" onclick="confirmClick"></button> <button value="confirm" onclick="confirmClick"></button>
</div> </div>
</dialog> </dialog>
<button value="click me" onclick="openDialog"></button> <button value="click me" onclick="opendialog"></button>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width:100%; width:100%;
...@@ -117,8 +117,8 @@ button{ ...@@ -117,8 +117,8 @@ button{
``` ```
``` ```js
/* xxx.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
canceldialog(e){ canceldialog(e){
...@@ -126,7 +126,7 @@ export default { ...@@ -126,7 +126,7 @@ export default {
message: 'dialogCancel' message: 'dialogCancel'
}) })
}, },
openDialog(){ opendialog(){
this.$element('dialogId').show() this.$element('dialogId').show()
prompt.showToast({ prompt.showToast({
message: 'dialogShow' message: 'dialogShow'
...@@ -145,21 +145,21 @@ export default { ...@@ -145,21 +145,21 @@ export default {
![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif) ![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 仅支持单个子组件。 > - 仅支持单个子组件。
> >
> - Dialog属性、样式均不支持动态更新。 > - dialog属性、样式均不支持动态更新。
> >
> - Dialog组件不支持focusable、click-effect属性。 > - dialog组件不支持focusable、click-effect属性。
## 场景示例 ## 场景示例
在本场景中，开发者可以通过Dialog组件实现一个日程表。弹窗在打开状态下，利用[Textarea组件](../reference/arkui-js/js-components-basic-textarea.md)输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。 在本场景中，开发者可以通过dialog组件实现一个日程表。弹窗在打开状态下，利用[Textarea组件](../reference/arkui-js/js-components-basic-textarea.md)输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<text style="margin-top: 60px;margin-left: 30px;"> <text style="margin-top: 60px;margin-left: 30px;">
...@@ -194,7 +194,7 @@ export default { ...@@ -194,7 +194,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
...@@ -263,8 +263,8 @@ export default { ...@@ -263,8 +263,8 @@ export default {
``` ```
``` ```js
/* xxx.js */ // xxx.js
var info = null; var info = null;
import prompt from '@system.prompt'; import prompt from '@system.prompt';
import router from '@system.router'; import router from '@system.router';
...@@ -323,8 +323,8 @@ export default { ...@@ -323,8 +323,8 @@ export default {
## 相关实例 ## 相关实例
针对Dialog开发，有以下相关实例可供参考： 针对dialog开发，有以下相关实例可供参考：
- [`JsDialog`：页面弹窗（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog) - [`JsDialog`：页面弹窗（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
- [dialog（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo) - [Dialog（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @ 87721ce0
# Form # form开发指导
Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-components-basic-input.md)组件内容的提交和重置。具体用法请参考[Form API](../reference/arkui-js/js-components-container-form.md)。 form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-components-basic-input.md)组件内容的提交和重置。具体用法请参考[form API](../reference/arkui-js/js-components-container-form.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从 API Version 6 开始支持。 > 从 API Version 6 开始支持。
## 创建Form组件 ## 创建form组件
在pages/index目录下的hml文件中创建一个Form组件。 在pages/index目录下的hml文件中创建一个form组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form style="width: 100%; height: 20%"> <form style="width: 100%; height: 20%">
...@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -36,8 +36,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -36,8 +36,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 实现表单缩放 ## 实现表单缩放
为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。 为form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form id="formId" class="formClass" click-effect="spring-large"> <form id="formId" class="formClass" click-effect="spring-large">
...@@ -47,13 +47,13 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -47,13 +47,13 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
``` ```
## 设置Form样式 ## 设置form样式
通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。 通过为form添加background-color和border属性，来设置表单的背景颜色和边框。
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -77,9 +77,9 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -77,9 +77,9 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 添加响应事件 ## 添加响应事件
为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。 为form组件添加submit和reset事件，来提交表单内容或重置表单选项。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form"> <form onsubmit='onSubmit' onreset='onReset' class="form">
...@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -118,8 +118,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -118,8 +118,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default{ export default{
onSubmit(result) { onSubmit(result) {
...@@ -143,14 +143,14 @@ export default{ ...@@ -143,14 +143,14 @@ export default{
在本场景中，开发者可以选择相应选项并提交或重置数据。 在本场景中，开发者可以选择相应选项并提交或重置数据。
创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。 创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用form组件的onsubmit和onreset事件实现表单数据的提交与重置。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit="formSubmit" onreset="formReset"> <form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;"> <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > Form </span> <span > form </span>
</text> </text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;"> <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text> <text class="txt">Select 1 or more options</text>
...@@ -180,7 +180,7 @@ export default{ ...@@ -180,7 +180,7 @@ export default{
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container { .container {
flex-direction:column; flex-direction:column;
...@@ -197,8 +197,8 @@ label{ ...@@ -197,8 +197,8 @@ label{
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
formSubmit() { formSubmit() {
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 87721ce0
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。 在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
![zh-cn_image_0000001226897009](figures/zh-cn_image_0000001226897009.png) ![zh-cn_image_0000001226897009](figures/zh-cn_image_0000001226897009.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> grid-container仅支持grid-row为子组件。 > grid-container仅支持grid-row为子组件。
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。 grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
...@@ -61,7 +61,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方 ...@@ -61,7 +61,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -73,7 +73,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方 ...@@ -73,7 +73,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -113,7 +113,7 @@ export default { ...@@ -113,7 +113,7 @@ export default {
创建grid-container组件并添加grid-row，在grid-row组件内添加grild-col组件形成布局。 创建grid-container组件并添加grid-row，在grid-row组件内添加grild-col组件形成布局。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType"> <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
...@@ -148,7 +148,7 @@ export default { ...@@ -148,7 +148,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -165,7 +165,7 @@ text{ ...@@ -165,7 +165,7 @@ text{
![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png) ![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> grid-row仅支持grid-col为子组件，只能在grid-col组件中添加填充的内容。 > grid-row仅支持grid-col为子组件，只能在grid-col组件中添加填充的内容。
...@@ -174,7 +174,7 @@ text{ ...@@ -174,7 +174,7 @@ text{
本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。 本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <refresh refreshing="{{fresh}}" onrefresh="refresh">
...@@ -197,7 +197,7 @@ text{ ...@@ -197,7 +197,7 @@ text{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -211,7 +211,7 @@ text{ ...@@ -211,7 +211,7 @@ text{
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-image-animator.md
浏览文件 @ 87721ce0
# Image-animator开发指导 # image-animator开发指导
Image-animator组件为图片帧动画播放器。具体用法请参考[Image-animator](../reference/arkui-js/js-components-basic-image-animator.md)。 image-animator组件为图片帧动画播放器。具体用法请参考[image-animator](../reference/arkui-js/js-components-basic-image-animator.md)。
## 创建Image-animator组件 ## 创建image-animator组件
在pages/index目录下的hml文件中创建一个Image-animator组件，css文件中编写组件样式，js文件中引用图片。 在pages/index目录下的hml文件中创建一个image-animator组件，css文件中编写组件样式，js文件中引用图片。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image-animator class="animator" images="{{frames}}" duration="3s"/> <image-animator class="animator" images="{{frames}}" duration="3s"/>
...@@ -17,7 +17,7 @@ Image-animator组件为图片帧动画播放器。具体用法请参考[Image-an ...@@ -17,7 +17,7 @@ Image-animator组件为图片帧动画播放器。具体用法请参考[Image-an
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -34,8 +34,8 @@ Image-animator组件为图片帧动画播放器。具体用法请参考[Image-an ...@@ -34,8 +34,8 @@ Image-animator组件为图片帧动画播放器。具体用法请参考[Image-an
``` ```
``` ```js
/* index.js */ // index.js
export default { export default {
data: { data: {
frames: [ frames: [
...@@ -53,12 +53,12 @@ export default { ...@@ -53,12 +53,12 @@ export default {
![zh-cn_image_0000001218278612](figures/zh-cn_image_0000001218278612.gif) ![zh-cn_image_0000001218278612](figures/zh-cn_image_0000001218278612.gif)
## 设置Image-animator组件属性 ## 设置image-animator组件属性
添加iteration（播放次数）、reverse（播放顺序）、fixedsize（图片大小是否固定为组件大小）、duration（播放时长）和fillmode（执行结束后的状态）属性，控制图片的播放效果。 添加iteration（播放次数）、reverse（播放顺序）、fixedsize（图片大小是否固定为组件大小）、duration（播放时长）和fillmode（执行结束后的状态）属性，控制图片的播放效果。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}" duration="5s" /> <image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}" duration="5s" />
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -81,8 +81,8 @@ export default { ...@@ -81,8 +81,8 @@ export default {
``` ```
``` ```js
/* index.js */ // index.js
export default { export default {
data: { data: {
frames: [ frames: [
...@@ -135,8 +135,8 @@ export default { ...@@ -135,8 +135,8 @@ export default {
![zh-cn_image_0000001218598678](figures/zh-cn_image_0000001218598678.gif) ![zh-cn_image_0000001218598678](figures/zh-cn_image_0000001218598678.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 如果在images属性中设置了单独的duration属性，在Image-animator组件中设置的duration属性无效。 > - 如果在images属性中设置了单独的duration属性，在image-animator组件中设置的duration属性无效。
> >
> - 如果fixedsize属性值设置为true，图片的width 、height 、top 和left属性无效。 > - 如果fixedsize属性值设置为true，图片的width 、height 、top 和left属性无效。
> >
...@@ -145,10 +145,10 @@ export default { ...@@ -145,10 +145,10 @@ export default {
## 绑定事件 ## 绑定事件
向Image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件，当图片播放器被点击时触发pause事件，长按图片播放器触发resume事件，图片播放器停止播放时触发stop事件。 向image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件，当图片播放器被点击时触发pause事件，长按图片播放器触发resume事件，图片播放器停止播放时触发stop事件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause"> <image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
...@@ -157,7 +157,7 @@ export default { ...@@ -157,7 +157,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width: 100%; width: 100%;
...@@ -175,8 +175,8 @@ export default { ...@@ -175,8 +175,8 @@ export default {
``` ```
``` ```js
/* index.js */ // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -230,10 +230,10 @@ export default { ...@@ -230,10 +230,10 @@ export default {
在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。
Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。 image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s"> <image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s">
...@@ -256,7 +256,7 @@ Image-animator组件通过调用start、pause、stop和resume方法控制图片 ...@@ -256,7 +256,7 @@ Image-animator组件通过调用start、pause、stop和resume方法控制图片
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width: 100%; width: 100%;
...@@ -283,8 +283,8 @@ button{ ...@@ -283,8 +283,8 @@ button{
``` ```
``` ```js
/* index.js */ // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -337,6 +337,6 @@ export default { ...@@ -337,6 +337,6 @@ export default {
## 相关实例 ## 相关实例
针对Image-animator开发，有以下相关实例可供参考： 针对image-animator开发，有以下相关实例可供参考：
- [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo) - [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
zh-cn/application-dev/ui/ui-js-components-images.md
浏览文件 @ 87721ce0
# Image # image开发指导
Image是图片组件，用来渲染展示图片。具体用法请参考[Image API](../reference/arkui-js/js-components-basic-image.md)。 image是图片组件，用来渲染展示图片。具体用法请参考[image API](../reference/arkui-js/js-components-basic-image.md)。
## 创建Image组件 ## 创建image组件
在pages/index目录下的hml文件中创建一个Image组件。 在pages/index目录下的hml文件中创建一个image组件。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image> <image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -28,12 +28,12 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP ...@@ -28,12 +28,12 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
![zh-cn_image_0000001211227617](figures/zh-cn_image_0000001211227617.png) ![zh-cn_image_0000001211227617](figures/zh-cn_image_0000001211227617.png)
## 设置Image样式 ## 设置image样式
通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。 通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image src="common/images/bg-tv.jpg"> </image> <image src="common/images/bg-tv.jpg"> </image>
...@@ -41,7 +41,7 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP ...@@ -41,7 +41,7 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -69,7 +69,7 @@ image{ ...@@ -69,7 +69,7 @@ image{
图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。 图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" > <div class="container" >
<div> <div>
...@@ -81,7 +81,7 @@ image{ ...@@ -81,7 +81,7 @@ image{
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -99,13 +99,13 @@ image{ ...@@ -99,13 +99,13 @@ image{
} }
``` ```
``` ```js
/* index.js */ // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
imageComplete(i,e){ imageComplete(i,e){
prompt.showToast({ prompt.showToast({
message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height, message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height,
duration: 3000, duration: 3000,
}) })
}, },
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
## 场景示例 ## 场景示例
在本场景中，开发者长按图片后将慢慢隐藏图片，当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果，当透明度为0时清除定时器，设置透明度为1。 在本场景中，开发者长按图片后将慢慢隐藏图片，当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果，当透明度为0时清除定时器，设置透明度为1。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="page-container"> <div class="page-container">
<div class="content"> <div class="content">
...@@ -141,7 +141,7 @@ export default { ...@@ -141,7 +141,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.page-container { .page-container {
width: 100%; width: 100%;
...@@ -175,8 +175,8 @@ export default { ...@@ -175,8 +175,8 @@ export default {
} }
``` ```
``` ```js
/* index.js */ // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -206,7 +206,7 @@ export default { ...@@ -206,7 +206,7 @@ export default {
## 相关实例 ## 相关实例
针对Image开发，有以下相关实例可供参考： 针对image开发，有以下相关实例可供参考：
- [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo) - [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
......
zh-cn/application-dev/ui/ui-js-components-input.md
浏览文件 @ 87721ce0
# Input # input开发指导
Input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[Input API](../reference/arkui-js/js-components-basic-input.md)。 input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[input API](../reference/arkui-js/js-components-basic-input.md)。
## 创建Input组件 ## 创建input组件
在pages/index目录下的hml文件中创建一个Input组件。 在pages/index目录下的hml文件中创建一个input组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<input type="text"> Please enter the content </input> <input type="text">
Please enter the content
</input>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -29,11 +31,11 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 ...@@ -29,11 +31,11 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png) ![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png)
## 设置Input类型 ## 设置input类型
通过设置type属性来定义Input类型，如将Input设置为button、date等。 通过设置type属性来定义input类型，如将input设置为button、date等。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="div-button"> <div class="div-button">
...@@ -53,7 +55,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 ...@@ -53,7 +55,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -87,7 +89,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 ...@@ -87,7 +89,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
btnclick(){ btnclick(){
...@@ -100,15 +102,15 @@ export default { ...@@ -100,15 +102,15 @@ export default {
![zh-cn_image_0000001163375178](figures/zh-cn_image_0000001163375178.gif) ![zh-cn_image_0000001163375178](figures/zh-cn_image_0000001163375178.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> 仅当Input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。 > 仅当input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。
## 事件绑定 ## 事件绑定
向Input组件添加search和translate事件。 向input组件添加search和translate事件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<text style="margin-left: -7px;"> <text style="margin-left: -7px;">
...@@ -119,7 +121,7 @@ export default { ...@@ -119,7 +121,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content { .content {
width: 100%; width: 100%;
...@@ -141,7 +143,7 @@ text{ ...@@ -141,7 +143,7 @@ text{
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -165,9 +167,9 @@ export default { ...@@ -165,9 +167,9 @@ export default {
## 设置输入提示 ## 设置输入提示
通过对Input组件添加showError方法来提示输入的错误原因。 通过对input组件添加showError方法来提示输入的错误原因。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input id="input" class="input" type="text" maxlength="20" placeholder="Please input text" onchange="change"> <input id="input" class="input" type="text" maxlength="20" placeholder="Please input text" onchange="change">
...@@ -176,7 +178,7 @@ export default { ...@@ -176,7 +178,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content { .content {
width: 100%; width: 100%;
...@@ -196,7 +198,7 @@ export default { ...@@ -196,7 +198,7 @@ export default {
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -212,9 +214,13 @@ import prompt from '@system.prompt' ...@@ -212,9 +214,13 @@ import prompt from '@system.prompt'
}, },
buttonClick(e){ buttonClick(e){
if(this.value.length > 6){ if(this.value.length > 6){
this.$element("input").showError({ error: 'Up to 6 characters are allowed.' }); this.$element("input").showError({
error: 'Up to 6 characters are allowed.'
});
}else if(this.value.length == 0){ }else if(this.value.length == 0){
this.$element("input").showError({ error:this.value + 'This field cannot be left empty.' }); this.$element("input").showError({
error:this.value + 'This field cannot be left empty.'
});
}else{ }else{
prompt.showToast({ prompt.showToast({
message: "success " message: "success "
...@@ -226,17 +232,17 @@ import prompt from '@system.prompt' ...@@ -226,17 +232,17 @@ import prompt from '@system.prompt'
![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif) ![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该方法在Input类型为text、email、date、time、number和password时生效。 > 该方法在input类型为text、email、date、time、number和password时生效。
## 场景示例 ## 场景示例
根据场景选择不同类型的Input输入框，完成信息录入。 根据场景选择不同类型的input输入框，完成信息录入。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="label-item"> <div class="label-item">
...@@ -265,7 +271,7 @@ import prompt from '@system.prompt' ...@@ -265,7 +271,7 @@ import prompt from '@system.prompt'
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -294,7 +300,7 @@ label { ...@@ -294,7 +300,7 @@ label {
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -316,6 +322,6 @@ export default { ...@@ -316,6 +322,6 @@ export default {
## 相关实例 ## 相关实例
针对Input开发，有以下相关实例可供参考： 针对input开发，有以下相关实例可供参考：
- [input、label（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/InputApplication) - [input、label（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/InputApplication)
zh-cn/application-dev/ui/ui-js-components-list.md
浏览文件 @ 87721ce0
# List # list开发指导
List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考[List API](../reference/arkui-js/js-components-container-list.md)。 list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考[list API](../reference/arkui-js/js-components-container-list.md)。
## 创建List组件 ## 创建list组件
在pages/index目录下的hml文件中创建一个List组件。 在pages/index目录下的hml文件中创建一个list组件。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<list> <list>
<list-item class="listItem"></list-item> <list-item class="listItem"></list-item>
...@@ -19,7 +19,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -19,7 +19,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -37,7 +37,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -37,7 +37,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
![zh-cn_image_0000001211071477](figures/zh-cn_image_0000001211071477.png) ![zh-cn_image_0000001211071477](figures/zh-cn_image_0000001211071477.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - &lt;list-item-group&gt;是&lt;list&gt;的子组件，实现列表分组功能，不能再嵌套&lt;list&gt;，可以嵌套&lt;list-item&gt;。 > - &lt;list-item-group&gt;是&lt;list&gt;的子组件，实现列表分组功能，不能再嵌套&lt;list&gt;，可以嵌套&lt;list-item&gt;。
> >
> - &lt;list-item&gt;是&lt;list&gt;的子组件，展示列表的具体项。 > - &lt;list-item&gt;是&lt;list&gt;的子组件，展示列表的具体项。
...@@ -47,8 +47,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -47,8 +47,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。 设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<list class="listCss" scrollbar="on" > <list class="listCss" scrollbar="on" >
<list-item class="listItem"></list-item> <list-item class="listItem"></list-item>
...@@ -61,8 +61,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -61,8 +61,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -86,8 +86,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -86,8 +86,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。 设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" > <list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item> <list-item class="listItem" section="#" ></list-item>
...@@ -95,8 +95,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -95,8 +95,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -110,7 +110,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -110,7 +110,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
![zh-cn_image_0000001166432552](figures/zh-cn_image_0000001166432552.png) ![zh-cn_image_0000001166432552](figures/zh-cn_image_0000001166432552.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。 > - indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
> >
> - indexer可以自定义索引表，自定义时"\#"必须要存在。 > - indexer可以自定义索引表，自定义时"\#"必须要存在。
...@@ -118,10 +118,10 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -118,10 +118,10 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
## 实现列表折叠和展开 ## 实现列表折叠和展开
为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。 为list组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<list style="width: 100%;" id="mylist"> <list style="width: 100%;" id="mylist">
<list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand"> <list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
...@@ -140,8 +140,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ...@@ -140,8 +140,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -160,7 +160,7 @@ margin-top:30px; ...@@ -160,7 +160,7 @@ margin-top:30px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif) ![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - groupcollapse和groupexpand事件仅支持list-item-group组件使用。 > - groupcollapse和groupexpand事件仅支持list-item-group组件使用。
...@@ -203,8 +203,8 @@ export default { ...@@ -203,8 +203,8 @@ export default {
在本场景中，开发者可以根据字母索引表查找对应联系人。 在本场景中，开发者可以根据字母索引表查找对应联系人。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
<span>Contacts</span> <span>Contacts</span>
...@@ -228,8 +228,8 @@ export default { ...@@ -228,8 +228,8 @@ export default {
``` ```
``` ```css
/* index.css */ /* xxx.css */
.doc-page { .doc-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -265,7 +265,7 @@ export default { ...@@ -265,7 +265,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -312,6 +312,6 @@ export default { ...@@ -312,6 +312,6 @@ export default {
## 相关实例 ## 相关实例
针对List开发，有以下相关实例可供参考： 针对list开发，有以下相关实例可供参考：
- [`JsList`：商品列表（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList) - [`JsList`：商品列表（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-marquee.md
浏览文件 @ 87721ce0
# Marquee开发指导 # marquee开发指导
Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/arkui-js/js-components-basic-marquee.md)。 marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/arkui-js/js-components-basic-marquee.md)。
## 创建Marquee组件 ## 创建marquee组件
在pages/index目录下的hml文件中创建一个Marquee组件。 在pages/index目录下的hml文件中创建一个marquee组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee> <marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee>
...@@ -17,7 +17,7 @@ Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用 ...@@ -17,7 +17,7 @@ Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -34,18 +34,18 @@ Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用 ...@@ -34,18 +34,18 @@ Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用
## 设置属性和样式 ## 设置属性和样式
Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。 marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee class="customMarquee">It's a racing lamp.</marquee> <marquee class="custommarquee">It's a racing lamp.</marquee>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -55,7 +55,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 ...@@ -55,7 +55,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
.customMarquee { .custommarquee {
width: 100%; width: 100%;
height: 80px; height: 80px;
padding: 10px; padding: 10px;
...@@ -74,7 +74,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 ...@@ -74,7 +74,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体
通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。 通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="tutorial-page"> <div class="tutorial-page">
<div class="mymarquee"> <div class="mymarquee">
...@@ -90,7 +90,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 ...@@ -90,7 +90,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.tutorial-page { .tutorial-page {
width: 750px; width: 750px;
...@@ -124,7 +124,7 @@ button{ ...@@ -124,7 +124,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
private: { private: {
...@@ -144,7 +144,7 @@ export default { ...@@ -144,7 +144,7 @@ export default {
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 当loop的值小于等于零时，跑马灯marquee将连续滚动。如果loop未指定，则默认为-1。 > 当loop的值小于等于零时，跑马灯marquee将连续滚动。如果loop未指定，则默认为-1。
![zh-cn_image_0000001227701867](figures/zh-cn_image_0000001227701867.gif) ![zh-cn_image_0000001227701867](figures/zh-cn_image_0000001227701867.gif)
...@@ -157,7 +157,7 @@ export default { ...@@ -157,7 +157,7 @@ export default {
跑马灯的次数设置为1，在结束的时候触发finish事件使跑马灯的次数加1，字体颜色变为随机颜色，调用start方法使跑马灯再次开始滚动。 跑马灯的次数设置为1，在结束的时候触发finish事件使跑马灯的次数加1，字体颜色变为随机颜色，调用start方法使跑马灯再次开始滚动。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="tutorial-page"> <div class="tutorial-page">
<div class="mymarquee"> <div class="mymarquee">
...@@ -174,7 +174,7 @@ export default { ...@@ -174,7 +174,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.tutorial-page { .tutorial-page {
width: 750px; width: 750px;
...@@ -204,7 +204,7 @@ button{ ...@@ -204,7 +204,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
private: { private: {
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 87721ce0
# Menu # menu开发指导
提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[Menu](../reference/arkui-js/js-components-basic-menu.md)。 提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[menu](../reference/arkui-js/js-components-basic-menu.md)。
## 创建Menu组件 ## 创建menu组件
在pages/index目录下的hml文件中创建一个Menu组件，添加target、type、title属性。 在pages/index目录下的hml文件中创建一个menu组件，添加target、type、title属性。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text class="title-text" id="textId">show menu</text> <text class="title-text" id="textId">show menu</text>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -40,10 +40,10 @@ ...@@ -40,10 +40,10 @@
![zh-cn_image_0000001226815299](figures/zh-cn_image_0000001226815299.gif) ![zh-cn_image_0000001226815299](figures/zh-cn_image_0000001226815299.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - Menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。 > - menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。
> >
> - Menu组件不支持focusable、disabled属性。 > - menu组件不支持focusable、disabled属性。
## 设置样式 ## 设置样式
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
为menu组件设置样式，例如字体颜色、大小、字符间距等。 为menu组件设置样式，例如字体颜色、大小、字符间距等。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text class="title-text" id="textId">show menu</text> <text class="title-text" id="textId">show menu</text>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -103,7 +103,7 @@ option{ ...@@ -103,7 +103,7 @@ option{
为menu组件绑定onselected事件（菜单中某个值被点击选中时触发）和oncancel事件（取消操作时触发），点击text组件调用show方法可设置menu组件的坐标。 为menu组件绑定onselected事件（菜单中某个值被点击选中时触发）和oncancel事件（取消操作时触发），点击text组件调用show方法可设置menu组件的坐标。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text class="title-text" id="textId" onclick="textClick">show menu</text> <text class="title-text" id="textId" onclick="textClick">show menu</text>
...@@ -116,7 +116,7 @@ option{ ...@@ -116,7 +116,7 @@ option{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -148,8 +148,8 @@ option{ ...@@ -148,8 +148,8 @@ option{
``` ```
``` ```js
// index.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
select(e) { select(e) {
...@@ -176,7 +176,7 @@ export default { ...@@ -176,7 +176,7 @@ export default {
本场景中开发者可点击toggle组件修改文字颜色，选择menu组件修改渐变色块大小。 本场景中开发者可点击toggle组件修改文字颜色，选择menu组件修改渐变色块大小。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<div class="contentToggle"> <div class="contentToggle">
...@@ -192,7 +192,7 @@ export default { ...@@ -192,7 +192,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -240,8 +240,8 @@ option{ ...@@ -240,8 +240,8 @@ option{
``` ```
``` ```js
// index.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data:{
...@@ -281,6 +281,6 @@ export default { ...@@ -281,6 +281,6 @@ export default {
## 相关实例 ## 相关实例
针对Menu开发，有以下相关实例可供参考： 针对menu开发，有以下相关实例可供参考：
- [`JSMenu`：菜单（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu) - [`JSMenu`：菜单（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu)
zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -45,7 +45,7 @@ select{ ...@@ -45,7 +45,7 @@ select{
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。 使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -103,7 +103,7 @@ export default { ...@@ -103,7 +103,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -136,7 +136,7 @@ button{ ...@@ -136,7 +136,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 87721ce0
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
创建Path2D，使用多条线段组合图形。 创建Path2D，使用多条线段组合图形。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -32,7 +32,7 @@ canvas{ ...@@ -32,7 +32,7 @@ canvas{
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -81,7 +81,7 @@ export default { ...@@ -81,7 +81,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)，图形变大并向左倾斜。 先使用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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -128,7 +128,7 @@ text{ ...@@ -128,7 +128,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -162,7 +162,8 @@ export default { ...@@ -162,7 +162,8 @@ export default {
this.isAdd = "clearPath2" this.isAdd = "clearPath2"
}else{ }else{
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0,0,600,600)
this.ctx.stroke(this.path1); this.isAdd = "addPath2" this.ctx.stroke(this.path1);
this.isAdd = "addPath2"
} }
}, },
setTransform(){ setTransform(){
...@@ -170,10 +171,16 @@ export default { ...@@ -170,10 +171,16 @@ export default {
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0,0,600,600)
this.path3 = this.ctx.createPath2D(); this.path3 = this.ctx.createPath2D();
this.path3.arc(150, 150, 100, 0, 6.28) this.path3.arc(150, 150, 100, 0, 6.28)
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); this.ctx.stroke(this.path3); this.isChange = !this.isChange; this.textName = "back" this.path3.setTransform(2, 0.1, 0.1, 2, 0,0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "back"
}else{ }else{
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0,0,600,600)
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);this.ctx.stroke(this.path3);this.isChange = !this.isChange; this.textName = "change" this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "change"
} }
}, },
} }
......
zh-cn/application-dev/ui/ui-js-components-picker.md
浏览文件 @ 87721ce0
# Picker # picker开发指导
Picker是滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。具体用法请参考[Picker API](../reference/arkui-js/js-components-basic-picker.md)。 picker是滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。具体用法请参考[picker API](../reference/arkui-js/js-components-basic-picker.md)。
## 创建Picker组件 ## 创建picker组件
在pages/index目录下的hml文件中创建一个Picker组件。 在pages/index目录下的hml文件中创建一个picker组件。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<picker> picker </picker> <picker> picker </picker>
<div> <div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -29,20 +29,20 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器 ...@@ -29,20 +29,20 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器
![zh-cn_image_0000001210951541](figures/zh-cn_image_0000001210951541.gif) ![zh-cn_image_0000001210951541](figures/zh-cn_image_0000001210951541.gif)
## 设置Picker类型 ## 设置picker类型
通过设置Picker的type属性来选择滑动选择器类型，如定义Picker为日期选择器。 通过设置picker的type属性来选择滑动选择器类型，如定义picker为日期选择器。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker> <picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker>
<picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker> <picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -56,7 +56,7 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器 ...@@ -56,7 +56,7 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -69,25 +69,25 @@ export default { ...@@ -69,25 +69,25 @@ export default {
![zh-cn_image_0000001189098638](figures/zh-cn_image_0000001189098638.gif) ![zh-cn_image_0000001189098638](figures/zh-cn_image_0000001189098638.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> 普通选择器设置取值范围时，需要使用数据绑定的方式。 > 普通选择器设置取值范围时，需要使用数据绑定的方式。
## 设置时间展现格式 ## 设置时间展现格式
Picker的hours属性定义时间的展现格式，可选类型有12小时制和24小时制。 picker的hours属性定义时间的展现格式，可选类型有12小时制和24小时制。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange" class="pickertime"></picker> <picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange" class="pickertime"></picker>
<picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange" class="pickertime"></picker> <picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange" class="pickertime"></picker>
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -105,7 +105,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 ...@@ -105,7 +105,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
![zh-cn_image_0000001234327855](figures/zh-cn_image_0000001234327855.gif) ![zh-cn_image_0000001234327855](figures/zh-cn_image_0000001234327855.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - hours属性为12：按照12小时制显示，用上午和下午进行区分； > - hours属性为12：按照12小时制显示，用上午和下午进行区分；
> >
> - hours属性为24：按照24小时制显示。 > - hours属性为24：按照24小时制显示。
...@@ -113,18 +113,18 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 ...@@ -113,18 +113,18 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
## 添加响应事件 ## 添加响应事件
对Picker添加change和cancel事件，来对选择的内容进行确定和取消。 对picker添加change和cancel事件，来对选择的内容进行确定和取消。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected=" <picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="
{{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker> {{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker>
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -142,7 +142,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 ...@@ -142,7 +142,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -170,8 +170,8 @@ export default { ...@@ -170,8 +170,8 @@ export default {
在本场景中，开发者可以自定义填写当前的健康情况来进行打卡。 在本场景中，开发者可以自定义填写当前的健康情况来进行打卡。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<text class="title">Health check-in</text> <text class="title">Health check-in</text>
<div class="out-container"> <div class="out-container">
...@@ -201,8 +201,8 @@ export default { ...@@ -201,8 +201,8 @@ export default {
``` ```
``` ```css
/* index.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -244,7 +244,7 @@ export default { ...@@ -244,7 +244,7 @@ export default {
``` ```
``` ```js
// xxx.js // xxx.js
import pmt from '@system.prompt' import pmt from '@system.prompt'
export default { export default {
...@@ -299,6 +299,6 @@ export default { ...@@ -299,6 +299,6 @@ export default {
## 相关实例 ## 相关实例
针对Picker开发，有以下相关实例可供参考： 针对picker开发，有以下相关实例可供参考：
- [`Picker`：滑动选择器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker) - [`Picker`：滑动选择器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker)
zh-cn/application-dev/ui/ui-js-components-qrcode.md
浏览文件 @ 87721ce0
# Qrcode # qrcode开发指导
生成并显示二维码，具体用法请参考[Qrcode](../reference/arkui-js/js-components-basic-qrcode.md)。 生成并显示二维码，具体用法请参考[qrcode](../reference/arkui-js/js-components-basic-qrcode.md)。
## 创建Qrcode组件 ## 创建qrcode组件
在pages/index目录下的hml文件中创建一个Qrcode组件。 在pages/index目录下的hml文件中创建一个qrcode组件。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<qrcode value="Hello"></qrcode> <qrcode value="Hello"></qrcode>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -31,16 +31,16 @@ ...@@ -31,16 +31,16 @@
![zh-cn_image_0000001229155403](figures/zh-cn_image_0000001229155403.png) ![zh-cn_image_0000001229155403](figures/zh-cn_image_0000001229155403.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> Qrcode组件在创建的时候value的值为必填项。 > qrcode组件在创建的时候value的值为必填项。
## 设置组件类型 ## 设置组件类型
通过设置Qrcode的type属性来选择按钮类型，如定义Qrcode为矩形二维码、圆形二维码。 通过设置qrcode的type属性来选择按钮类型，如定义qrcode为矩形二维码、圆形二维码。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<select onchange="settype"> <select onchange="settype">
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -68,7 +68,7 @@ select{ ...@@ -68,7 +68,7 @@ select{
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
通过color和background-color样式为二维码设置显示颜色和背景颜色。 通过color和background-color样式为二维码设置显示颜色和背景颜色。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<qrcode value="Hello" type="rect"></qrcode> <qrcode value="Hello" type="rect"></qrcode>
...@@ -97,7 +97,7 @@ export default { ...@@ -97,7 +97,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -116,7 +116,7 @@ qrcode{ ...@@ -116,7 +116,7 @@ qrcode{
![zh-cn_image_0000001183595750](figures/zh-cn_image_0000001183595750.png) ![zh-cn_image_0000001183595750](figures/zh-cn_image_0000001183595750.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - width和height不一致时，取二者较小值作为二维码的边长，且最终生成的二维码居中显示。 > - width和height不一致时，取二者较小值作为二维码的边长，且最终生成的二维码居中显示。
> >
> - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。 > - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
...@@ -128,7 +128,7 @@ qrcode{ ...@@ -128,7 +128,7 @@ qrcode{
在本场景中将二维码与输入框绑定，通过改变输入框的内容改变二维码。 在本场景中将二维码与输入框绑定，通过改变输入框的内容改变二维码。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<input style="margin-bottom: 100px;" onchange="change"></input> <input style="margin-bottom: 100px;" onchange="change"></input>
...@@ -137,7 +137,7 @@ qrcode{ ...@@ -137,7 +137,7 @@ qrcode{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -154,7 +154,7 @@ qrcode{ ...@@ -154,7 +154,7 @@ qrcode{
``` ```
``` ```js
// index.js // index.js
export default{ export default{
data: { data: {
......
zh-cn/application-dev/ui/ui-js-components-rating.md
浏览文件 @ 87721ce0
# Rating开发指导 # rating开发指导
Rating为评分条组件，表示用户使用感受的衡量标准条。具体用法请参考[Rating](../reference/arkui-js/js-components-basic-rating.md)。 rating为评分条组件，表示用户使用感受的衡量标准条。具体用法请参考[rating](../reference/arkui-js/js-components-basic-rating.md)。
## 创建Rating组件 ## 创建rating组件
在pages/index目录下的hml文件中创建一个Rating组件。 在pages/index目录下的hml文件中创建一个rating组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<rating></rating> <rating></rating>
...@@ -17,7 +17,7 @@ Rating为评分条组件，表示用户使用感受的衡量标准条。具体 ...@@ -17,7 +17,7 @@ Rating为评分条组件，表示用户使用感受的衡量标准条。具体
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -38,10 +38,10 @@ rating { ...@@ -38,10 +38,10 @@ rating {
## 设置评分星级 ## 设置评分星级
Rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。 rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<rating numstars="6" rating="5"> <rating numstars="6" rating="5">
...@@ -50,7 +50,7 @@ Rating组件通过设置numstars和rating属性设置评分条的星级总数和 ...@@ -50,7 +50,7 @@ Rating组件通过设置numstars和rating属性设置评分条的星级总数和
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -71,10 +71,10 @@ rating { ...@@ -71,10 +71,10 @@ rating {
## 设置评分样式 ## 设置评分样式
Rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。 rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;"> <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
...@@ -86,7 +86,7 @@ Rating组件通过star-background、star-foreground和star-secondary属性设置 ...@@ -86,7 +86,7 @@ Rating组件通过star-background、star-foreground和star-secondary属性设置
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -99,8 +99,8 @@ Rating组件通过star-background、star-foreground和star-secondary属性设置 ...@@ -99,8 +99,8 @@ Rating组件通过star-background、star-foreground和star-secondary属性设置
``` ```
``` ```js
/* index.js */ // index.js
export default { export default {
data: { data: {
backstar: 'common/love.png', backstar: 'common/love.png',
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
![zh-cn_image_0000001178685854](figures/zh-cn_image_0000001178685854.gif) ![zh-cn_image_0000001178685854](figures/zh-cn_image_0000001178685854.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - star-background、star-secondary、star-foreground属性的星级图源必须全部设置，否则默认的星级颜色为灰色，提示图源设置错误。 > - star-background、star-secondary、star-foreground属性的星级图源必须全部设置，否则默认的星级颜色为灰色，提示图源设置错误。
> >
> - star-background、star-secondary、star-foreground属性只支持本地路径图片，图片格式为png和jpg。 > - star-background、star-secondary、star-foreground属性只支持本地路径图片，图片格式为png和jpg。
...@@ -124,10 +124,10 @@ export default { ...@@ -124,10 +124,10 @@ export default {
## 绑定事件 ## 绑定事件
向Rating组件添加change事件，打印当前评分。 向rating组件添加change事件，打印当前评分。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<rating numstars="5" rating="0" onchange="showrating"></rating> <rating numstars="5" rating="0" onchange="showrating"></rating>
...@@ -135,7 +135,8 @@ export default { ...@@ -135,7 +135,8 @@ export default {
``` ```
``` ```css
/* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -151,7 +152,8 @@ rating { ...@@ -151,7 +152,8 @@ rating {
``` ```
``` ```js
// xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
showrating(e) { showrating(e) {
...@@ -170,7 +172,7 @@ export default { ...@@ -170,7 +172,7 @@ export default {
开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。 开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;"> <div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;">
<div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;"> <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
...@@ -197,7 +199,7 @@ export default { ...@@ -197,7 +199,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.myrating:active { .myrating:active {
width: 500px; width: 500px;
...@@ -209,8 +211,8 @@ switch{ ...@@ -209,8 +211,8 @@ switch{
``` ```
``` ```js
/* index.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-components-search.md
浏览文件 @ 87721ce0
# Search # search
提供搜索框组件，用于提供用户搜索内容的输入区域，具体用法请参考[Search](../reference/arkui-js/js-components-basic-search.md)。 提供搜索框组件，用于提供用户搜索内容的输入区域，具体用法请参考[search](../reference/arkui-js/js-components-basic-search.md)。
## 创建Search组件 ## 创建search组件
在pages/index目录下的hml文件中创建一个Search组件。 在pages/index目录下的hml文件中创建一个search组件。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<search></search> <search></search>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
通过设置hint、icon和searchbutton属性设置搜索框的提示文字、图标和末尾搜索按钮的内容。 通过设置hint、icon和searchbutton属性设置搜索框的提示文字、图标和末尾搜索按钮的内容。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<search hint="Please enter the search content" searchbutton="search" icon="/common/search1.png"></search> <search hint="Please enter the search content" searchbutton="search" icon="/common/search1.png"></search>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
通过color、placeholder和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。 通过color、placeholder和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<search hint="Please enter the search content" searchbutton="search" ></search> <search hint="Please enter the search content" searchbutton="search" ></search>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -93,10 +93,10 @@ search{ ...@@ -93,10 +93,10 @@ search{
## 绑定事件 ## 绑定事件
向Search组件添加change、search、submit、share和translate事件，对输入信息进行操作。 向search组件添加change、search、submit、share和translate事件，对输入信息进行操作。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text style="margin-left: -7px;"> <text style="margin-left: -7px;">
...@@ -109,7 +109,7 @@ search{ ...@@ -109,7 +109,7 @@ search{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -128,7 +128,7 @@ text{ ...@@ -128,7 +128,7 @@ text{
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -170,14 +170,14 @@ export default { ...@@ -170,14 +170,14 @@ export default {
## 场景示例 ## 场景示例
在本场景中通过下拉菜单选择Search、Textarea和Input组件来实现搜索和输入效果。 在本场景中通过下拉菜单选择search、Textarea和Input组件来实现搜索和输入效果。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;"> <div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;">
<select class="slt1" id="slt1" onchange="setfield"> <select class="slt1" id="slt1" onchange="setfield">
<option value="search">Search</option> <option value="search">search</option>
<option value="textarea">Textarea</option> <option value="textarea">Textarea</option>
<option value="input">Input</option> <option value="input">Input</option>
</select> </select>
...@@ -197,7 +197,7 @@ export default { ...@@ -197,7 +197,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.field { .field {
width: 80%; width: 80%;
...@@ -214,7 +214,7 @@ export default { ...@@ -214,7 +214,7 @@ export default {
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-slider.md
浏览文件 @ 87721ce0
# Slider开发指导 # slider开发指导
Slider为滑动条组件，用来快速调节音量、亮度等。具体用法请参考[Slider](../reference/arkui-js/js-components-basic-slider.md)。 slider为滑动条组件，用来快速调节音量、亮度等。具体用法请参考[slider](../reference/arkui-js/js-components-basic-slider.md)。
## 创建Slider组件 ## 创建slider组件
在pages/index目录下的hml文件中创建一个Slider组件。 在pages/index目录下的hml文件中创建一个slider组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<slider></slider> <slider></slider>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -35,10 +35,10 @@ Slider为滑动条组件，用来快速调节音量、亮度等。具体用法 ...@@ -35,10 +35,10 @@ Slider为滑动条组件，用来快速调节音量、亮度等。具体用法
## 设置样式和属性 ## 设置样式和属性
Slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。 slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<slider class= "sli"></slider> <slider class= "sli"></slider>
...@@ -46,7 +46,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -46,7 +46,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -68,7 +68,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -68,7 +68,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
通过添加mix、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。 通过添加mix、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider> <slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider>
...@@ -76,7 +76,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -76,7 +76,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -90,7 +90,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -90,7 +90,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
![zh-cn_image_0000001179438692](figures/zh-cn_image_0000001179438692.gif) ![zh-cn_image_0000001179438692](figures/zh-cn_image_0000001179438692.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> mode属性为滑动条样式，可选值为： > mode属性为滑动条样式，可选值为：
> >
> - outset：滑块在滑杆上； > - outset：滑块在滑杆上；
...@@ -103,7 +103,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -103,7 +103,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
向Rating组件添加change事件，添加时需要传入ChangeEvent参数。 向Rating组件添加change事件，添加时需要传入ChangeEvent参数。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>slider start value is {{startValue}}</text> <text>slider start value is {{startValue}}</text>
...@@ -114,7 +114,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -114,7 +114,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -127,7 +127,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ...@@ -127,7 +127,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -159,7 +159,7 @@ export default { ...@@ -159,7 +159,7 @@ export default {
开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。 开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image> <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image>
...@@ -172,7 +172,7 @@ export default { ...@@ -172,7 +172,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -195,7 +195,7 @@ text{ ...@@ -195,7 +195,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
export default{ export default{
data: { data: {
...@@ -215,7 +215,7 @@ export default{ ...@@ -215,7 +215,7 @@ export default{
## 相关实例 ## 相关实例
针对Slider开发，有以下相关实例可供参考： 针对slider开发，有以下相关实例可供参考：
- [`Slider`：滑动条（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider) - [`Slider`：滑动条（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider)
......
zh-cn/application-dev/ui/ui-js-components-stepper.md
浏览文件 @ 87721ce0
# Stepper # stepper开发指导
当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考[Stepper API](../reference/arkui-js/js-components-container-stepper.md)。 当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考[stepper API](../reference/arkui-js/js-components-container-stepper.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 5 开始支持。 > 从API Version 5 开始支持。
## 创建Stepper组件 ## 创建stepper组件
在pages/index目录下的hml文件中创建一个Stepper组件。 在pages/index目录下的hml文件中创建一个stepper组件。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stepper> <stepper>
<stepper-item> <stepper-item>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -49,8 +49,8 @@ text{ ...@@ -49,8 +49,8 @@ text{
页面默认显示索引值为index的步骤。 页面默认显示索引值为index的步骤。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stepper index="2"> <stepper index="2">
<stepper-item> <stepper-item>
...@@ -66,8 +66,8 @@ text{ ...@@ -66,8 +66,8 @@ text{
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
height:100%; height:100%;
...@@ -85,8 +85,8 @@ text{ ...@@ -85,8 +85,8 @@ text{
通过设置label属性，自定义stepper-item的提示按钮。 通过设置label属性，自定义stepper-item的提示按钮。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stepper index="1"> <stepper index="1">
<stepper-item label="{{label_1}}"> <stepper-item label="{{label_1}}">
...@@ -105,8 +105,8 @@ text{ ...@@ -105,8 +105,8 @@ text{
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
height:100%; height:100%;
...@@ -120,8 +120,8 @@ text{ ...@@ -120,8 +120,8 @@ text{
} }
``` ```
``` ```js
/* index.js */ // xxx.js
export default { export default {
data: { data: {
label_1:{ label_1:{
...@@ -147,9 +147,9 @@ export default { ...@@ -147,9 +147,9 @@ export default {
## 设置样式 ## 设置样式
Stepper组件默认填充父容器，通过border和background-color设置边框、背景色。 stepper组件默认填充父容器，通过border和background-color设置边框、背景色。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" > <div class="container" >
<div class="stepperContent"> <div class="stepperContent">
<stepper class="stepperClass"> <stepper class="stepperClass">
...@@ -161,8 +161,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框 ...@@ -161,8 +161,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
height:100%; height:100%;
...@@ -191,14 +191,14 @@ text{ ...@@ -191,14 +191,14 @@ text{
## 添加事件 ## 添加事件
Stepper分别添加finish，change，next，back，skip事件。 stepper分别添加finish，change，next，back，skip事件。
- 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。 - 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。
- 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。 - 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<div > <div >
<stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}"> <stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
...@@ -218,7 +218,7 @@ Stepper分别添加finish，change，next，back，skip事件。 ...@@ -218,7 +218,7 @@ Stepper分别添加finish，change，next，back，skip事件。
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width:100%; width:100%;
...@@ -246,8 +246,8 @@ button{ ...@@ -246,8 +246,8 @@ button{
} }
``` ```
``` ```js
/* index.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -294,9 +294,10 @@ export default { ...@@ -294,9 +294,10 @@ export default {
在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。 在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。
用Stepper组件实现分步，再创建[Toggle](../reference/arkui-js/js-components-basic-toggle.md)组件实现选择显示功能，再使用[Select](../reference/arkui-js/js-components-basic-select.md)组件实现改变选中值动态修改字体颜色或大小。 用stepper组件实现分步，再创建[Toggle](../reference/arkui-js/js-components-basic-toggle.md)组件实现选择显示功能，再使用[Select](../reference/arkui-js/js-components-basic-select.md)组件实现改变选中值动态修改字体颜色或大小。
``` ```html
<!-- xxx.hml -->
<div class="container"> <div class="container">
<stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;"> <stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;">
<stepper-item label="{{label1}}"> <stepper-item label="{{label1}}">
...@@ -337,7 +338,7 @@ export default { ...@@ -337,7 +338,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -358,8 +359,8 @@ export default { ...@@ -358,8 +359,8 @@ export default {
} }
``` ```
``` ```js
/* index.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
import router from '@system.router'; import router from '@system.router';
let myset = new Set(); let myset = new Set();
...@@ -405,6 +406,6 @@ export default { ...@@ -405,6 +406,6 @@ export default {
## 相关实例 ## 相关实例
针对Stepper开发，有以下相关实例可供参考： 针对stepper开发，有以下相关实例可供参考：
- [`StepNavigator`：步骤导航器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator) - [`StepNavigator`：步骤导航器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
zh-cn/application-dev/ui/ui-js-components-svg-graphics.md
浏览文件 @ 87721ce0
...@@ -7,7 +7,7 @@ Svg组件可以用来绘制常见图形和线段，如矩形（&lt;rect&gt;） ...@@ -7,7 +7,7 @@ Svg组件可以用来绘制常见图形和线段，如矩形（&lt;rect&gt;）
在本场景中，绘制各种图形拼接组成一个小房子。 在本场景中，绘制各种图形拼接组成一个小房子。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="1000" height="1000"> <svg width="1000" height="1000">
...@@ -26,7 +26,7 @@ Svg组件可以用来绘制常见图形和线段，如矩形（&lt;rect&gt;） ...@@ -26,7 +26,7 @@ Svg组件可以用来绘制常见图形和线段，如矩形（&lt;rect&gt;）
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
......
zh-cn/application-dev/ui/ui-js-components-svg-overview.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使用。具体用法请参考[Svg](../reference/arkui-js/js-components-svg.md)。 Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使用。具体用法请参考[Svg](../reference/arkui-js/js-components-svg.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 从API version 7开始支持。 > - 从API version 7开始支持。
> >
> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 > - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
...@@ -15,7 +15,7 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使 ...@@ -15,7 +15,7 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使
在pages/index目录下的hml文件中创建一个Svg组件。 在pages/index目录下的hml文件中创建一个Svg组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> </svg> <svg width="400" height="400"> </svg>
...@@ -23,7 +23,7 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使 ...@@ -23,7 +23,7 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -46,15 +46,18 @@ svg{ ...@@ -46,15 +46,18 @@ svg{
通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。 通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400" viewBox="0 0 100 100"> <svg class="rect" width="100" height="100" x="20" y="10"> </svg> </svg> <svg width="400" height="400" viewBox="0 0 100 100">
<svg class="rect" width="100" height="100" x="20" y="10">
</svg>
</svg>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -74,7 +77,7 @@ svg{ ...@@ -74,7 +77,7 @@ svg{
![zh-cn_image_0000001218599996](figures/zh-cn_image_0000001218599996.png) ![zh-cn_image_0000001218599996](figures/zh-cn_image_0000001218599996.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - x和y设置的的是当前Svg的x轴和y轴坐标，如果当前Svg为根节点，x轴和y轴属性无效。 > - x和y设置的的是当前Svg的x轴和y轴坐标，如果当前Svg为根节点，x轴和y轴属性无效。
> >
> - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。 > - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。
......
zh-cn/application-dev/ui/ui-js-components-svg-path.md
浏览文件 @ 87721ce0
...@@ -3,16 +3,19 @@ ...@@ -3,16 +3,19 @@
Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现 饼状图效果。 Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现 饼状图效果。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="100" y="400"> <svg fill="#00FF00" x="100" y="400">
<path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" > </path> <path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5"> </path> <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" >
</path>
<path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5">
</path>
</svg> </svg>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: row; flex-direction: row;
...@@ -28,7 +31,7 @@ Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（ ...@@ -28,7 +31,7 @@ Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（
![zh-cn_image_0000001181511962](figures/zh-cn_image_0000001181511962.png) ![zh-cn_image_0000001181511962](figures/zh-cn_image_0000001181511962.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。 > - M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。
> >
> - L/l = lineto 参数x和y表示一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。 > - L/l = lineto 参数x和y表示一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
......
zh-cn/application-dev/ui/ui-js-components-svg-text.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ Svg组件还可以绘制文本。 ...@@ -6,7 +6,7 @@ Svg组件还可以绘制文本。
## 文本 ## 文本
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 文本的展示内容需要写在元素标签text内，可嵌套tspan子元素标签分段。 > - 文本的展示内容需要写在元素标签text内，可嵌套tspan子元素标签分段。
> >
> - 只支持被父元素标签svg嵌套。 > - 只支持被父元素标签svg嵌套。
...@@ -16,7 +16,7 @@ Svg组件还可以绘制文本。 ...@@ -16,7 +16,7 @@ Svg组件还可以绘制文本。
通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。 通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -36,7 +36,7 @@ Svg组件还可以绘制文本。 ...@@ -36,7 +36,7 @@ Svg组件还可以绘制文本。
textpath文本内容沿着属性path中的路径绘制文本。 textpath文本内容沿着属性path中的路径绘制文本。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="100" y="400"> <svg fill="#00FF00" x="100" y="400">
......
zh-cn/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ 87721ce0
# Swiper开发指导 # swiper开发指导
Swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[Swiper](../reference/arkui-js/js-components-container-swiper.md)。 swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[swiper](../reference/arkui-js/js-components-container-swiper.md)。
## 创建Swiper组件 ## 创建swiper组件
在pages/index目录下的hml文件中创建一个Swiper组件。 在pages/index目录下的hml文件中创建一个swiper组件。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper> <swiper>
...@@ -25,7 +25,7 @@ Swiper为滑动容器，提供切换显示子组件的能力。具体用法请 ...@@ -25,7 +25,7 @@ Swiper为滑动容器，提供切换显示子组件的能力。具体用法请
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -56,16 +56,16 @@ text{ ...@@ -56,16 +56,16 @@ text{
![zh-cn_image_0000001181495038](figures/zh-cn_image_0000001181495038.gif) ![zh-cn_image_0000001181495038](figures/zh-cn_image_0000001181495038.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> Swiper组件支持除&lt;list&gt;之外的子组件。 > swiper组件支持除&lt;list&gt;之外的子组件。
## 添加属性 ## 添加属性
Swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。 swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500" <swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
...@@ -87,7 +87,7 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属 ...@@ -87,7 +87,7 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -115,20 +115,20 @@ text{ ...@@ -115,20 +115,20 @@ text{
![zh-cn_image_0000001181655292](figures/zh-cn_image_0000001181655292.gif) ![zh-cn_image_0000001181655292](figures/zh-cn_image_0000001181655292.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 设置indicator（是否启用导航点指示器）属性为true时digital（是否启用数字导航点）属性才会生效。 > - 设置indicator（是否启用导航点指示器）属性为true时digital（是否启用数字导航点）属性才会生效。
> >
> - Swiper子组件的个数大于等于2时设置的loop属性才会生效。 > - swiper子组件的个数大于等于2时设置的loop属性才会生效。
> >
> - scrolleffect属性仅在loop属性值为false时生效。 > - scrolleffect属性仅在loop属性值为false时生效。
## 设置样式 ## 设置样式
设置Swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。 设置swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" > <swiper index="1" autoplay="true" interval="2000" duration="500" >
...@@ -146,7 +146,7 @@ text{ ...@@ -146,7 +146,7 @@ text{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -184,10 +184,10 @@ text{ ...@@ -184,10 +184,10 @@ text{
## 绑定事件 ## 绑定事件
创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。Swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。 创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper"> <swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
...@@ -218,7 +218,7 @@ text{ ...@@ -218,7 +218,7 @@ text{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -259,7 +259,8 @@ select{ ...@@ -259,7 +259,8 @@ select{
``` ```
``` ```js
// xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default{ export default{
change(e){ change(e){
...@@ -285,10 +286,10 @@ export default{ ...@@ -285,10 +286,10 @@ export default{
## 场景示例 ## 场景示例
本场景中使用Swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。 本场景中使用swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper duration="500" indicator="false" id="swiper" onchange="change"> <swiper duration="500" indicator="false" id="swiper" onchange="change">
...@@ -305,7 +306,7 @@ export default{ ...@@ -305,7 +306,7 @@ export default{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -340,8 +341,8 @@ swiper{ ...@@ -340,8 +341,8 @@ swiper{
``` ```
``` ```js
// index.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data:{
...@@ -367,6 +368,6 @@ export default { ...@@ -367,6 +368,6 @@ export default {
## 相关实例 ## 相关实例
针对Swiper开发，有以下相关实例可供参考： 针对swiper开发，有以下相关实例可供参考：
- [`Swiper`：内容滑动容器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper) - [`Swiper`：内容滑动容器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 87721ce0
# Switch开发指导 # switch开发指导
Switch为开关选择器，切换开启或关闭状态。具体用法请参考[Switch](../reference/arkui-js/js-components-basic-switch.md)。 switch为开关选择器，切换开启或关闭状态。具体用法请参考[switch](../reference/arkui-js/js-components-basic-switch.md)。
## 创建Switch组件 ## 创建switch组件
在pages/index目录下的hml文件中创建一个Switch组件。 在pages/index目录下的hml文件中创建一个switch组件。
``` ```html
<!-- xxx.hml -->
<div class="container"> <div class="container">
<switch></switch> <switch></switch>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -33,7 +34,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S ...@@ -33,7 +34,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch> <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
...@@ -41,7 +42,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S ...@@ -41,7 +42,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -62,7 +63,7 @@ switch{ ...@@ -62,7 +63,7 @@ switch{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -84,7 +85,7 @@ export default { ...@@ -84,7 +85,7 @@ export default {
![zh-cn_image_0000001221030133](figures/zh-cn_image_0000001221030133.gif) ![zh-cn_image_0000001221030133](figures/zh-cn_image_0000001221030133.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。 > 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。
...@@ -92,9 +93,9 @@ export default { ...@@ -92,9 +93,9 @@ export default {
在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。 在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。
实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 实现方法：创建switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="change"> <div class="change">
...@@ -113,7 +114,7 @@ export default { ...@@ -113,7 +114,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -168,7 +169,7 @@ switch{ ...@@ -168,7 +169,7 @@ switch{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @ 87721ce0
# Text # text开发指导
Text是文本组件，用于呈现一段文本信息。具体用法请参考[Text API](../reference/arkui-js/js-components-basic-text.md)。 text是文本组件，用于呈现一段文本信息。具体用法请参考[text API](../reference/arkui-js/js-components-basic-text.md)。
## 创建Text组件 ## 创建text组件
在pages/index目录下的hml文件中创建一个Text组件。 在pages/index目录下的hml文件中创建一个text组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="text-align: center;justify-content: center; align-items: center;"> <div class="container" style="text-align: center;justify-content: center; align-items: center;">
<text>Hello World</text> <text>Hello World</text>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -29,13 +29,13 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -29,13 +29,13 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
![zh-cn_image_0000001211383427](figures/zh-cn_image_0000001211383427.png) ![zh-cn_image_0000001211383427](figures/zh-cn_image_0000001211383427.png)
## 设置Text组件样式和属性 ## 设置text组件样式和属性
- 添加文本样式 - 添加文本样式
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;"> <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true"> <text style="color: blueviolet; font-size: 40px; allow-scale:true">
...@@ -47,7 +47,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -47,7 +47,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -65,9 +65,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -65,9 +65,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
- 添加划线 - 添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 Text自有样式。 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 text自有样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline"> <text style="text-decoration:underline">
...@@ -79,7 +79,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -79,7 +79,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -101,7 +101,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -101,7 +101,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="text"> <text class="text">
...@@ -110,7 +110,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -110,7 +110,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -136,9 +136,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -136,9 +136,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
- 设置文本折行 - 设置文本折行
设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。 设置word-break属性对文本内容做断行处理，word-break枚举值请参考text自有样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -152,7 +152,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -152,7 +152,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -190,9 +190,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -190,9 +190,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
​ ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) ​ ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
- Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件 - text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;"> <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
<text style="font-size: 45px;"> <text style="font-size: 45px;">
...@@ -208,17 +208,17 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ...@@ -208,17 +208,17 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
``` ```
![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png) ![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。 > - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
> >
> - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。 > - 在使用Span子组件时，注意text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。
## 场景示例 ## 场景示例
Text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。 text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div style="align-items: center;justify-content: center;"> <div style="align-items: center;justify-content: center;">
...@@ -237,7 +237,7 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属 ...@@ -237,7 +237,7 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -255,7 +255,7 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属 ...@@ -255,7 +255,7 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -274,6 +274,6 @@ export default { ...@@ -274,6 +274,6 @@ export default {
## 相关实例 ## 相关实例
针对Text开发，有以下相关实例可供参考： 针对text开发，有以下相关实例可供参考：
- [`JsTextComponents`：基础组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents) - [`JstextComponents`：基础组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)
zh-cn/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @ 87721ce0
# Toolbar开发指导 # toolbar开发指导
Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。具体用法请参考[Toolbar](../reference/arkui-js/js-components-basic-toolbar.md)。 toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。具体用法请参考[toolbar](../reference/arkui-js/js-components-basic-toolbar.md)。
## 创建Toolbar组件 ## 创建toolbar组件
在pages/index目录下的hml文件中创建一个Toolbar组件。 在pages/index目录下的hml文件中创建一个toolbar组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar style="background-color: #F1F3F5;"> <toolbar style="background-color: #F1F3F5;">
...@@ -20,7 +20,7 @@ Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项 ...@@ -20,7 +20,7 @@ Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -40,9 +40,9 @@ toolbar-item{ ...@@ -40,9 +40,9 @@ toolbar-item{
## 添加子组件 ## 添加子组件
Toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。 toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar> <toolbar>
...@@ -57,7 +57,7 @@ toolbar-item{ ...@@ -57,7 +57,7 @@ toolbar-item{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -77,11 +77,11 @@ toolbar-item{ ...@@ -77,11 +77,11 @@ toolbar-item{
## 设置样式 ## 设置样式
设置position样式控制Toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。 设置position样式控制toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;"> <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
...@@ -95,7 +95,7 @@ toolbar-item{ ...@@ -95,7 +95,7 @@ toolbar-item{
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -123,7 +123,7 @@ toolbar-item{ ...@@ -123,7 +123,7 @@ toolbar-item{
分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。 分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;"> <toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
...@@ -135,7 +135,7 @@ toolbar-item{ ...@@ -135,7 +135,7 @@ toolbar-item{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -151,7 +151,7 @@ toolbar-item{ ...@@ -151,7 +151,7 @@ toolbar-item{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -171,8 +171,8 @@ export default { ...@@ -171,8 +171,8 @@ export default {
![zh-cn_image_0000001218439306](figures/zh-cn_image_0000001218439306.gif) ![zh-cn_image_0000001218439306](figures/zh-cn_image_0000001218439306.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> Toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。 > toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。
## 场景示例 ## 场景示例
...@@ -181,7 +181,7 @@ export default { ...@@ -181,7 +181,7 @@ export default {
使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。 使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="{{imgList[active]}}"></image> <image src="{{imgList[active]}}"></image>
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -208,7 +208,7 @@ toolbar-item{ ...@@ -208,7 +208,7 @@ toolbar-item{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -233,6 +233,6 @@ export default { ...@@ -233,6 +233,6 @@ export default {
## 相关实例 ## 相关实例
针对Toolbar开发，有以下相关实例可供参考： 针对toolbar开发，有以下相关实例可供参考：
- [`Toolbar`：工具栏（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar) - [`Toolbar`：工具栏（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar)
zh-cn/application-dev/ui/ui-js-custom-components.md
浏览文件 @ 87721ce0
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
- 构建自定义组件 - 构建自定义组件
``` ```html
<!-- comp.hml --> <!-- comp.hml -->
<div class="item"> <div class="item">
<text class="title-style">{{title}}</text> <text class="title-style">{{title}}</text>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
``` ```
``` ```css
/* comp.css */ /* comp.css */
.item { .item {
width: 700px; width: 700px;
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
} }
``` ```
``` ```js
// comp.js // comp.js
export default { export default {
props: { props: {
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
``` ```
- 引入自定义组件 - 引入自定义组件
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element> <element name='comp' src='../../common/component/comp.hml'></element>
<div class="container"> <div class="container">
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #f8f8ff; background-color: #f8f8ff;
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-ts-basic-components-button.md
浏览文件 @ 87721ce0
...@@ -12,7 +12,6 @@ Button通过调用接口来创建，接口调用有以下两种形式： ...@@ -12,7 +12,6 @@ Button通过调用接口来创建，接口调用有以下两种形式：
`Button(options?: {type?: ButtonType, stateEffect?: boolean})`，该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。 `Button(options?: {type?: ButtonType, stateEffect?: boolean})`，该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
``` ```
Button({ type: ButtonType.Normal, stateEffect: true }) { Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() { Row() {
...@@ -22,13 +21,13 @@ Button通过调用接口来创建，接口调用有以下两种形式： ...@@ -22,13 +21,13 @@ Button通过调用接口来创建，接口调用有以下两种形式：
}.borderRadius(8).backgroundColor(0x317aff).width(90) }.borderRadius(8).backgroundColor(0x317aff).width(90)
``` ```
![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png) ![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png)
- 创建不包含子组件的按钮 - 创建不包含子组件的按钮
`Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`，该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。 `Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`，该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
``` ```
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8) .borderRadius(8)
...@@ -36,6 +35,7 @@ Button通过调用接口来创建，接口调用有以下两种形式： ...@@ -36,6 +35,7 @@ Button通过调用接口来创建，接口调用有以下两种形式：
.width(90) .width(90)
``` ```
![zh-cn_image_0000001215796030](figures/zh-cn_image_0000001215796030.png) ![zh-cn_image_0000001215796030](figures/zh-cn_image_0000001215796030.png)
...@@ -45,7 +45,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -45,7 +45,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
- 胶囊按钮（默认类型） - 胶囊按钮（默认类型）
``` ```ts
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
.width(90) .width(90)
...@@ -55,7 +55,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -55,7 +55,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
- 圆形按钮 - 圆形按钮
``` ```ts
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) Button('Circle', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
.width(90) .width(90)
...@@ -71,7 +71,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -71,7 +71,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。 一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
``` ```ts
Button('circle border', { type: ButtonType.Normal }) Button('circle border', { type: ButtonType.Normal })
.borderRadius(20) .borderRadius(20)
``` ```
...@@ -82,7 +82,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -82,7 +82,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
通过添加文本样式设置按钮文本的展示样式。 通过添加文本样式设置按钮文本的展示样式。
``` ```ts
Button('font style', { type: ButtonType.Normal }) Button('font style', { type: ButtonType.Normal })
.fontSize(20) .fontSize(20)
.fontColor(Color.Red) .fontColor(Color.Red)
...@@ -95,7 +95,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -95,7 +95,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
添加backgroundColor属性设置按钮的背景颜色。 添加backgroundColor属性设置按钮的背景颜色。
``` ```ts
Button('background color').backgroundColor(0xF55A42) Button('background color').backgroundColor(0xF55A42)
``` ```
...@@ -105,7 +105,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -105,7 +105,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
为删除操作创建一个按钮。 为删除操作创建一个按钮。
``` ```ts
Button({ type: ButtonType.Circle, stateEffect: true }) { Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.ic_public_delete_filled')).width(30).height(30) Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
}.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
...@@ -119,7 +119,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 ...@@ -119,7 +119,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
Button组件通常用于触发某些操作，可以在绑定onClick事件来响应点击操作后的自定义行为。 Button组件通常用于触发某些操作，可以在绑定onClick事件来响应点击操作后的自定义行为。
``` ```ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.onClick(()=>{ .onClick(()=>{
console.info('Button onClick') console.info('Button onClick')
...@@ -133,7 +133,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -133,7 +133,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
可以将按钮用于启动操作的任何用户界面元素。按钮会根据用户的操作触发相应的事件。如，在List容器里边通过点击按钮进行页面跳转： 可以将按钮用于启动操作的任何用户界面元素。按钮会根据用户的操作触发相应的事件。如，在List容器里边通过点击按钮进行页面跳转：
``` ```ts
// xxx.js
import router from '@ohos.router' import router from '@ohos.router'
@Entry @Entry
...@@ -173,8 +174,9 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -173,8 +174,9 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。 在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。
``` ```ts
@Entry // xxx.js
@Entry
@Component @Component
struct ButtonCase2 { struct ButtonCase2 {
build() { build() {
......
zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md
浏览文件 @ 87721ce0
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
1. 将Category枚举类型引入FoodCategoryList页面。 1. 将Category枚举类型引入FoodCategoryList页面。
``` ```ts
import { Category, FoodData } from '../model/FoodData' import { Category, FoodData } from '../model/FoodData'
``` ```
2. 创建FoodCategoryList和FoodCategory组件，其中FoodCategoryList作为新的页面入口组件，在入口组件调用initializeOnStartup方法。 2. 创建FoodCategoryList和FoodCategory组件，其中FoodCategoryList作为新的页面入口组件，在入口组件调用initializeOnStartup方法。
``` ```ts
@Component @Component
struct FoodList { struct FoodList {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
``` ```
3. 在FoodCategoryList组件内创建showList成员变量，用于控制List布局和Grid布局的渲染切换。需要用到条件渲染语句if...else...。 3. 在FoodCategoryList组件内创建showList成员变量，用于控制List布局和Grid布局的渲染切换。需要用到条件渲染语句if...else...。
``` ```ts
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
``` ```
4. 在页面右上角创建切换List/Grid布局的图标。设置Stack对齐方式为顶部尾部对齐TopEnd，创建Image组件，设置其点击事件，即showList取反。 4. 在页面右上角创建切换List/Grid布局的图标。设置Stack对齐方式为顶部尾部对齐TopEnd，创建Image组件，设置其点击事件，即showList取反。
``` ```ts
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
``` ```
5. 添加\@State装饰器。点击右上角的switch标签后，页面没有任何变化，这是因为showList不是有状态数据，它的改变不会触发页面的刷新。需要为其添加\@State装饰器，使其成为状态数据，它的改变会引起其所在组件的重新渲染。 5. 添加\@State装饰器。点击右上角的switch标签后，页面没有任何变化，这是因为showList不是有状态数据，它的改变不会触发页面的刷新。需要为其添加\@State装饰器，使其成为状态数据，它的改变会引起其所在组件的重新渲染。
``` ```ts
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
![zh-cn_image_0000001170411978](figures/zh-cn_image_0000001170411978.gif) ![zh-cn_image_0000001170411978](figures/zh-cn_image_0000001170411978.gif)
6. 创建显示所有食物的页签（All）。在FoodCategory组件内创建Tabs组件和其子组件TabContent，设置tabBar为All。设置TabBars的宽度为280，布局模式为Scrollable，即超过总长度后可以滑动。Tabs是一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图TabContent。 6. 创建显示所有食物的页签（All）。在FoodCategory组件内创建Tabs组件和其子组件TabContent，设置tabBar为All。设置TabBars的宽度为280，布局模式为Scrollable，即超过总长度后可以滑动。Tabs是一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图TabContent。
``` ```ts
@Component @Component
struct FoodCategory { struct FoodCategory {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
![zh-cn_image_0000001204538065](figures/zh-cn_image_0000001204538065.png) ![zh-cn_image_0000001204538065](figures/zh-cn_image_0000001204538065.png)
7. 创建FoodGrid组件，作为TabContent的子组件。 7. 创建FoodGrid组件，作为TabContent的子组件。
``` ```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
``` ```
8. 实现2 \* 6的网格布局（一共12个食物数据资源）。创建Grid组件，设置列数columnsTemplate('1fr 1fr')，行数rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')，行间距和列间距rowsGap和columnsGap为8。创建Scroll组件，使其可以滑动。 8. 实现2 \* 6的网格布局（一共12个食物数据资源）。创建Grid组件，设置列数columnsTemplate('1fr 1fr')，行数rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')，行间距和列间距rowsGap和columnsGap为8。创建Scroll组件，使其可以滑动。
``` ```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
``` ```
9. 创建FoodGridItem组件，展示食物图片、名称和卡路里，实现其UI布局，为GridItem的子组件。每个FoodGridItem高度为184，行间距为8，设置Grid总高度为(184 + 8) \* 6 - 8 = 1144。 9. 创建FoodGridItem组件，展示食物图片、名称和卡路里，实现其UI布局，为GridItem的子组件。每个FoodGridItem高度为184，行间距为8，设置Grid总高度为(184 + 8) \* 6 - 8 = 1144。
``` ```ts
@Component @Component
struct FoodGridItem { struct FoodGridItem {
private foodItem: FoodData private foodItem: FoodData
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
![zh-cn_image_0000001170167520](figures/zh-cn_image_0000001170167520.gif) ![zh-cn_image_0000001170167520](figures/zh-cn_image_0000001170167520.gif)
10. 创建展示蔬菜（Category.Vegetable）、水果（Category.Fruit）、坚果（Category.Nut）、海鲜（Category.SeaFood）和甜品（Category.Dessert）分类的页签。 10. 创建展示蔬菜（Category.Vegetable）、水果（Category.Fruit）、坚果（Category.Nut）、海鲜（Category.SeaFood）和甜品（Category.Dessert）分类的页签。
``` ```ts
@Component @Component
struct FoodCategory { struct FoodCategory {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -283,7 +283,7 @@ ...@@ -283,7 +283,7 @@
11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同，所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。 11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同，所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。
创建gridRowTemplate和HeightValue成员变量，通过成员变量设置Grid行数和高度。 创建gridRowTemplate和HeightValue成员变量，通过成员变量设置Grid行数和高度。
``` ```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -312,7 +312,7 @@ ...@@ -312,7 +312,7 @@
调用aboutToAppear接口计算行数（gridRowTemplate ）和高度（heightValue）。 调用aboutToAppear接口计算行数（gridRowTemplate ）和高度（heightValue）。
``` ```ts
aboutToAppear() { aboutToAppear() {
var rows = Math.round(this.foodItems.length / 2); var rows = Math.round(this.foodItems.length / 2);
this.gridRowTemplate = '1fr '.repeat(rows); this.gridRowTemplate = '1fr '.repeat(rows);
...@@ -324,7 +324,7 @@ ...@@ -324,7 +324,7 @@
![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png)
``` ```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
......
zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
1. 在pages目录新建页面FoodCategoryList.ets，将index.ets改名为FoodDetail.ets，并将其添加到config.json文件下的pages标签，位于第一序位的页面为首页。 1. 在pages目录新建页面FoodCategoryList.ets，将index.ets改名为FoodDetail.ets，并将其添加到config.json文件下的pages标签，位于第一序位的页面为首页。
``` ```json
"js": [ "js": [
{ {
"pages": [ "pages": [
......
zh-cn/application-dev/ui/ui-ts-components-web.md
浏览文件 @ 87721ce0
...@@ -6,7 +6,7 @@ Web是提供网页显示能力的组件，具体用法请参考 [Web API](../ref ...@@ -6,7 +6,7 @@ Web是提供网页显示能力的组件，具体用法请参考 [Web API](../ref
在main/ets/MainAbility/pages目录下的ets文件中创建一个Web组件。在web组件中通过src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于调用Web组件的方法。 在main/ets/MainAbility/pages目录下的ets文件中创建一个Web组件。在web组件中通过src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于调用Web组件的方法。
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -24,7 +24,7 @@ Web是提供网页显示能力的组件，具体用法请参考 [Web API](../ref ...@@ -24,7 +24,7 @@ Web是提供网页显示能力的组件，具体用法请参考 [Web API](../ref
Web组件的使用需要添加丰富的页面样式和功能属性。设置height、padding样式可为Web组件添加高和内边距，设置fileAccess属性可为Web组件添加文件访问权限，设置javaScriptAccess属性为true使Web组件具有执行JavaScript代码的能力。 Web组件的使用需要添加丰富的页面样式和功能属性。设置height、padding样式可为Web组件添加高和内边距，设置fileAccess属性可为Web组件添加文件访问权限，设置javaScriptAccess属性为true使Web组件具有执行JavaScript代码的能力。
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -52,7 +52,7 @@ struct WebComponent { ...@@ -52,7 +52,7 @@ struct WebComponent {
为Web组件添加onProgressChange事件，该事件回调Web引擎加载页面的进度值。将该进度值赋值给Progress组件的value，控制Progress组件的状态。当进度为100%时隐藏Progress组件，Web页面加载完成。 为Web组件添加onProgressChange事件，该事件回调Web引擎加载页面的进度值。将该进度值赋值给Progress组件的value，控制Progress组件的状态。当进度为100%时隐藏Progress组件，Web页面加载完成。
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -91,7 +91,7 @@ struct WebComponent { ...@@ -91,7 +91,7 @@ struct WebComponent {
``` ```
在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是网页加载完成时的回调，runJavaScript方法可以执行HTML中的JavaScript脚本。当页面加载完成时，触发onPageEnd事件，调用HTML文件中的test方法，在控制台打印信息。 在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是网页加载完成时的回调，runJavaScript方法可以执行HTML中的JavaScript脚本。当页面加载完成时，触发onPageEnd事件，调用HTML文件中的test方法，在控制台打印信息。
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -136,7 +136,7 @@ struct WebComponent { ...@@ -136,7 +136,7 @@ struct WebComponent {
在main/resources/rawfile目录下创建一个HTML文件。 在main/resources/rawfile目录下创建一个HTML文件。
``` ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
...@@ -155,7 +155,7 @@ struct WebComponent { ...@@ -155,7 +155,7 @@ struct WebComponent {
该场景实现了Web组件中视频的动态播放。首先在HTML页面内嵌入视频资源，再使用Web组件的控制器调用onActive和onInactive方法激活和暂停页面渲染。点击onInactive按钮，Web页面停止渲染，视频暂停播放；点击onActive按钮，激活Web组件，视频继续播放。 该场景实现了Web组件中视频的动态播放。首先在HTML页面内嵌入视频资源，再使用Web组件的控制器调用onActive和onInactive方法激活和暂停页面渲染。点击onInactive按钮，Web页面停止渲染，视频暂停播放；点击onActive按钮，激活Web组件，视频继续播放。
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -180,7 +180,7 @@ struct WebComponent { ...@@ -180,7 +180,7 @@ struct WebComponent {
} }
``` ```
``` ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
......
zh-cn/application-dev/ui/ui-ts-components.md
浏览文件 @ 87721ce0
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
自定义组件的声明方式为： 自定义组件的声明方式为：
``` ```ts
@Component @Component
struct MyComponent {} struct MyComponent {}
``` ```
在IDE创建工程模板中，MyComponent就是一个可以居中显示文字的自定义组件。开发者可以在Component的build方法里描述自己的UI结构，但需要遵循Builder的接口约束。 在IDE创建工程模板中，MyComponent就是一个可以居中显示文字的自定义组件。开发者可以在Component的build方法里描述自己的UI结构，但需要遵循Builder的接口约束。
``` ```ts
interface Builder { interface Builder {
build: () => void build: () => void
} }
......
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 87721ce0
...@@ -17,7 +17,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -17,7 +17,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。 - FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
``` ```ts
Flex({ direction: FlexDirection.Row }) { Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
...@@ -33,7 +33,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -33,7 +33,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。 - FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。
``` ```ts
Flex({ direction: FlexDirection.RowReverse }) { Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
...@@ -49,7 +49,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -49,7 +49,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。 - FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
``` ```ts
Flex({ direction: FlexDirection.Column }) { Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
...@@ -65,7 +65,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -65,7 +65,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。 - FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。
``` ```ts
Flex({ direction: FlexDirection.ColumnReverse }) { Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
...@@ -86,7 +86,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -86,7 +86,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。 - FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
``` ```ts
Flex({ wrap: FlexWrap.NoWrap }) { Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
...@@ -101,7 +101,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -101,7 +101,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexWrap.Wrap：换行。 - FlexWrap.Wrap：换行。
``` ```ts
Flex({ wrap: FlexWrap.Wrap }) { Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
...@@ -116,7 +116,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -116,7 +116,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexWrap.WrapReverse：换行，且与行排列方向相反。 - FlexWrap.WrapReverse：换行，且与行排列方向相反。
``` ```ts
Flex({ wrap: FlexWrap.WrapReverse}) { Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
...@@ -139,7 +139,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -139,7 +139,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 - FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
``` ```ts
Flex({ justifyContent: FlexAlign.Start }) { Flex({ justifyContent: FlexAlign.Start }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -154,7 +154,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -154,7 +154,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 - FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
``` ```ts
Flex({ justifyContent: FlexAlign.Center }) { Flex({ justifyContent: FlexAlign.Center }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -169,7 +169,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -169,7 +169,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexAlign.End: 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。 - FlexAlign.End: 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
``` ```ts
Flex({ justifyContent: FlexAlign.End }) { Flex({ justifyContent: FlexAlign.End }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -184,7 +184,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -184,7 +184,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexAlign.SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 - FlexAlign.SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween }) { Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -199,7 +199,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -199,7 +199,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexAlign.SpaceAround: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 - FlexAlign.SpaceAround: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -214,7 +214,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -214,7 +214,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- FlexAlign.SpaceEvenly: Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 - FlexAlign.SpaceEvenly: Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -234,7 +234,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -234,7 +234,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- ItemAlign.Auto: 使用Flex容器中默认配置。 - ItemAlign.Auto: 使用Flex容器中默认配置。
``` ```ts
Flex({ alignItems: ItemAlign.Auto }) { Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -249,7 +249,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -249,7 +249,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- ItemAlign.Start: 交叉轴方向首部对齐。 - ItemAlign.Start: 交叉轴方向首部对齐。
``` ```ts
Flex({ alignItems: ItemAlign.Start }) { Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -264,7 +264,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -264,7 +264,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- ItemAlign.Center: 交叉轴方向居中对齐。 - ItemAlign.Center: 交叉轴方向居中对齐。
``` ```ts
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -279,7 +279,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -279,7 +279,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- ItemAlign.End：交叉轴方向底部对齐。 - ItemAlign.End：交叉轴方向底部对齐。
``` ```ts
Flex({ alignItems: ItemAlign.End }) { Flex({ alignItems: ItemAlign.End }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -294,7 +294,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -294,7 +294,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 - ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
``` ```ts
Flex({ alignItems: ItemAlign.Stretch }) { Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -309,7 +309,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -309,7 +309,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
- ItemAlign.Baseline：交叉轴方向文本基线对齐。 - ItemAlign.Baseline：交叉轴方向文本基线对齐。
``` ```ts
Flex({ alignItems: ItemAlign.Baseline }) { Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -344,7 +344,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 ...@@ -344,7 +344,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
可使用弹性布局做出子元素排列方式为水平方向排列，且子元素的总宽度超出父元素的宽度不换行，子元素在水平方向两端对齐，中间间距由除首尾外的子元素平分，竖直方向上子元素居中的效果。 可使用弹性布局做出子元素排列方式为水平方向排列，且子元素的总宽度超出父元素的宽度不换行，子元素在水平方向两端对齐，中间间距由除首尾外的子元素平分，竖直方向上子元素居中的效果。
``` ```ts
@Entry @Entry
@Component @Component
struct FlexExample { struct FlexExample {
......
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ 87721ce0
...@@ -50,13 +50,13 @@ ...@@ -50,13 +50,13 @@
- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp： - 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
``` ```ts
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
``` ```
栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如： 栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
``` ```ts
GridContainer() {} GridContainer() {}
``` ```
...@@ -64,10 +64,9 @@ ...@@ -64,10 +64,9 @@
- 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如： - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
``` ```ts
GridContainer({ sizeType: SizeType.SM) { GridContainer({ sizeType: SizeType.SM) {
Row() { Row() {
Text('1') Text('1')
.useSizeType({ .useSizeType({
xs: { span: 2}, xs: { span: 2},
...@@ -85,7 +84,7 @@ ...@@ -85,7 +84,7 @@
栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offest表示列偏移量，指将组件放置在哪一个columns上。 如： 栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offest表示列偏移量，指将组件放置在哪一个columns上。 如：
``` ```ts
GridContainer() { GridContainer() {
Row() { Row() {
Text('1') Text('1')
...@@ -103,7 +102,7 @@ GridContainer() { ...@@ -103,7 +102,7 @@ GridContainer() {
使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。 使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。
``` ```ts
@Entry @Entry
@Component @Component
struct GridContainerExample { struct GridContainerExample {
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 87721ce0
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
``` ```
然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如： 然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如：
``` ```ts
listener = mediaquery.matchMediaSync('(orientation: landscape)') listener = mediaquery.matchMediaSync('(orientation: landscape)')
``` ```
最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如： 最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如：
``` ```ts
onPortrait(mediaQueryResult) { onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
// do something here // do something here
...@@ -63,8 +63,8 @@ listener.on('change', onPortrait) ...@@ -63,8 +63,8 @@ listener.on('change', onPortrait)
| 类型 | 说明 | | 类型 | 说明 |
| -------- | ---------------------------------------- | | -------- | ---------------------------------------- |
| and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | | and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用not运算符时必须指定媒体类型。 | | not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用only时必须指定媒体类型。 | | only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 |
| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | | ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | | or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
...@@ -142,10 +142,12 @@ listener.on('change', onPortrait) ...@@ -142,10 +142,12 @@ listener.on('change', onPortrait)
} }
} }
``` ```
横屏下文本内容为Landscape，颜色为#FFD700。<br/> 横屏下文本内容为Landscape，颜色为#FFD700。
![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png) ![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png)
非横屏下文本内容为Portrait，颜色为#DB7093。<br/> 非横屏下文本内容为Portrait，颜色为#DB7093。
![zh-cn_image_0000001263074739](figures/zh-cn_image_0000001263074739.png) ![zh-cn_image_0000001263074739](figures/zh-cn_image_0000001263074739.png)
## 相关实例 ## 相关实例
......
zh-cn/application-dev/ui/ui-ts-local-storage.md
浏览文件 @ 87721ce0
...@@ -31,7 +31,7 @@ constructor(initializingProperties?: Object) ...@@ -31,7 +31,7 @@ constructor(initializingProperties?: Object)
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| ---------------------- | ------ | :--: | ------ | ------------------------------------------------------------ | | ---------------------- | ------ | :--: | ---- | ---------------------------------------- |
| initializingProperties | Object | 否 | - | object.keys(obj)返回的所有对象属性及其值都将添加到LocalStorage。 | | initializingProperties | Object | 否 | - | object.keys(obj)返回的所有对象属性及其值都将添加到LocalStorage。 |
...@@ -45,13 +45,13 @@ has(propName: string): boolean ...@@ -45,13 +45,13 @@ has(propName: string): boolean
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | -------------- | | -------- | ------ | :--: | ---- | ------- |
| propName | string | 是 | - | 属性的属性值。 | | propName | string | 是 | - | 属性的属性值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------- | -------------------------- | | ------- | ------------- |
| boolean | 返回属性的属性值是否存在。 | | boolean | 返回属性的属性值是否存在。 |
...@@ -65,13 +65,13 @@ get\<T>(propName: string): T ...@@ -65,13 +65,13 @@ get\<T>(propName: string): T
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | ------------------- | | -------- | ------ | :--: | ---- | ----------- |
| propName | string | 是 | - | 要获取对应的key值。 | | propName | string | 是 | - | 要获取对应的key值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| -------------- | ------------------------------------------------------- | | -------------- | ---------------------------------------- |
| T \| undefined | 当keyvalue存在时，返回keyvalue值。不存在返回undefined。 | | T \| undefined | 当keyvalue存在时，返回keyvalue值。不存在返回undefined。 |
...@@ -85,14 +85,14 @@ set\<T>(propName: string, newValue: T): boolean ...@@ -85,14 +85,14 @@ set\<T>(propName: string, newValue: T): boolean
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | ----------------- | | -------- | ------ | :--: | ---- | ----------- |
| propName | string | 是 | - | 要设置的key值。 | | propName | string | 是 | - | 要设置的key值。 |
| newValue | T | 是 | - | 要设置的value值。 | | newValue | T | 是 | - | 要设置的value值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------- | ----------------------------------------------------- | | ------- | ----------------------------------- |
| boolean | 如果存在key值，设置value值并返回true，否则返回false。 | | boolean | 如果存在key值，设置value值并返回true，否则返回false。 |
...@@ -106,14 +106,14 @@ setOrCreate\<T>(propName: string, newValue: T): boolean ...@@ -106,14 +106,14 @@ setOrCreate\<T>(propName: string, newValue: T): boolean
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | ----------------------- | | -------- | ------ | :--: | ---- | -------------- |
| propName | string | 是 | - | 要更新或者创建的key值。 | | propName | string | 是 | - | 要更新或者创建的key值。 |
| newValue | T | 是 | - | 要更新或创建的value值。 | | newValue | T | 是 | - | 要更新或创建的value值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------- | ------------------------------------------------------------ | | ------- | ---------------------------------------- |
| boolean | 如果已存在与给定键名字相同的属性，更新其值且返回true。如果不存在具有给定名称的属性，在LocalStorage中创建具有给定默认值的新属性，默认值必须是T类型。不允许undefined 或 null 返回true。 | | boolean | 如果已存在与给定键名字相同的属性，更新其值且返回true。如果不存在具有给定名称的属性，在LocalStorage中创建具有给定默认值的新属性，默认值必须是T类型。不允许undefined 或 null 返回true。 |
...@@ -127,13 +127,13 @@ link\<T>(propName: string): T ...@@ -127,13 +127,13 @@ link\<T>(propName: string): T
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | ---------------------- | | -------- | ------ | :--: | ---- | ----------- |
| propName | string | 是 | - | 要双向绑定的属性名称。 | | propName | string | 是 | - | 要双向绑定的属性名称。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ---- | ------------------------------------------------------------ | | ---- | ---------------------------------------- |
| T | 如果存在具有给定键的属性，返回到此属性的双向绑定，该双向绑定意味着变量或者组件对数据的更改将同步到LocalStorage，然后通过LocalStorage实例同步到任何变量或组件。如果不存在给定键的属性，返回undefined。 | | T | 如果存在具有给定键的属性，返回到此属性的双向绑定，该双向绑定意味着变量或者组件对数据的更改将同步到LocalStorage，然后通过LocalStorage实例同步到任何变量或组件。如果不存在给定键的属性，返回undefined。 |
...@@ -147,14 +147,14 @@ setAndLink\<T>(propName: string, defaultValue: T): T ...@@ -147,14 +147,14 @@ setAndLink\<T>(propName: string, defaultValue: T): T
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ------ | :--: | ------ | -------------------- | | ------------ | ------ | :--: | ---- | ----------- |
| propName | string | 是 | - | 要进行创建的key值。 | | propName | string | 是 | - | 要进行创建的key值。 |
| defaultValue | T | 是 | - | 要进行设置的默认值。 | | defaultValue | T | 是 | - | 要进行设置的默认值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------------------------------------- | ------------------------------------------------------------ | | ------------------------------------- | ---------------------------------------- |
| [@Link](ts-component-states-link.md ) | 与Link接口类似，如果当前的key保存于LocalStorage，返回该key值对应的value值。如果该key值未被创建，则创建一个对应的defaultValue的Link返回。 | | [@Link](ts-component-states-link.md ) | 与Link接口类似，如果当前的key保存于LocalStorage，返回该key值对应的value值。如果该key值未被创建，则创建一个对应的defaultValue的Link返回。 |
...@@ -168,13 +168,13 @@ prop\<T>(propName: string): T ...@@ -168,13 +168,13 @@ prop\<T>(propName: string): T
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | ----------------------- | | -------- | ------ | :--: | ---- | ------------- |
| propName | string | 是 | - | 要单向数据绑定的key值。 | | propName | string | 是 | - | 要单向数据绑定的key值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------------------------------------ | ------------------------------------------------------------ | | ------------------------------------ | ---------------------------------------- |
| [@Prop](ts-component-states-prop.md) | 如果存在具有给定键的属性，返回此属性的单向数据绑定。该单向绑定意味着只能通过LocalStorage将属性的更改同步到变量或组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态变量。如果此键的属性不存在则返回undefined。 | | [@Prop](ts-component-states-prop.md) | 如果存在具有给定键的属性，返回此属性的单向数据绑定。该单向绑定意味着只能通过LocalStorage将属性的更改同步到变量或组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态变量。如果此键的属性不存在则返回undefined。 |
...@@ -188,14 +188,14 @@ setAndProp\<T>(propName: string, defaultValue: T): T ...@@ -188,14 +188,14 @@ setAndProp\<T>(propName: string, defaultValue: T): T
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ------ | :--: | ------ | --------------------------- | | ------------ | ------ | :--: | ---- | --------------- |
| propName | string | 是 | - | 要保存的的键值对中的key值。 | | propName | string | 是 | - | 要保存的的键值对中的key值。 |
| defaultValue | T | 是 | - | 创建的默认值。 | | defaultValue | T | 是 | - | 创建的默认值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------------------------------------ | ------------------------------------------------------------ | | ------------------------------------ | ---------------------------------------- |
| [@Prop](ts-component-states-prop.md) | 如果当前的key保存与LocalStorage，返回该key值对应的value值。如果该key值未被创建，则创建一个对应的defaultValue的Prop返回。 | | [@Prop](ts-component-states-prop.md) | 如果当前的key保存与LocalStorage，返回该key值对应的value值。如果该key值未被创建，则创建一个对应的defaultValue的Prop返回。 |
...@@ -209,13 +209,13 @@ delete(propName: string): boolean ...@@ -209,13 +209,13 @@ delete(propName: string): boolean
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | :--: | ------ | --------------------- | | -------- | ------ | :--: | ---- | ------------ |
| propName | string | 是 | - | 要删除的属性的key值。 | | propName | string | 是 | - | 要删除的属性的key值。 |
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------- | ------------------------------------------------------------ | | ------- | ---------------------------------------- |
| boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 | | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 |
...@@ -229,7 +229,7 @@ keys(): IterableIterator\<string> ...@@ -229,7 +229,7 @@ keys(): IterableIterator\<string>
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------------- | ---------------------------- | | -------------- | -------------- |
| array\<string> | 返回包含所有键的字符串数组。 | | array\<string> | 返回包含所有键的字符串数组。 |
...@@ -243,7 +243,7 @@ size(): number ...@@ -243,7 +243,7 @@ size(): number
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------ | ------------------ | | ------ | --------- |
| number | 返回键值对的数量。 | | number | 返回键值对的数量。 |
...@@ -257,7 +257,7 @@ clear(): boolean ...@@ -257,7 +257,7 @@ clear(): boolean
**返回值：** **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------- | ------------------------------------------------------------ | | ------- | --------------------------------- |
| boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，返回false。 | | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，返回false。 |
### 示例1（在一个Ability创建的LocalStorage) ### 示例1（在一个Ability创建的LocalStorage)
...@@ -292,7 +292,7 @@ export default class MainAbility extends Ability { ...@@ -292,7 +292,7 @@ export default class MainAbility extends Ability {
@Component组件获取数据 @Component组件获取数据
``` ```ts
let storage = LocalStorage.GetShared() let storage = LocalStorage.GetShared()
@Entry(storage) @Entry(storage)
@Component @Component
...@@ -314,7 +314,7 @@ struct LocalStorageComponent { ...@@ -314,7 +314,7 @@ struct LocalStorageComponent {
### 示例2（在Entry页面定义LocalStorage） ### 示例2（在Entry页面定义LocalStorage）
``` ```ts
let storage = new LocalStorage({"PropA":47}); let storage = new LocalStorage({"PropA":47});
@Entry(storage) @Entry(storage)
@Component @Component
......
zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
浏览文件 @ 87721ce0
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
下面我们就分别学习这两种跳转机制来实现食物分类列表页面和食物详情页的链接。 下面我们就分别学习这两种跳转机制来实现食物分类列表页面和食物详情页的链接。
1. 点击FoodListItem后跳转到FoodDetail页面。在FoodListItem内创建Navigator组件，使其子组件都具有路由功能，目标页面target为'pages/FoodDetail'。 1. 点击FoodListItem后跳转到FoodDetail页面。在FoodListItem内创建Navigator组件，使其子组件都具有路由功能，目标页面target为'pages/FoodDetail'。
``` ```ts
@Component @Component
struct FoodListItem { struct FoodListItem {
private foodItem: FoodData private foodItem: FoodData
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
![zh-cn_image_0000001215318403](figures/zh-cn_image_0000001215318403.gif) ![zh-cn_image_0000001215318403](figures/zh-cn_image_0000001215318403.gif)
2. 点击FoodGridItem后跳转到FoodDetail页面。调用页面路由router模块的push接口，将FoodDetail页面推到路由栈中，实现页面跳转。使用router路由API接口，需要先引入router。 2. 点击FoodGridItem后跳转到FoodDetail页面。调用页面路由router模块的push接口，将FoodDetail页面推到路由栈中，实现页面跳转。使用router路由API接口，需要先引入router。
``` ```ts
import router from '@system.router' import router from '@system.router'
@Component @Component
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
![zh-cn_image_0000001169918548](figures/zh-cn_image_0000001169918548.gif) ![zh-cn_image_0000001169918548](figures/zh-cn_image_0000001169918548.gif)
3. 在FoodDetail页面增加回到食物列表页面的图标。在resources &gt; base &gt; media文件夹下存入回退图标Back.png。新建自定义组件PageTitle，包含后退的图标和Food Detail的文本，调用路由的router.back()接口，弹出路由栈最上面的页面，即返回上一级页面。 3. 在FoodDetail页面增加回到食物列表页面的图标。在resources &gt; base &gt; media文件夹下存入回退图标Back.png。新建自定义组件PageTitle，包含后退的图标和Food Detail的文本，调用路由的router.back()接口，弹出路由栈最上面的页面，即返回上一级页面。
``` ```ts
// FoodDetail.ets // FoodDetail.ets
import router from '@system.router' import router from '@system.router'
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
``` ```
4. 在FoodDetail组件内创建Stack组件，包含子组件FoodImageDisplay和PageTitle子组件，设置其对齐方式为左上对齐TopStart。 4. 在FoodDetail组件内创建Stack组件，包含子组件FoodImageDisplay和PageTitle子组件，设置其对齐方式为左上对齐TopStart。
``` ```ts
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
我们已经完成了FoodCategoryList页面和FoodDetail页面的跳转和回退，但是点击不同的FoodListItem/FoodGridItem，跳转的FoodDetail页面都是西红柿Tomato的详细介绍，这是因为没有构建起两个页面的数据传递，需要用到携带参数（parameter）路由。 我们已经完成了FoodCategoryList页面和FoodDetail页面的跳转和回退，但是点击不同的FoodListItem/FoodGridItem，跳转的FoodDetail页面都是西红柿Tomato的详细介绍，这是因为没有构建起两个页面的数据传递，需要用到携带参数（parameter）路由。
1. 在FoodListItem组件的Navigator设置其params属性，params属性接受key-value的Object。 1. 在FoodListItem组件的Navigator设置其params属性，params属性接受key-value的Object。
``` ```ts
// FoodList.ets // FoodList.ets
@Component @Component
struct FoodListItem { struct FoodListItem {
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
FoodGridItem调用的routerAPI同样有携带参数跳转的能力，使用方法和Navigator类似。 FoodGridItem调用的routerAPI同样有携带参数跳转的能力，使用方法和Navigator类似。
``` ```ts
router.push({ router.push({
uri: 'pages/FoodDetail', uri: 'pages/FoodDetail',
params: { foodData: this.foodItem } params: { foodData: this.foodItem }
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
``` ```
2. FoodDetail页面引入FoodData类，在FoodDetail组件内添加foodItem成员变量。 2. FoodDetail页面引入FoodData类，在FoodDetail组件内添加foodItem成员变量。
``` ```ts
// FoodDetail.ets // FoodDetail.ets
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
``` ```
3. 获取foodData对应的value。调用router.getParams().foodData来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。 3. 获取foodData对应的value。调用router.getParams().foodData来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。
``` ```ts
@Entry @Entry
@Component @Component
struct FoodDetail { struct FoodDetail {
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
``` ```
4. 重构FoodDetail页面的组件。在构建视图时，FoodDetail页面的食物信息都是直接声明的常量，现在要用传递来的FoodData数据来对其进行重新赋值。整体的FoodDetail.ets代码如下。 4. 重构FoodDetail页面的组件。在构建视图时，FoodDetail页面的食物信息都是直接声明的常量，现在要用传递来的FoodData数据来对其进行重新赋值。整体的FoodDetail.ets代码如下。
``` ```ts
@Component @Component
struct PageTitle { struct PageTitle {
build() { build() {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或