From c5ecbe90162369c58e1a40a67093ffa556ad3063 Mon Sep 17 00:00:00 2001 From: HelloCrease Date: Wed, 27 Jul 2022 17:29:46 +0800 Subject: [PATCH] update docs Signed-off-by: HelloCrease --- zh-cn/application-dev/ui/js-framework-file.md | 34 ++-- .../ui/js-framework-js-file.md | 10 +- .../application-dev/ui/js-framework-js-tag.md | 38 ++-- .../ui/js-framework-multiple-languages.md | 14 +- .../ui/js-framework-resource-restriction.md | 2 +- .../ui/js-framework-syntax-css.md | 50 ++--- .../ui/js-framework-syntax-hml.md | 56 +++--- .../ui/js-framework-syntax-js.md | 102 +++++------ .../ui/ts-application-resource-access.md | 171 ------------------ .../ts-application-states-apis-environment.md | 28 +-- ...plication-states-apis-persistentstorage.md | 19 +- .../ui/ts-application-states-appstorage.md | 31 ++-- .../ui/ts-attribution-configuration.md | 8 +- .../ui/ts-child-component-configuration.md | 4 +- .../ui/ts-component-based-builder.md | 9 +- .../ui/ts-component-based-component.md | 12 +- .../ui/ts-component-based-customdialog.md | 2 +- .../ui/ts-component-based-entry.md | 4 +- .../ui/ts-component-based-extend.md | 5 +- .../ui/ts-component-based-preview.md | 5 +- .../ui/ts-component-based-styles.md | 6 +- ...ts-component-creation-re-initialization.md | 3 +- .../ui/ts-component-states-link.md | 11 +- .../ui/ts-component-states-prop.md | 5 +- .../ui/ts-component-states-state.md | 8 +- ...configuration-with-mandatory-parameters.md | 6 +- .../ui/ts-custom-component-initialization.md | 43 ++--- ...ts-custom-component-lifecycle-callbacks.md | 19 +- .../ui/ts-event-configuration.md | 10 +- .../ui/ts-framework-directory.md | 2 +- .../ui/ts-framework-file-access-rules.md | 5 +- .../application-dev/ui/ts-framework-js-tag.md | 40 ++-- zh-cn/application-dev/ui/ts-function-build.md | 4 +- .../ui/ts-general-ui-concepts.md | 3 +- .../ui/ts-other-states-consume-provide.md | 21 ++- .../ui/ts-other-states-observed-objectlink.md | 2 +- .../ui/ts-other-states-watch.md | 5 +- .../ui/ts-parameterless-configuration.md | 2 +- zh-cn/application-dev/ui/ts-pixel-units.md | 27 +-- .../ui/ts-rending-control-syntax-foreach.md | 32 ++-- .../ui/ts-rending-control-syntax-if-else.md | 12 +- .../ts-rending-control-syntax-lazyforeach.md | 62 +++---- .../application-dev/ui/ts-resource-access.md | 10 +- .../application-dev/ui/ts-syntactic-sugar.md | 51 +++--- zh-cn/application-dev/ui/ts-syntax-intro.md | 2 +- zh-cn/application-dev/ui/ts-types.md | 83 ++++----- .../ui/ts-ui-state-mgmt-concepts.md | 2 +- .../ui/ui-js-animate-attribute-style.md | 8 +- ...ui-js-animate-background-position-style.md | 6 +- .../ui/ui-js-animate-component.md | 54 +++--- .../ui/ui-js-animate-dynamic-effects.md | 22 +-- .../application-dev/ui/ui-js-animate-frame.md | 20 +- zh-cn/application-dev/ui/ui-js-animate-svg.md | 10 +- .../ui/ui-js-animate-transform.md | 34 ++-- .../ui/ui-js-building-ui-animation.md | 8 +- .../ui/ui-js-building-ui-event.md | 6 +- .../ui/ui-js-building-ui-interactions.md | 6 +- .../ui/ui-js-building-ui-layout-comment.md | 6 +- ...s-building-ui-layout-external-container.md | 10 +- .../ui/ui-js-building-ui-layout-image.md | 6 +- .../ui/ui-js-building-ui-layout-text.md | 6 +- .../ui/ui-js-building-ui-routes.md | 10 +- .../ui/ui-js-component-tabs.md | 60 +++--- .../ui/ui-js-components-button.md | 48 ++--- .../ui/ui-js-components-canvas.md | 16 +- ...-js-components-canvasrenderingcontext2d.md | 49 ++--- .../ui/ui-js-components-chart.md | 71 ++++---- .../ui/ui-js-components-dialog.md | 60 +++--- .../ui/ui-js-components-form.md | 46 ++--- .../ui/ui-js-components-grid.md | 24 +-- .../ui/ui-js-components-image-animator.md | 56 +++--- .../ui/ui-js-components-images.md | 40 ++-- .../ui/ui-js-components-input.md | 70 +++---- .../ui/ui-js-components-list.md | 62 +++---- .../ui/ui-js-components-marquee.md | 36 ++-- .../ui/ui-js-components-menu.md | 44 ++--- .../ui/ui-js-components-offscreencanvas.md | 12 +- .../ui/ui-js-components-path2d.md | 25 ++- .../ui/ui-js-components-picker.md | 70 +++---- .../ui/ui-js-components-qrcode.md | 40 ++-- .../ui/ui-js-components-rating.md | 50 ++--- .../ui/ui-js-components-search.md | 38 ++-- .../ui/ui-js-components-slider.md | 42 ++--- .../ui/ui-js-components-stepper.md | 71 ++++---- .../ui/ui-js-components-svg-graphics.md | 8 +- .../ui/ui-js-components-svg-overview.md | 21 ++- .../ui/ui-js-components-svg-path.md | 29 +-- .../ui/ui-js-components-svg-text.md | 10 +- .../ui/ui-js-components-swiper.md | 59 +++--- .../ui/ui-js-components-switch.md | 29 +-- .../ui/ui-js-components-text.md | 54 +++--- .../ui/ui-js-components-toolbar.md | 44 ++--- .../ui/ui-js-custom-components.md | 12 +- .../ui/ui-ts-basic-components-button.md | 26 +-- .../ui/ui-ts-building-category-grid-layout.md | 114 ++++++------ .../ui/ui-ts-building-category-list-layout.md | 20 +- .../ui/ui-ts-components-web.md | 14 +- zh-cn/application-dev/ui/ui-ts-components.md | 4 +- zh-cn/application-dev/ui/ui-ts-layout-flex.md | 40 ++-- .../ui/ui-ts-layout-grid-container.md | 11 +- .../ui/ui-ts-layout-mediaquery.md | 14 +- .../application-dev/ui/ui-ts-local-storage.md | 120 ++++++------ ...i-ts-page-redirection-data-transmission.md | 18 +- 103 files changed, 1429 insertions(+), 1540 deletions(-) delete mode 100644 zh-cn/application-dev/ui/ts-application-resource-access.md diff --git a/zh-cn/application-dev/ui/js-framework-file.md b/zh-cn/application-dev/ui/js-framework-file.md index 983b0f4bf4..c9d892c9ff 100644 --- a/zh-cn/application-dev/ui/js-framework-file.md +++ b/zh-cn/application-dev/ui/js-framework-file.md @@ -32,15 +32,15 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 - share目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - i18n和resources是开发保留文件夹，不可重命名。 > -> +> > - 如果share目录中的资源和实例(default)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。 > -> +> > - share目录当前不支持i18n。 -> +> > - 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 @@ -56,14 +56,14 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 - CSS样式文件中通过url()函数创建<url>数据类型，如：url(/common/xxx.png)。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 当代码文件A需要引用代码文件B时： -> +> > - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 -> +> > - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 > -> +> > - 在js文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。 @@ -71,16 +71,16 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 **表1** 支持的图片格式 -| 格式 | 支持的文件类型 | -| -------- | -------- | -| BMP | .bmp | -| GIF | .gif | -| JPEG | .jpg | -| PNG | .png | -| WebP | .webp | +| 格式 | 支持的文件类型 | +| ---- | ------- | +| BMP | .bmp | +| GIF | .gif | +| JPEG | .jpg | +| PNG | .png | +| WebP | .webp | **表2** 支持的视频格式 -| 格式 | 支持的文件类型 | -| -------- | -------- | +| 格式 | 支持的文件类型 | +| ---------------------------------------- | ------------- | | H.264 AVC
Baseline Profile (BP) | .3gp
.mp4 | diff --git a/zh-cn/application-dev/ui/js-framework-js-file.md b/zh-cn/application-dev/ui/js-framework-js-file.md index 5f72eb98d3..82716c99f1 100644 --- a/zh-cn/application-dev/ui/js-framework-js-file.md +++ b/zh-cn/application-dev/ui/js-framework-js-file.md @@ -3,7 +3,7 @@ ## 应用生命周期 每个应用可以在app.js自定义应用级[生命周期](../ui/js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志： -``` +```js // app.js export default { onCreate() { @@ -18,13 +18,13 @@ export default { ## 应用对象6+ -| 属性 | 类型 | 描述 | -| -------- | -------- | -------- | +| 属性 | 类型 | 描述 | +| ------ | -------- | ---------------------------------------- | | getApp | Function | 提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。 | 示例如下： -``` +```js // app.js export default { data: { @@ -39,7 +39,7 @@ export default { }; ``` -``` +```js // test.js 自定义逻辑代码 export var appData = getApp().data; ``` diff --git a/zh-cn/application-dev/ui/js-framework-js-tag.md b/zh-cn/application-dev/ui/js-framework-js-tag.md index b08ba57338..1e226db495 100644 --- a/zh-cn/application-dev/ui/js-framework-js-tag.md +++ b/zh-cn/application-dev/ui/js-framework-js-tag.md @@ -3,14 +3,14 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 -| 标签 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| name | string | default | 是 | 标识JS实例的名字。 | -| pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 | -| window | Object | - | 否 | 窗口信息，详见“**[window](#window)**”。 | +| 标签 | 类型 | 默认值 | 必填 | 描述 | +| ------ | ------ | ------- | ---- | ------------------------------- | +| name | string | default | 是 | 标识JS实例的名字。 | +| pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 | +| window | Object | - | 否 | 窗口信息，详见“**[window](#window)**”。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > name、pages和window等标签配置需在配置文件（config.json）中的“js”标签中完成设置。 @@ -18,7 +18,7 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： -``` +```json { ... "pages": [ @@ -29,11 +29,11 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> +> **说明：** +> > - pages列表中第一个页面是应用的首页，即entry入口。 > -> +> > - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 ## window @@ -43,19 +43,19 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， - 指定designWidth（屏幕逻辑宽度），所有与大小相关的样式（例如width、font-size）均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。 - 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 - - > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + + > **说明：** > 1. 组件样式中<length>类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认<length>为1px时，设备上实际渲染出2物理像素。 - > + > > 2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 -| 属性 | 类型 | 必填 | 缺省值 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| designWidth | number | 否 | 720
| 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 | -| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 | +| 属性 | 类型 | 必填 | 缺省值 | 描述 | +| --------------- | ------- | ---- | -------- | ---------------------------------------- | +| designWidth | number | 否 | 720
| 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 | +| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 | 示例如下： -``` +```json { ... "window": { @@ -69,7 +69,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， ## 示例 -``` +```json { "app": { "bundleName": "com.example.player", diff --git a/zh-cn/application-dev/ui/js-framework-multiple-languages.md b/zh-cn/application-dev/ui/js-framework-multiple-languages.md index 19d9df8df2..0cbe216fb6 100644 --- a/zh-cn/application-dev/ui/js-framework-multiple-languages.md +++ b/zh-cn/application-dev/ui/js-framework-multiple-languages.md @@ -29,7 +29,7 @@ language[-script-region].json 资源文件内容格式如下： en-US.json -``` +```json { "strings": { "hello": "Hello world!", @@ -53,7 +53,7 @@ en-US.json en-US.json -``` +```json { "strings": { "people": { @@ -67,7 +67,7 @@ en-US.json ar-AE.json -``` +```json { "strings": { "people": { @@ -104,7 +104,7 @@ ar-AE.json | params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：
- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：```$t('strings.object', {name:'Hello world'})```。
- 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：```$t('strings.array', [Hello world']``` | - 简单格式化示例代码 - ``` + ```html
@@ -127,7 +127,7 @@ ar-AE.json
``` - ``` + ```js // xxx.js // 下面为在js文件中的使用方法。 export default { @@ -147,7 +147,7 @@ ar-AE.json ``` - 单复数格式化方法 - + 表4 单复数格式化 | 属性 | 类型 | 参数 | 必填 | 描述 | @@ -162,7 +162,7 @@ ar-AE.json | count | number | 是 | 要表达的值 | - 单复数格式化示例代码 - ``` + ```html
diff --git a/zh-cn/application-dev/ui/js-framework-resource-restriction.md b/zh-cn/application-dev/ui/js-framework-resource-restriction.md index 7cdbbe2c52..2d43d44e82 100644 --- a/zh-cn/application-dev/ui/js-framework-resource-restriction.md +++ b/zh-cn/application-dev/ui/js-framework-resource-restriction.md @@ -88,5 +88,5 @@ resources/res-defaults.json:
``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 资源限定文件中不支持颜色枚举格式。 diff --git a/zh-cn/application-dev/ui/js-framework-syntax-css.md b/zh-cn/application-dev/ui/js-framework-syntax-css.md index 73d8b70981..9def147357 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-css.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-css.md @@ -22,14 +22,14 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 1. 内部样式，支持使用style、class属性来控制组件的样式。例如： - ``` + ```html
Hello World
``` - ``` + ```css /* index.css */ .container { justify-content: center; @@ -37,14 +37,14 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ``` 2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入： - ``` + ```css /* style.css */ .title { font-size: 50px; } ``` - ``` + ```css /* index.css */ @import '../../common/style.css'; .container { @@ -57,17 +57,17 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： -| 选择器 | 样例 | 样例描述 | -| -------- | -------- | -------- | -| .class | .container | 用于选择class="container"的组件。 | -| \#id | \#titleId | 用于选择id="titleId"的组件。 | -| tag | text | 用于选择text组件。 | -| , | .title, .content | 用于选择class="title"和class="content"的组件。 | +| 选择器 | 样例 | 样例描述 | +| ------------------------- | ------------------------------------- | ---------------------------------------- | +| .class | .container | 用于选择class="container"的组件。 | +| \#id | \#titleId | 用于选择id="titleId"的组件。 | +| tag | text | 用于选择text组件。 | +| , | .title, .content | 用于选择class="title"和class="content"的组件。 | | \#id .class tag | \#containerId .content text | 非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：\#containerId>.content。 | 示例： -``` +```html
标题 @@ -77,7 +77,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下
``` -``` +```css /* 页面样式xxx.css */ /\* 对所有div组件设置样式 \*/ div { @@ -124,30 +124,30 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列： -| 名称 | 支持组件 | 描述 | -| -------- | -------- | -------- | -| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 | -| :active | 支持click事件的组件
| 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 | -| :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 | -| :checked | input[type="checkbox"、type="radio"]、 switch | 表示checked属性为true的元素（不支持动画样式的设置）。 | +| 名称 | 支持组件 | 描述 | +| --------- | ---------------------------------------- | ---------------------------------------- | +| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 | +| :active | 支持click事件的组件
| 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 | +| :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 | +| :checked | input[type="checkbox"、type="radio"]、 switch | 表示checked属性为true的元素（不支持动画样式的设置）。 | 伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式： -``` +```html
``` -``` +```css /* index.css */ .button:active { background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */ } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker @@ -156,7 +156,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。 - 当前文件使用样式预编译，例如将原index.css改为index.less： - ``` + ```less /* index.less */ /* 定义变量 */ @colorBackground: #000000; @@ -166,7 +166,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 ``` - 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss： - ``` + ```scss /* style.scss */ /* 定义变量 */ $colorBackground: #000000; @@ -174,7 +174,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 在index.scss中引用： - ``` + ```scss /* index.scss */ /* 引入外部scss文件 */ @import '../../common/style.scss'; @@ -183,7 +183,7 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 } ``` - > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > **说明：** > 引用的预编译文件建议放在common目录进行管理。 ## CSS样式继承6+ diff --git a/zh-cn/application-dev/ui/js-framework-syntax-hml.md b/zh-cn/application-dev/ui/js-framework-syntax-hml.md index 1d79a5fb5b..be8967e462 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-hml.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-hml.md @@ -5,7 +5,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ## 页面结构 -``` +```html
Image Show @@ -18,19 +18,19 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ## 数据绑定 -``` +```html
{{content[1]}}
``` -``` +```css /*xxx.css*/ .container{ margin: 200px; } ``` -``` +```js // xxx.js export default { data: { @@ -42,7 +42,7 @@ export default { } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 > > - hml文件中的js表达式不支持ES6语法。 @@ -60,7 +60,7 @@ export default { - "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 - 示例 - ``` + ```html
{{count}} @@ -75,7 +75,7 @@ export default {
``` - ``` + ```js // xxx.js export default { data: { @@ -93,7 +93,7 @@ export default { }; ``` - ``` + ```css /* xxx.css */ .container { display: flex; @@ -135,11 +135,11 @@ export default { - 绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{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)章节。 - 示例 - ``` + ```html
; @@ -157,7 +157,7 @@ export default {
``` - ``` + ```js // xxx.js export default { clickfunc: function(e) { @@ -169,7 +169,7 @@ export default { } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。 ## 捕获事件绑定5+ @@ -183,7 +183,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 - 绑定并阻止事件向下传递：grab:{event}.capture。 - 示例 - ``` + ```html
@@ -193,7 +193,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
``` - ``` + ```js // xxx.js export default { touchstartfuc: function(e) { @@ -205,7 +205,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ## 列表渲染 -``` +```html
@@ -225,7 +225,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ``` -``` +```js // xxx.js export default { data: { @@ -252,7 +252,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 - for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 > > - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 @@ -265,7 +265,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： -``` +```html
@@ -276,7 +276,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -289,7 +289,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 } ``` -``` +```js // xxx.js export default { data: { @@ -309,7 +309,7 @@ export default { 优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。 -``` +```html
@@ -317,7 +317,7 @@ export default {
``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -330,7 +330,7 @@ export default { } ``` -``` +```js // xxx.js export default { data: { @@ -342,7 +342,7 @@ export default { } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 禁止在同一个元素上同时设置for和if属性。 ![zh-cn_image_0000001118642005](figures/zh-cn_image_0000001118642005.gif) @@ -351,7 +351,7 @@ export default { <block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。 -``` +```html @@ -367,7 +367,7 @@ export default { ``` -``` +```js // xxx.js export default { data: { @@ -385,7 +385,7 @@ export default { HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。 -``` +```html
Name: {{name}} @@ -393,7 +393,7 @@ HML可以通过element引用模板文件，详细介绍可参考[自定义组件
``` -``` +```html
diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md index 9aac5acd15..8233a1903b 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-js.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md @@ -10,14 +10,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 - 模块声明 使用import方法引入功能模块： - ``` + ```js import router from '@system.router'; ``` - 代码引用 使用import方法导入js代码： - ``` + ```js import utils from '../../common/utils.js'; ``` @@ -25,13 +25,13 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ## 对象 - 应用对象 - | 属性 | 类型 | 描述 | - | -------- | -------- | -------- | + | 属性 | 类型 | 描述 | + | ---- | ------ | ---------------------------------------- | | $def | Object | 使用this.$app.$def获取在app.js中暴露的对象。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 应用对象不支持数据绑定，需主动触发UI更新。 | 示例代码 - ``` + ```js // app.js export default { onCreate() { @@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 }; ``` - ``` + ```js // index.js页面逻辑代码 export default { data: { @@ -72,26 +72,26 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ``` - 页面对象 - | 属性 | 类型 | 描述 | - | -------- | -------- | -------- | - | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
data与private和public不能重合使用。 | - | $refs | Object | 持有注册过ref 属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 | - | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 | - | public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 | - | props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 | - | computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 | + | 属性 | 类型 | 描述 | + | -------- | --------------- | ---------------------------------------- | + | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
data与private和public不能重合使用。 | + | $refs | Object | 持有注册过ref 属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 | + | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 | + | public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 | + | props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 | + | computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 | ## 方法 - 数据方法 - | 方法 | 参数 | 描述 | - | -------- | -------- | -------- | - | $set | key: string, value: any | 添加新的数据属性或者修改已有数据属性。
用法：
this.$set('key',value)：添加数据属性。 | - | $delete | key: string | 删除数据属性。
用法：
this.$delete('key')：删除数据属性。 | + | 方法 | 参数 | 描述 | + | ------- | -------------------------------------- | ---------------------------------------- | + | $set | key: string, value: any | 添加新的数据属性或者修改已有数据属性。
用法：
this.$set('key',value)：添加数据属性。 | + | $delete | key: string | 删除数据属性。
用法：
this.$delete('key')：删除数据属性。 | 示例代码 - ``` + ```js // index.js export default { data: { @@ -103,7 +103,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 getAppVersion() { this.$set('keyMap.Version', '3.0'); console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 - + this.$delete('keyMap'); console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined } @@ -111,37 +111,37 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ``` - 公共方法 - | 方法 | 参数 | 描述 | - | -------- | -------- | -------- | - | $element | id: string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。
用法：
<div id='xxx'></div>
- this.$element('xxx')：获得id为xxx的组件对象。
- this.$element()：获得根组件对象。 | - | $rootElement | 无 | 获取根组件对象。
用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。 | - | $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | - | $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | - | $child | id: string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。
用法：
this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。 | + | 方法 | 参数 | 描述 | + | ------------ | --------------- | ---------------------------------------- | + | $element | id: string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。
用法：
<div id='xxx'></div>
- this.$element('xxx')：获得id为xxx的组件对象。
- this.$element()：获得根组件对象。 | + | $rootElement | 无 | 获取根组件对象。
用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。 | + | $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | + | $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | + | $child | id: string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。
用法：
this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。 | - 事件方法 - | 方法 | 参数 | 描述 | - | -------- | -------- | -------- | - | $watch | data: string, callback: string \| Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。
用法：
this.$watch('key', callback) | + | 方法 | 参数 | 描述 | + | ---------------------------------------- | ---- | ---- | + | $watch | data: string, callback: string \| Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。
用法：
this.$watch('key', callback) | | | - 页面方法 - | 方法 | 参数 | 描述 | - | -------- | -------- | -------- | + | 方法 | 参数 | 描述 | + | --------------------- | -------------------------------- | ------------------------------- | | scrollTo6+ | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 | **表1** ScrollPageParam6+ - - | 名称 | 类型 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | - | position | number | - | 指定滚动位置。 | - | id | string | - | 指定需要滚动到的元素id。 | - | duration | number | 300 | 指定滚动时长，单位为毫秒。 | - | timingFunction | string | ease | 指定滚动动画曲线，可选值参考
[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 | - | complete | () => void | - | 指定滚动完成后需要执行的回调函数。 | + + | 名称 | 类型 | 默认值 | 描述 | + | -------------- | ----------------------- | ---- | ---------------------------------------- | + | position | number | - | 指定滚动位置。 | + | id | string | - | 指定需要滚动到的元素id。 | + | duration | number | 300 | 指定滚动时长，单位为毫秒。 | + | timingFunction | string | ease | 指定滚动动画曲线，可选值参考
[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 | + | complete | () => void | - | 指定滚动完成后需要执行的回调函数。 | 示例： - ``` + ```js this.$rootElement().scrollTo({position: 0}) this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) ``` @@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ## 获取DOM元素 1. 通过$refs获取DOM元素 - ``` + ```html
``` - ``` + ```js // index.js export default { data: { @@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ``` 2. 通过$element获取DOM元素 - ``` + ```html
``` - ``` + ```js // index.js export default { data: { @@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 根节点所在页面： -``` +```html
@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
``` -``` +```js // root.js export default { data: { @@ -243,7 +243,7 @@ export default { 自定义parent组件： -``` +```html
@@ -253,7 +253,7 @@ export default {
``` -``` +```js // parent.js export default { data: { @@ -272,7 +272,7 @@ export default { 自定义child组件： -``` +```html
child component clicked @@ -280,7 +280,7 @@ export default {
``` -``` +```js // child.js export default { data: { diff --git a/zh-cn/application-dev/ui/ts-application-resource-access.md b/zh-cn/application-dev/ui/ts-application-resource-access.md deleted file mode 100644 index d12e3fd86f..0000000000 --- a/zh-cn/application-dev/ui/ts-application-resource-access.md +++ /dev/null @@ -1,171 +0,0 @@ -# 访问应用资源 - - -## 资源定义 - -应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织： - -- 一级目录为base目录、限定词目录以及rawfile目录 - - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。 - - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。 - - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。 - -- 二级目录为资源目录 - - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。 - - 当前支持的文件和资源类型如下： - | 文件名 | 资源类型 | - | -------- | -------- | - | color.json | 颜色资源。 | - | float.json | 间距、圆角、字体等资源。 | - | string.json | 字符串资源。 | - | plural.json | 字符串资源。 | - | media目录 | 图片资源。 | - - -## 资源引用 - -在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。 - -引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。 - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 - - -## 示例 - -base目录中部分自定义资源如下所示： - - -``` - resources - ├─ base - │ ├─ element - │ │ ├─ color.json - │ │ ├─ string.json - │ │ └─ float.json - │ └─ media - │ └─ my_background_image.png - └─ rawfile - ├─ test.png - └─ newDir - └─ newTest.png -``` - -color.json文件的内容如下： - - -``` -{ - "color": [ - { - "name": "color_hello", - "value": "#ffff0000" - }, - { - "name": "color_world", - "value": "#ff0000ff" - } - ] -} -``` - -float.json文件的内容如下： - - -``` -{ - "float":[ - { - "name":"font_hello", - "value":"28.0fp" - }, - { - "name":"font_world", - "value":"20.0fp" - } - ] -} -``` - -string.json文件的内容如下： - - -``` -{ - "string":[ - { - "name":"string_hello", - "value":"Hello" - }, - { - "name":"string_world", - "value":"World" - }, - { - "name":"message_arrive", - "value":"We will arrive at %s." - } - ] -} -``` - -plural.json文件的内容如下： - - -``` -{ - "plural":[ - { - "name":"eat_apple", - "value":[ - { - "quantity":"one", - "value":"%d apple" - }, - { - "quantity":"other", - "value":"%d apples" - } - ] - } - ] -} -``` - - 在ets文件中，可以使用在resources目录中定义的资源。 - -``` -Text($r('app.string.string_hello')) - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.string.string_world')) - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换 - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Image($r('app.media.my_background_image')) // media资源的$r引用 - -Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片 - -Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片 -``` - - -## 相关实例 - -针对访问应用资源，有以下相关实例可供参考： - -- [`ResourceManager`：资源管理器（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager) diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md index b4354b2227..54c3703e6b 100644 --- a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md +++ b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md @@ -3,7 +3,7 @@ Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。Environment及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从Environment获取语音环境： -``` +```ts Environment.EnvProp("accessibilityEnabled", "default"); var enable = AppStorage.Get("accessibilityEnabled"); ``` @@ -13,20 +13,20 @@ accessibilityEnabled是Environment提供默认系统变量识别符。首先需 ## Environment接口 -| key | 参数 | 返回值 | 说明 | -| -------- | -------- | -------- | -------- | -| EnvProp | key: string,
defaultValue: any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 | -| EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到AppStorage中。 | -| Keys | Array<string> | number | 返回关联的系统项。 | +| key | 参数 | 返回值 | 说明 | +| -------- | ---------------------------------------- | ------- | ---------------------------------------- | +| EnvProp | key: string,
defaultValue: any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 | +| EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到AppStorage中。 | +| Keys | Array<string> | number | 返回关联的系统项。 | ## Environment内置的环境变量 -| key | 类型 | 说明 | -| -------- | -------- | -------- | -| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | -| colorMode | ColorMode | 深浅色模式，可选值为：
- ColorMode.LIGHT：浅色模式；
- ColorMode.DARK：深色模式。 | -| fontScale | number | 字体大小比例，取值范围为[0.85, 1.45]。 | -| fontWeightScale | number | 字体权重比例，取值范围为[0.6, 1.6]。 | -| layoutDirection | LayoutDirection | 布局方向类型，可选值为：
- LayoutDirection.LTR：从左到右；
- LayoutDirection.RTL：从右到左。 | -| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 | +| key | 类型 | 说明 | +| -------------------- | --------------- | ---------------------------------------- | +| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | +| colorMode | ColorMode | 深浅色模式，可选值为：
- ColorMode.LIGHT：浅色模式；
- ColorMode.DARK：深色模式。 | +| fontScale | number | 字体大小比例，取值范围为[0.85, 1.45]。 | +| fontWeightScale | number | 字体权重比例，取值范围为[0.6, 1.6]。 | +| layoutDirection | LayoutDirection | 布局方向类型，可选值为：
- LayoutDirection.LTR：从左到右；
- LayoutDirection.RTL：从右到左。 | +| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 | diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md index 43a1fe25b4..6c8c29d7ca 100644 --- a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md +++ b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md @@ -3,21 +3,22 @@ 方舟开发框架通过PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。 -| 方法 | 参数说明 | 返回值 | 定义 | -| -------- | -------- | -------- | -------- | -| PersistProp | key : string
defaultValue: T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：
- 首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。
- 其次，Persistent中有此命名的属性，使用Persistent中的属性值。
- 最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 | -| DeleteProp | key: string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 | -| PersistProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联多个命名的属性绑定。 | -| Keys | void | Array<string> | 返回所有持久化属性的标记。 | +| 方法 | 参数说明 | 返回值 | 定义 | +| ------------ | ---------------------------------------- | ------------------- | ---------------------------------------- | +| PersistProp | key : string
defaultValue: T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：
- 首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。
- 其次，Persistent中有此命名的属性，使用Persistent中的属性值。
- 最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 | +| DeleteProp | key: string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 | +| PersistProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联多个命名的属性绑定。 | +| Keys | void | Array<string> | 返回所有持久化属性的标记。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - PersistProp接口使用时，需要保证输入对应的key应当在AppStorage存在。 -> +> > - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 -``` +```ts +// xxx.ets PersistentStorage.PersistProp("highScore", "0"); @Entry diff --git a/zh-cn/application-dev/ui/ts-application-states-appstorage.md b/zh-cn/application-dev/ui/ts-application-states-appstorage.md index 4a2c477f8f..6562cc1a9e 100644 --- a/zh-cn/application-dev/ui/ts-application-states-appstorage.md +++ b/zh-cn/application-dev/ui/ts-application-states-appstorage.md @@ -14,20 +14,20 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同 ## AppStorage接口 -| 方法 | 参数说明 | 返回值 | 定义 | -| -------- | -------- | -------- | -------- | -| SetAndLink | key: string,
defaultValue: T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 | -| Set | key: string,
newValue: T | void | 对已保存的key值，替换其value值。 | -| Link | key: string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 | -| SetAndProp | propName: string,
defaultValue: S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 | -| Prop | key: string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> prop方法对应的属性值类型为简单类型。 | -| SetOrCreate | key: string,
newValue: T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。
如果不存在存在与给定键名字相同的属性, 则创建一个键为key, 值为newValue的属性，属性值不支持null和undefined。 | -| Get | key: string | T或undefined | 通过此接口获取对应key值的value。 | -| Has | propName: string | boolean | 判断对应键值的属性是否存在。 | -| Keys | void | array<string> | 返回包含所有键的字符串数组。 | -| Delete | key: string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 | -| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 | -| IsMutable | key: string | boolean | 返回此属性是否存在并且是否可以改变。 | +| 方法 | 参数说明 | 返回值 | 定义 | +| ----------- | ---------------------------------------- | ------------------- | ---------------------------------------- | +| SetAndLink | key: string,
defaultValue: T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 | +| Set | key: string,
newValue: T | void | 对已保存的key值，替换其value值。 | +| Link | key: string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 | +| SetAndProp | propName: string,
defaultValue: S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 | +| Prop | key: string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> prop方法对应的属性值类型为简单类型。 | +| SetOrCreate | key: string,
newValue: T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。
如果不存在存在与给定键名字相同的属性, 则创建一个键为key, 值为newValue的属性，属性值不支持null和undefined。 | +| Get | key: string | T或undefined | 通过此接口获取对应key值的value。 | +| Has | propName: string | boolean | 判断对应键值的属性是否存在。 | +| Keys | void | array<string> | 返回包含所有键的字符串数组。 | +| Delete | key: string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 | +| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 | +| IsMutable | key: string | boolean | 返回此属性是否存在并且是否可以改变。 | ## AppStorage与组件同步 @@ -49,7 +49,8 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同 ## 示例 -``` +```ts +// xxx.ets let varA = AppStorage.Link('varA') let envLang = AppStorage.Prop('languageCode') diff --git a/zh-cn/application-dev/ui/ts-attribution-configuration.md b/zh-cn/application-dev/ui/ts-attribution-configuration.md index a497ba586a..64834f2571 100644 --- a/zh-cn/application-dev/ui/ts-attribution-configuration.md +++ b/zh-cn/application-dev/ui/ts-attribution-configuration.md @@ -5,14 +5,14 @@ - 配置Text组件的字体大小属性： - ``` + ```ts Text('123') .fontSize(12) ``` - 使用“.”操作进行链式调用并同时配置组件的多个属性，如下所示： - ``` + ```ts Image('a.jpg') .alt('error.jpg') .width(100) @@ -21,7 +21,7 @@ - 除了直接传递常量参数外，还可以传递变量或表达式，如下所示： - ``` + ```ts // Size, count, and offset are private variables defined in the component. Text('hello') .fontSize(this.size) @@ -32,7 +32,7 @@ - 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置Text组件的颜色和字体属性： - ``` + ```ts Text('hello') .fontSize(20) .fontColor(Color.Red) diff --git a/zh-cn/application-dev/ui/ts-child-component-configuration.md b/zh-cn/application-dev/ui/ts-child-component-configuration.md index 4c73891734..926d1d1c4f 100644 --- a/zh-cn/application-dev/ui/ts-child-component-configuration.md +++ b/zh-cn/application-dev/ui/ts-child-component-configuration.md @@ -5,7 +5,7 @@ - 以下是简单的Column示例： - ``` + ```ts Column() { Text('Hello') .fontSize(100) @@ -18,7 +18,7 @@ - 可以嵌套多个子组件： - ``` + ```ts Column() { Column() { Button() { diff --git a/zh-cn/application-dev/ui/ts-component-based-builder.md b/zh-cn/application-dev/ui/ts-component-based-builder.md index fd0d4f5be1..1a380688ea 100644 --- a/zh-cn/application-dev/ui/ts-component-based-builder.md +++ b/zh-cn/application-dev/ui/ts-component-based-builder.md @@ -4,7 +4,8 @@ @Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。\@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。 -``` +```ts +// xxx.ets @Entry @Component 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;`）。 -``` +```ts +// xxx.ets @Component struct CustomContainer { header: string = ""; @@ -100,7 +102,8 @@ struct CustomContainerUser { 在自定义组件中使用@BuilderParam修饰的属性接收尾随闭包（在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景（`CustomComponent(){}`）。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件（`{Column(){Text("content")}`），闭包内语法规范与[build](../ui/ts-function-build.md)一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。 示例：在闭包内增加Column组件并添加点击事件，在新增的Column组件内调用@Builder修饰的specificParam方法，点击Column组件后该改变自定义组件中header的属性值为“changeHeader”。并且在初始化自定义组件时会把尾随闭包的内容赋值给使用@BuilderParam修饰的closer属性。 -``` +```ts +// xxx.ets @Component struct CustomContainer { header: string = ""; diff --git a/zh-cn/application-dev/ui/ts-component-based-component.md b/zh-cn/application-dev/ui/ts-component-based-component.md index fcf5a833d2..e5f624b328 100644 --- a/zh-cn/application-dev/ui/ts-component-based-component.md +++ b/zh-cn/application-dev/ui/ts-component-based-component.md @@ -17,15 +17,15 @@ > **说明：** > -> - 自定义组件必须定义build方法。 -> -> - 自定义组件禁止自定义构造函数。 +> - 自定义组件必须定义build方法。 +> +> - 自定义组件禁止自定义构造函数。 如下代码定义了MyComponent组件： -``` +```ts @Component struct MyComponent { build() { @@ -44,7 +44,7 @@ MyComponent的build方法会在初始渲染时执行，此外，当组件中的 以下代码使用了MyComponent组件： -``` +```ts @Component struct ParentComponent { build() { @@ -61,7 +61,7 @@ struct ParentComponent { 可以多次使用MyComponent，并在不同的组件中进行重用： -``` +```ts @Component struct ParentComponent { build() { diff --git a/zh-cn/application-dev/ui/ts-component-based-customdialog.md b/zh-cn/application-dev/ui/ts-component-based-customdialog.md index 72b8c9cb6b..13082cfa35 100644 --- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -3,7 +3,7 @@ @CustomDialog装饰器用于装饰自定义弹窗。 -``` +```ts // custom-dialog-demo.ets @CustomDialog struct DialogExample { diff --git a/zh-cn/application-dev/ui/ts-component-based-entry.md b/zh-cn/application-dev/ui/ts-component-based-entry.md index 24e1ec5772..74e81fe05e 100644 --- a/zh-cn/application-dev/ui/ts-component-based-entry.md +++ b/zh-cn/application-dev/ui/ts-component-based-entry.md @@ -3,14 +3,14 @@ 用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 在单个源文件中，最多可以使用@Entry装饰一个自定义组件。 @Entry的用法如下： -``` +```ts // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. @Entry @Component diff --git a/zh-cn/application-dev/ui/ts-component-based-extend.md b/zh-cn/application-dev/ui/ts-component-based-extend.md index d8f8c63f1a..567f5b7f04 100644 --- a/zh-cn/application-dev/ui/ts-component-based-extend.md +++ b/zh-cn/application-dev/ui/ts-component-based-extend.md @@ -3,7 +3,8 @@ @Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过@Extend装饰器可以快速定义并复用组件的自定义样式。 -``` +```ts +// xxx.ets @Extend(Text) function fancy(fontSize: number) { .fontColor(Color.Red) .fontSize(fontSize) @@ -25,5 +26,5 @@ struct FancyUse { ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > @Extend装饰器不能用在自定义组件struct定义框内。 diff --git a/zh-cn/application-dev/ui/ts-component-based-preview.md b/zh-cn/application-dev/ui/ts-component-based-preview.md index b7c790de72..574ba980de 100644 --- a/zh-cn/application-dev/ui/ts-component-based-preview.md +++ b/zh-cn/application-dev/ui/ts-component-based-preview.md @@ -3,14 +3,15 @@ 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 在单个源文件中，最多可以使用10个@Preview装饰自定义组件。 @Preview的用法如下： -``` +```ts +// xxx.ets @Entry @Component struct MyComponent { diff --git a/zh-cn/application-dev/ui/ts-component-based-styles.md b/zh-cn/application-dev/ui/ts-component-based-styles.md index 03a0ab8c6b..288081d69f 100644 --- a/zh-cn/application-dev/ui/ts-component-based-styles.md +++ b/zh-cn/application-dev/ui/ts-component-based-styles.md @@ -7,7 +7,8 @@ @Styles可以定义在组件内或组件外，在组件外定义时需在方法前添加function关键字，组件内定义时不需要添加function关键字。 -``` +```ts +// xxx.ets @Styles function globalFancy() { .backgroundColor(Color.Red) } @@ -39,7 +40,8 @@ struct FancyUse { 在StateStyles内可以直接调用组件外定义的Styles，但需要通过this关键字调用组件内定义的Styles。 -``` +```ts +// xxx.ets @Styles function globalFancy() { .width(100) .height(100) diff --git a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md index 1786a365cb..2ec686adbe 100644 --- a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md +++ b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md @@ -46,7 +46,8 @@ ## 示例 -``` +```ts +// xxx.ets @Entry @Component struct ParentComp { diff --git a/zh-cn/application-dev/ui/ts-component-states-link.md b/zh-cn/application-dev/ui/ts-component-states-link.md index 6855651df3..e6aef9bf93 100644 --- a/zh-cn/application-dev/ui/ts-component-states-link.md +++ b/zh-cn/application-dev/ui/ts-component-states-link.md @@ -14,13 +14,14 @@ - 创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过`'$'`操作符创建引用。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) 说明： +> 说明： > @Link变量不能在组件内部进行初始化。 ## 简单类型示例 -``` +```ts +// xxx.ets @Entry @Component struct Player { @@ -53,7 +54,8 @@ struct PlayButton { ## 复杂类型示例 -``` +```ts +// xxx.ets @Entry @Component struct Parent { @@ -93,7 +95,8 @@ struct Child { ## @Link、@State和@Prop结合使用示例 -``` +```ts +// xxx.ets @Entry @Component struct ParentView { diff --git a/zh-cn/application-dev/ui/ts-component-states-prop.md b/zh-cn/application-dev/ui/ts-component-states-prop.md index e62d23fa76..997bf63e91 100644 --- a/zh-cn/application-dev/ui/ts-component-states-prop.md +++ b/zh-cn/application-dev/ui/ts-component-states-prop.md @@ -16,7 +16,8 @@ ## 示例 -``` +```ts +// xxx.ets @Entry @Component struct ParentComponent { @@ -65,5 +66,5 @@ struct CountDownComponent { 在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行build方法，此时将创建一个新的CountDownComponent组件。父组件的countDownStartValue状态属性被用于初始化子组件的@Prop变量，当按下子组件的“Try again”按钮时，其@Prop变量count将被更改，CountDownComponent重新渲染。但是count值的更改不会影响父组件的countDownStartValue值。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 创建新组件实例时，必须初始化其所有@Prop变量。 diff --git a/zh-cn/application-dev/ui/ts-component-states-state.md b/zh-cn/application-dev/ui/ts-component-states-state.md index 6db720203f..2dd964f10e 100644 --- a/zh-cn/application-dev/ui/ts-component-states-state.md +++ b/zh-cn/application-dev/ui/ts-component-states-state.md @@ -18,7 +18,8 @@ ## 简单类型的状态属性示例 -``` +```ts +// xxx.ets @Entry @Component struct MyComponent { @@ -42,8 +43,9 @@ struct MyComponent { ## 复杂类型的状态变量示例 -``` +```ts // Customize the status data class. +// xxx.ets class Model { value: string constructor(value: string) { @@ -97,6 +99,6 @@ struct MyComponent { - EntryComponent中有多个MyComponent组件实例，第一个MyComponent内部状态的更改不会影响第二个MyComponent； - 创建MyComponent实例时通过变量名给组件内的变量进行初始化，如： - ``` + ```ts MyComponent({title: {value: 'Hello, World 2'}, count: 7}) ``` diff --git a/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md index 25b4d88fe9..17c9aa3f3f 100644 --- a/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md +++ b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md @@ -8,13 +8,13 @@ - Image组件的必选参数src： - ``` + ```ts Image('http://xyz/a.jpg') ``` - Text组件的必选参数content： - ``` + ```ts Text('123') ``` @@ -22,7 +22,7 @@ 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造Image和Text组件的参数： -``` +```ts // imagePath, where imageUrl is a private data variable defined in the component. Image(this.imagePath) Image('http://' + this.imageUrl) diff --git a/zh-cn/application-dev/ui/ts-custom-component-initialization.md b/zh-cn/application-dev/ui/ts-custom-component-initialization.md index 965671a1e2..761b9375f0 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-initialization.md +++ b/zh-cn/application-dev/ui/ts-custom-component-initialization.md @@ -4,12 +4,12 @@ - 本地初始化，例如： - ``` + ```ts @State counter: Counter = new Counter() ``` - 在构造组件时通过构造参数初始化，例如： - ``` + ```ts MyComponent({counter: $myCounter}) ``` @@ -17,17 +17,17 @@ 具体允许哪种方式取决于状态变量的装饰器： -| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 | -| -------- | -------- | -------- | -| @State | 必须 | 可选 | -| @Prop | 禁止 | 必须 | -| @Link | 禁止 | 必须 | -| @StorageLink | 必须 | 禁止 | -| @StorageProp | 必须 | 禁止 | -| @Provide | 必须 | 可选 | -| @Consume | 禁止 | 禁止 | -| @ObjectLink | 禁止 | 必须 | -| 常规成员变量 | 推荐 | 可选 | +| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 | +| ------------ | ----- | ----------- | +| @State | 必须 | 可选 | +| @Prop | 禁止 | 必须 | +| @Link | 禁止 | 必须 | +| @StorageLink | 必须 | 禁止 | +| @StorageProp | 必须 | 禁止 | +| @Provide | 必须 | 可选 | +| @Consume | 禁止 | 禁止 | +| @ObjectLink | 禁止 | 必须 | +| 常规成员变量 | 推荐 | 可选 | 从上表中可以看出： @@ -42,13 +42,13 @@ | 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 | -| -------- | -------- | -------- | -------- | -------- | -| @State | 不允许 | 允许 | 允许 | 允许 | -| @Link | 不允许 | 允许 | 不推荐 | 允许 | -| @Prop | 不允许 | 不允许 | 允许 | 允许 | -| @StorageLink | 不允许 | 允许 | 不允许 | 允许 | -| @StorageProp | 不允许 | 不允许 | 不允许 | 允许 | -| 常规变量 | 允许 | 不允许 | 不允许 | 允许 | +| ---------------------- | ------ | ----- | ----- | ---- | +| @State | 不允许 | 允许 | 允许 | 允许 | +| @Link | 不允许 | 允许 | 不推荐 | 允许 | +| @Prop | 不允许 | 不允许 | 允许 | 允许 | +| @StorageLink | 不允许 | 允许 | 不允许 | 允许 | +| @StorageProp | 不允许 | 不允许 | 不允许 | 允许 | +| 常规变量 | 允许 | 不允许 | 不允许 | 允许 | 从上表中可以看出： @@ -69,7 +69,8 @@ ## 示例 -``` +```ts +// xxx.ets class ClassA { public a:number constructor(a: number) { diff --git a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md index 9c1cd67d3d..7057e34756 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md +++ b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md @@ -5,18 +5,19 @@ ## 生命周期回调函数定义 -| 函数名 | 描述 | -| -------- | -------- | -| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 | +| 函数名 | 描述 | +| ---------------- | ---------------------------------------- | +| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 | | aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 | -| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | -| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | -| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 | +| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | +| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | +| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 | ## 示例 -``` +```ts +// xxx.ets @Entry @Component struct CountDownTimerComponent { @@ -48,7 +49,7 @@ struct CountDownTimerComponent { 上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等； -> +> > - 不允许在生命周期函数中使用async await。 diff --git a/zh-cn/application-dev/ui/ts-event-configuration.md b/zh-cn/application-dev/ui/ts-event-configuration.md index 9ded73d381..aa5637d2a0 100644 --- a/zh-cn/application-dev/ui/ts-event-configuration.md +++ b/zh-cn/application-dev/ui/ts-event-configuration.md @@ -4,7 +4,7 @@ - 使用lambda表达式配置组件的事件方法： - ``` + ```ts // Counter is a private data variable defined in the component. Button('add counter') .onClick(() => { @@ -14,7 +14,7 @@ - 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this引用包含的组件： - ``` + ```ts // Counter is a private data variable defined in the component. Button('add counter') .onClick(function () { @@ -24,13 +24,13 @@ - 使用组件的成员函数配置组件的事件方法： - ``` + ```ts myClickHandler(): void { // do something } - + ... - + Button('add counter') .onClick(this.myClickHandler) ``` diff --git a/zh-cn/application-dev/ui/ts-framework-directory.md b/zh-cn/application-dev/ui/ts-framework-directory.md index 70c440aaa0..3e54186c56 100644 --- a/zh-cn/application-dev/ui/ts-framework-directory.md +++ b/zh-cn/application-dev/ui/ts-framework-directory.md @@ -24,7 +24,7 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下： - **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > > - 资源目录resources文件夹位于src/main下，此目录下资源文件的详细规范以及子目录结构规范参看[资源文件的分类](../quick-start/basic-resource-file-categories.md)。 > diff --git a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md index ffc32f5b1b..3d8a3b5709 100644 --- a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md +++ b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md @@ -12,7 +12,8 @@ ## 示例 -``` +```ts +// xxx.ets import { FoodData, FoodList } from "../common/utils/utils.ets"; @Entry @@ -33,7 +34,7 @@ struct FoodCategoryList { 导入文件示例： -``` +```ts //common/utils/utils.ets export class FoodData { diff --git a/zh-cn/application-dev/ui/ts-framework-js-tag.md b/zh-cn/application-dev/ui/ts-framework-js-tag.md index c863838416..fd31748b84 100644 --- a/zh-cn/application-dev/ui/ts-framework-js-tag.md +++ b/zh-cn/application-dev/ui/ts-framework-js-tag.md @@ -3,19 +3,19 @@ 开发框架需要应用的config.json中配置相关的js标签，其中包含了实例名称、页面路由、视图窗口配置信息。 -| 标签 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| name | string | default | 是 | 标识ETS实例的名字。 | -| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 | -| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 | -| mode | Object | - | 否 | 配置Js Component运行类型与语法风格，详见[mode](#mode)说明。 | +| 标签 | 类型 | 默认值 | 必填 | 描述 | +| ------ | ------ | ------- | ---- | ---------------------------------------- | +| name | string | default | 是 | 标识ETS实例的名字。 | +| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 | +| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 | +| mode | Object | - | 否 | 配置Js Component运行类型与语法风格，详见[mode](#mode)说明。 | ## pages 定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： -``` +```json { "pages": [ "pages/index", @@ -24,11 +24,11 @@ } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - pages列表中第一个页面为应用的首页入口。 -> +> > - 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。 -> +> > - 每个页面文件中必须包含[页面入口组件](../ui/ts-component-based-entry.md)(\@Entry装饰)。 @@ -36,11 +36,11 @@ 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": { @@ -55,12 +55,12 @@ window用于配置相关视图显示窗口，支持配置如下属性： mode用于配置JS Component的运行类型与语法风格，支持如下属性： -| 类型 | 默认值 | 说明 | -| -------- | -------- | -------- | -| type | - | 配置该JS Component的运行类型，可选值为：
- pageAbility：以ability的方式运行该JS Component。
- form：以卡片的方式运行该JS Component。 | -| syntax | - | 配置该JS Component的语法风格，可选值为：
- hml：以hml/css/js风格进行编写。
- ets：以声明式语法风格进行编写。 | +| 类型 | 默认值 | 说明 | +| ------ | ---- | ---------------------------------------- | +| type | - | 配置该JS Component的运行类型，可选值为：
- pageAbility：以ability的方式运行该JS Component。
- form：以卡片的方式运行该JS Component。 | +| syntax | - | 配置该JS Component的语法风格，可选值为：
- hml：以hml/css/js风格进行编写。
- ets：以声明式语法风格进行编写。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 不支持同时配置type类型为form，syntax类型为ets。 @@ -68,7 +68,7 @@ mode用于配置JS Component的运行类型与语法风格，支持如下属性 config.json: -``` +```json { "app": { "bundleName": "com.example.player", diff --git a/zh-cn/application-dev/ui/ts-function-build.md b/zh-cn/application-dev/ui/ts-function-build.md index 240d262cdd..82d6b93c4f 100644 --- a/zh-cn/application-dev/ui/ts-function-build.md +++ b/zh-cn/application-dev/ui/ts-function-build.md @@ -3,12 +3,12 @@ build函数满足Builder构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述Builder接口约束，在build方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用build方法。 -``` +```ts interface Builder { build: () => void } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > build方法仅支持组合组件，使用渲染控制语法。 diff --git a/zh-cn/application-dev/ui/ts-general-ui-concepts.md b/zh-cn/application-dev/ui/ts-general-ui-concepts.md index 3b56f1795a..d155cd948d 100644 --- a/zh-cn/application-dev/ui/ts-general-ui-concepts.md +++ b/zh-cn/application-dev/ui/ts-general-ui-concepts.md @@ -5,8 +5,9 @@ ## HelloWorld基本示例 -``` +```ts // An example of displaying Hello World. After you click the button, Hello UI is displayed. +// xxx.ets @Entry @Component struct Hello { diff --git a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md index 3166aba4f9..020490d649 100644 --- a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md +++ b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md @@ -4,28 +4,29 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触 表1 @Provide -| 名称 | 说明 | -| -------- | -------- | -| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 | -| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 | -| 初始值 | 必须制定初始值。 | +| 名称 | 说明 | +| ------- | ---------------------------------------- | +| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 | +| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 | +| 初始值 | 必须制定初始值。 | | 页面重渲染场景 | 触发页面渲染的修改：
- 基础类型（boolean，string，number）变量的改变；
- @Observed class类型变量及其属性的修改；
- 添加，删除，更新数组中的元素。 | 表2 @Consume -| 类型 | 说明 | -| -------- | -------- | -| 初始值 | 不可设置默认值。 | +| 类型 | 说明 | +| ---- | -------- | +| 初始值 | 不可设置默认值。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 使用@Provide 和@Consume时避免循环引用导致死循环。 其他属性说明与Provide一致。 -``` +```ts +// xxx.ets @Entry @Component struct CompA { diff --git a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md index ab86d63248..7a76f0d0c4 100644 --- a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md +++ b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md @@ -120,7 +120,7 @@ struct ViewB { ### 案例2 ```ts -//父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新 +// 父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新 var nextID: number = 0; @Observed class ClassA { diff --git a/zh-cn/application-dev/ui/ts-other-states-watch.md b/zh-cn/application-dev/ui/ts-other-states-watch.md index 40c9dd2d50..b1a6feb21e 100644 --- a/zh-cn/application-dev/ui/ts-other-states-watch.md +++ b/zh-cn/application-dev/ui/ts-other-states-watch.md @@ -3,7 +3,7 @@ @Watch用于监听状态变量的变化，语法结构为： -``` +```ts @State @Watch("onChanged") count : number = 0 ``` @@ -14,7 +14,8 @@ 装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink装饰的变量可以监听其变化。 -``` +```ts +// xxx.ets @Entry @Component struct CompA { diff --git a/zh-cn/application-dev/ui/ts-parameterless-configuration.md b/zh-cn/application-dev/ui/ts-parameterless-configuration.md index 51a176b908..b328a96662 100644 --- a/zh-cn/application-dev/ui/ts-parameterless-configuration.md +++ b/zh-cn/application-dev/ui/ts-parameterless-configuration.md @@ -4,7 +4,7 @@ 组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。例如，Divider组件不包含构造参数： -``` +```ts Column() { Text('item 1') Divider() // No parameter configuration of the divider component diff --git a/zh-cn/application-dev/ui/ts-pixel-units.md b/zh-cn/application-dev/ui/ts-pixel-units.md index 928baecba0..eda7b03168 100644 --- a/zh-cn/application-dev/ui/ts-pixel-units.md +++ b/zh-cn/application-dev/ui/ts-pixel-units.md @@ -3,31 +3,32 @@ 为开发者提供4种像素单位，框架采用vp为基准数据单位。 -| 名称 | 描述 | -| -------- | -------- | -| px | 屏幕物理像素单位。 | -| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | -| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | -| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | +| 名称 | 描述 | +| ---- | ---------------------------------------- | +| px | 屏幕物理像素单位。 | +| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | +| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | +| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | ## 像素单位转换 提供其他单位与px单位互相转换的方法。 -| 接口 | 描述 | -| -------- | -------- | -| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。 | -| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。 | -| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。 | -| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。 | +| 接口 | 描述 | +| ---------------------------------------- | ---------------------- | +| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。 | +| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。 | +| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。 | +| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。 | | lpx2px(value : number) : number | 将lpx单位的数值转换为以px为单位的数值。 | | px2lpx(value : number) : number | 将px单位的数值转换为以lpx为单位的数值。 | ## 示例 -``` +```ts +// xxx.ets @Entry @Component struct Example { diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md index a4f390c0b0..387c082ab3 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md @@ -3,7 +3,7 @@ 开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。ForEach定义如下： -``` +```ts ForEach( arr: any[], // Array to be iterated itemGenerator: (item: any, index?: number) => void, // child component generator @@ -20,26 +20,26 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGen 表1 参数说明 -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1, 3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 | -| itemGenerator | (item: any, index?: number) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 | -| keyGenerator | (item: any, index?: number) => string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1, 3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 | +| itemGenerator | (item: any, index?: number) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 | +| keyGenerator | (item: any, index?: number) => string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 必须在容器组件内使用； -> +> > - 生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中； -> +> > - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： -> ``` +> ```ts > ForEach(anArray, item => {Text(`${++counter}. item.label`)}) > ``` -> +> > 正确的示例如下： -> -> ``` +> +> ```ts > ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), > item => Text(`${item.i}. item.data.label`), > item => item.data.id.toString()) @@ -50,7 +50,8 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGen 简单类型数组示例： -``` +```ts +// xxx.ets @Entry @Component struct MyComponent { @@ -76,7 +77,8 @@ struct MyComponent { ``` 复杂类型数组示例： -``` +```ts +// xxx.ets class Month { year: number month: number diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md index 8bbe9f8734..fc496c42b6 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md @@ -3,13 +3,13 @@ 使用if/else进行条件渲染。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - if条件语句可以使用状态变量。 -> +> > - 使用if可以使子组件的渲染依赖条件语句。 -> +> > - 必须在容器组件内使用。 -> +> > - 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件。例如，Grid组件的子组件仅支持GridItem组件，在Grid组件内使用if时，则if条件语句内仅允许使用GridItem组件。 @@ -17,7 +17,7 @@ 使用if条件语句： -``` +```ts Column() { if (this.count > 0) { Text('count is positive') @@ -29,7 +29,7 @@ Column() { 使用if、else if、else条件语句： -``` +```ts Column() { if (this.count < 0) { Text('count is negative') diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md index 1b3604307c..7c70032dec 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md @@ -3,7 +3,7 @@ 开发框架提供数据懒加载（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。LazyForEach定义如下： -``` +```ts LazyForEach( dataSource: IDataSource, // Data source to be iterated itemGenerator: (item: any) => void, // child component generator @@ -36,57 +36,57 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyG 表1 参数说明 -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 | -| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 | -| keyGenerator | (item: any) => string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------------- | --------------------------------------- | ---- | ---- | ---------------------------------------- | +| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 | +| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 | +| keyGenerator | (item: any) => string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 | 表2 IDataSource类型说明 -| 名称 | 描述 | -| -------- | -------- | -| totalCount(): number | 获取数据总数。 | -| getData(index: number): any | 获取索引对应的数据。 | +| 名称 | 描述 | +| ---------------------------------------- | ----------- | +| totalCount(): number | 获取数据总数。 | +| getData(index: number): any | 获取索引对应的数据。 | | registerDataChangeListener(listener:DataChangeListener): void | 注册改变数据的控制器。 | | unregisterDataChangeListener(listener:DataChangeListener): void | 注销改变数据的控制器。 | 表3 DataChangeListener类型说明 -| 名称 | 描述 | -| -------- | -------- | -| onDataReloaded(): void | 重新加载所有数据。 | -| onDataAdded(index: number): void (deprecated) | 通知组件index的位置有数据添加。 | -| onDataMoved(from: number, to: number): void (deprecated) | 通知组件数据从from的位置移到to的位置。 | -| onDataDeleted(index: number): void (deprecated) | 通知组件index的位置有数据删除。 | -| onDataChanged(index: number): void (deprecated) | 通知组件index的位置有数据变化。 | -| onDataAdd(index: number): void 8+ | 通知组件index的位置有数据添加。 | +| 名称 | 描述 | +| ---------------------------------------- | ---------------------- | +| onDataReloaded(): void | 重新加载所有数据。 | +| onDataAdded(index: number): void (deprecated) | 通知组件index的位置有数据添加。 | +| onDataMoved(from: number, to: number): void (deprecated) | 通知组件数据从from的位置移到to的位置。 | +| onDataDeleted(index: number): void (deprecated) | 通知组件index的位置有数据删除。 | +| onDataChanged(index: number): void (deprecated) | 通知组件index的位置有数据变化。 | +| onDataAdd(index: number): void 8+ | 通知组件index的位置有数据添加。 | | onDataMove(from: number, to: number): void 8+ | 通知组件数据从from的位置移到to的位置。 | -| onDataDelete(index: number): void 8+ | 通知组件index的位置有数据删除。 | -| onDataChange(index: number): void 8+ | 通知组件index的位置有数据变化。 | +| onDataDelete(index: number): void 8+ | 通知组件index的位置有数据删除。 | +| onDataChange(index: number): void 8+ | 通知组件index的位置有数据变化。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据； -> +> > - LazyForEach在每次迭代中，必须且只允许创建一个子组件； -> +> > - 生成的子组件必须允许在LazyForEach的父容器组件中； -> +> > - 允许LazyForEach包含在if/else条件渲染语句中，不允许LazyForEach中出现if/else条件渲染语句； -> +> > - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新； -> +> > - 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： -> ``` +> ```ts > LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)}) > ``` -> +> > 正确的示例如下： -> -> ``` +> +> ```ts > LazyForEach(dataSource, > item => Text(`${item.i}. item.data.label`)), > item => item.data.id.toString()) @@ -95,7 +95,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyG ## 示例 -``` +```ts // Basic implementation of IDataSource to handle data listener class BasicDataSource implements IDataSource { private listeners: DataChangeListener[] = [] diff --git a/zh-cn/application-dev/ui/ts-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md index b71591bbdc..7858ba7a8a 100644 --- a/zh-cn/application-dev/ui/ts-resource-access.md +++ b/zh-cn/application-dev/ui/ts-resource-access.md @@ -5,7 +5,7 @@ 在工程中，通过```"$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'`。 @@ -63,7 +63,7 @@ Image($r('sys.media.ohos_app_icon')) color.json文件的内容如下： -``` +```json { "color": [ { @@ -81,7 +81,7 @@ color.json文件的内容如下： float.json文件的内容如下： -``` +```json { "float":[ { @@ -99,7 +99,7 @@ float.json文件的内容如下： string.json文件的内容如下： -``` +```json { "string":[ { @@ -121,7 +121,7 @@ string.json文件的内容如下： plural.json文件的内容如下： -``` +```json { "plural":[ { diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar.md b/zh-cn/application-dev/ui/ts-syntactic-sugar.md index 92b9df0a89..0ce4cad3b5 100644 --- a/zh-cn/application-dev/ui/ts-syntactic-sugar.md +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar.md @@ -9,7 +9,7 @@ 如下示例为@Component和@State的使用，被 @Component装饰的元素具备了组件化的含义，使用@State装饰的变量具备了状态数据的含义。 -``` +```ts @Component struct MyComponent { @State count: number = 0 @@ -20,7 +20,7 @@ struct MyComponent { 装饰器定义在同一行上的描述如下： -``` +```ts @Entry @Component struct MyComponent { } ``` @@ -29,7 +29,7 @@ struct MyComponent { 但更推荐定义在多行上： -``` +```ts @Entry @Component struct MyComponent { @@ -39,29 +39,29 @@ struct MyComponent { ### 支持的装饰器列表 -| 装饰器 | 装饰内容 | 说明 | -| -------- | -------- | -------- | -| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 | -| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | -| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 | -| @Builder | 方法 | 在@Builder装饰的方法里，通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 | -| @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 | -| @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 | -| @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。 | -| @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 | -| @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。 | -| @Observed | 类 | @Observed应用于类，表示该类中的数据变更被UI页面管理。 | -| @ObjectLink | 被@Observed所装饰类的对象 | 装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。 | -| @Consume | 基本数据类型，类，数组 | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 | -| @Provide | 基本数据类型，类，数组 | @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。 | -| @Watch | 被@State, @Prop, @Link, @ObjectLink, 
@Provide, @Consume, @StorageProp， @StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化，应用可以注册回调方法。 | +| 装饰器 | 装饰内容 | 说明 | +| ------------- | ---------------------------------------- | ---------------------------------------- | +| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 | +| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | +| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 | +| @Builder | 方法 | 在@Builder装饰的方法里，通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 | +| @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 | +| @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 | +| @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。 | +| @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 | +| @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。 | +| @Observed | 类 | @Observed应用于类，表示该类中的数据变更被UI页面管理。 | +| @ObjectLink | 被@Observed所装饰类的对象 | 装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。 | +| @Consume | 基本数据类型，类，数组 | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 | +| @Provide | 基本数据类型，类，数组 | @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。 | +| @Watch | 被@State, @Prop, @Link, @ObjectLink, 
@Provide, @Consume, @StorageProp， @StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化，应用可以注册回调方法。 | ## 链式调用 允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。 -``` +```ts Column() { Image('1.jpg') .alt('error.jpg') @@ -75,7 +75,7 @@ Column() { 组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。 -``` +```ts @Component struct MyComponent { @State data: string = '' @@ -90,7 +90,7 @@ struct MyComponent { 对于struct的实例化，可以省略new。 -``` +```ts // 定义 @Component struct MyComponent { @@ -124,7 +124,7 @@ TS语言的使用在生成器函数中存在一定的限制： 非法示例： -``` +```ts build() { let a: number = 1 // invalid: variable declaration not allowed Column() { @@ -137,14 +137,15 @@ build() { ``` -## $$ +## $ $$支持变量双向绑定，支持简单变量、@State、@Link、@Prop等类型。 当前$$仅支持[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)属性的show参数和@State变量之间的渲染，以及Radio组件的checked属性。 -``` +```ts +// xxx.ets @Entry @Component struct bindPopup { diff --git a/zh-cn/application-dev/ui/ts-syntax-intro.md b/zh-cn/application-dev/ui/ts-syntax-intro.md index cd2e1b5bc6..129f1d5459 100644 --- a/zh-cn/application-dev/ui/ts-syntax-intro.md +++ b/zh-cn/application-dev/ui/ts-syntax-intro.md @@ -6,7 +6,7 @@ 本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考组件说明。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 本节所有示例都以TS语言为例，请遵循相应语言的语法要求。 > > - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 diff --git a/zh-cn/application-dev/ui/ts-types.md b/zh-cn/application-dev/ui/ts-types.md index 665108d5c1..dac58cd282 100644 --- a/zh-cn/application-dev/ui/ts-types.md +++ b/zh-cn/application-dev/ui/ts-types.md @@ -2,58 +2,58 @@ ## 长度类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | +| 名称 | 类型定义 | 描述 | +| ------ | -------------------------- | ---------------------------------------- | +| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | ## 角度类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 | +| 名称 | 类型定义 | 描述 | +| ----- | -------------------------- | ---------------------------------------- | +| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 | ## 点类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | +| 名称 | 类型定义 | 描述 | +| ----- | --------------------- | --------------------------- | +| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | ## 颜色类型 组件属性方法使用的颜色Color说明如下： -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 | +| 名称 | 类型定义 | 描述 | +| ----- | ---------------------------------------- | ---------------------------------------- | +| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 | 当前支持的Color颜色枚举： -| 颜色名称 | 颜色值 | 颜色示意 | -| -------- | -------- | -------- | -| Black | 0x000000 | ![zh-cn_image_0000001219864153](figures/zh-cn_image_0000001219864153.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) | -| Gray | 0x808080 | ![zh-cn_image_0000001174264376](figures/zh-cn_image_0000001174264376.png) | -| Green | 0x008000 | ![zh-cn_image_0000001174422914](figures/zh-cn_image_0000001174422914.png) | -| Orange | 0xffa500 | ![zh-cn_image_0000001219662661](figures/zh-cn_image_0000001219662661.png) | -| Pink | 0xffc0cb | ![zh-cn_image_0000001219662663](figures/zh-cn_image_0000001219662663.png) | -| Red | 0xff0000 | ![zh-cn_image_0000001219662665](figures/zh-cn_image_0000001219662665.png) | -| White | 0xffffff | ![zh-cn_image_0000001174582866](figures/zh-cn_image_0000001174582866.png) | -| Yellow | 0xffff00 | ![zh-cn_image_0000001174582864](figures/zh-cn_image_0000001174582864.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) | +| Brown | 0xa52a2a | ![zh-cn_image_0000001219744201](figures/zh-cn_image_0000001219744201.png) | +| Gray | 0x808080 | ![zh-cn_image_0000001174264376](figures/zh-cn_image_0000001174264376.png) | +| Green | 0x008000 | ![zh-cn_image_0000001174422914](figures/zh-cn_image_0000001174422914.png) | +| Orange | 0xffa500 | ![zh-cn_image_0000001219662661](figures/zh-cn_image_0000001219662661.png) | +| Pink | 0xffc0cb | ![zh-cn_image_0000001219662663](figures/zh-cn_image_0000001219662663.png) | +| Red | 0xff0000 | ![zh-cn_image_0000001219662665](figures/zh-cn_image_0000001219662665.png) | +| White | 0xffffff | ![zh-cn_image_0000001174582866](figures/zh-cn_image_0000001174582866.png) | +| Yellow | 0xffff00 | ![zh-cn_image_0000001174582864](figures/zh-cn_image_0000001174582864.png) | ## ColorStop类型 颜色断点类型，用于描述渐进色颜色断点。 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | +| 名称 | 类型定义 | 描述 | +| --------- | -------------------- | -------------------------------------- | +| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | ## Resource类型 @@ -74,42 +74,43 @@ filename：工程中resources/rawfile目录下的文件名称。 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| Resource | {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
} | - id：资源id值。
- type：资源类型（枚举值）。
- params：可选参数。
通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 | +| 名称 | 类型定义 | 描述 | +| -------- | ---------------------------------------- | ---------------------------------------- | +| Resource | {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
} | - id：资源id值。
- type：资源类型（枚举值）。
- params：可选参数。
通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 | ## ResourceStr类型8+ -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| ResourceStr | string \| Resource| 用于描述资源字符串的类型。 | +| 名称 | 类型定义 | 描述 | +| ----------- | ---------------------------- | ------------- | +| ResourceStr | string \| Resource | 用于描述资源字符串的类型。 | ## ResourceColor类型8+ -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| ResourceColor | Color \| number \| string \| Resource | 用于描述资源颜色类型。 | +| 名称 | 类型定义 | 描述 | +| ------------- | ---------------------------------------- | ----------- | +| ResourceColor | Color \| number \| string \| Resource | 用于描述资源颜色类型。 | ## Font类型8+ -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | +| 名称 | 类型定义 | 描述 | +| ---- | ---------------------------------------- | ---------------------------------------- | | Font | {
size?: Length;
weight?: FontWeight  \| number  \| string;
family?: string  \| Resource;
style?: FontStyle;
} | 设置文本样式：
size: 设置文本尺寸，Length为number类型时，使用fp单位。
weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
style: 设置文本的字体样式。 | ## CustomBuilder类型8+ 组件属性方法参数可使用CustomBuilder类型来自定义UI描述。 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | +| 名称 | 类型定义 | 描述 | +| ------------- | ---------------------- | ---------------------------------------- | | CustomBuilder | () => any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 | ## 示例 -``` +```ts +// xxx.ets @Entry @Component struct dataTypeExample { diff --git a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md index 9ee8bcd9bb..4ae1fd27f0 100644 --- a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md +++ b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md @@ -13,7 +13,7 @@ - @Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。 - @Prop：原理类似@Link，但是子组件所做的更改不会同步到父组件上，属于单向传递。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 状态变量名称不能使用id，如@Prop id:number 。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md index 070efe2fd5..ed82f95ad1 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md @@ -5,7 +5,7 @@ 在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。 -``` +```html
@@ -18,7 +18,7 @@ ``` -``` +```css /* xxx.css */ .container { background-color:#F1F3F5; @@ -86,7 +86,7 @@ text{ ![zh-cn_image_0000001217168141](figures/zh-cn_image_0000001217168141.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。 -> +> > - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md index c293ca9b6a..b9fb5bb919 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md @@ -5,7 +5,7 @@ 通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。 -``` +```html
@@ -14,7 +14,7 @@ ``` -``` +```css /* xxx.css */ .container { height: 100%; @@ -80,7 +80,7 @@ ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > background-position仅支持背景图片的移动，不支持背景颜色（background-color）。 ![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif) diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md index 91baf79e19..03b8b958ea 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-component.md +++ b/zh-cn/application-dev/ui/ui-js-animate-component.md @@ -7,14 +7,14 @@ 通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。 -``` +```html
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -30,7 +30,7 @@ } ``` -``` +```js /* xxx.js */ export default { data: { @@ -60,23 +60,23 @@ export default { ![zh-cn_image_0000001175235138](figures/zh-cn_image_0000001175235138.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- 使用animate方法时必须传入Keyframes和Options参数。 ->- 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。 +> **说明：** +> - 使用animate方法时必须传入Keyframes和Options参数。 +> - 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。 ## 设置动画参数 在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。 -``` +```html
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -92,7 +92,7 @@ export default { } ``` -``` +```js /* xxx.js */ export default { data: { @@ -138,21 +138,21 @@ export default { ![zh-cn_image_0000001174916742](figures/zh-cn_image_0000001174916742.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - translate、scale和rtotate的先后顺序会影响动画效果。 -> +> > - transformOrigin只对scale和rtotate起作用。 在获取动画对象后，通过设置参数Options来设置动画的属性。 -``` +```html
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -168,7 +168,7 @@ export default { } ``` -``` +```js /* xxx.js */ export default { data: { @@ -206,15 +206,15 @@ export default { ![zh-cn_image_0000001220396499](figures/zh-cn_image_0000001220396499.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > direction：指定动画的播放模式。 -> +> > normal： 动画正向循环播放。 -> +> > reverse： 动画反向循环播放。 -> +> > alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。 -> +> > alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 @@ -222,7 +222,7 @@ export default { animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。 -``` +```html
@@ -238,7 +238,7 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -270,8 +270,8 @@ button{ } ``` -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data: { @@ -348,7 +348,7 @@ export default { 通过改变playStat的属性实现动画状态的改变。 -``` +```html
@@ -362,7 +362,7 @@ export default {
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -394,8 +394,8 @@ button{ } ``` -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md index 1d56e5a4f7..e9d60c5cf4 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md +++ b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -3,7 +3,7 @@ 通过设置插值器来实现动画效果。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 从API Version 6 开始支持。 @@ -11,7 +11,7 @@ 通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。 -``` +```html
@@ -22,7 +22,7 @@
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -44,8 +44,8 @@ button{ } ``` -``` -/* xxx.js */ +```js +// xxx.js import animator from '@ohos.animator'; export default { data: { @@ -78,7 +78,7 @@ export default { ![zh-cn_image_0000001174756776](figures/zh-cn_image_0000001174756776.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 使用createAnimator创建动画对象时必须传入options参数。 > > - begin插值起点，不设置时默认为0。 @@ -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)。 -``` +```html
@@ -25,7 +25,7 @@ runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -39,8 +39,8 @@ button{ } ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { timer: null, @@ -95,7 +95,7 @@ export default { ![zh-cn_image_0000001174756860](figures/zh-cn_image_0000001174756860.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。 @@ -103,7 +103,7 @@ export default { 通过cancelAnimationFrame函数取消逐帧回调，在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。 -``` +```html
@@ -122,7 +122,7 @@ export default {
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -136,8 +136,8 @@ button{ } ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { timer: null, @@ -184,5 +184,5 @@ export default { ![zh-cn_image_0000001220316655](figures/zh-cn_image_0000001220316655.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 在调用该函数时需传入一个具有标识id的参数。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md index f4e2052989..beed6f9df2 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-svg.md +++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md @@ -9,7 +9,7 @@ 在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。 -``` +```html
@@ -37,7 +37,7 @@ ![zh-cn_image_0000001183871404](figures/zh-cn_image_0000001183871404.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 在设置动画变化值时，如果已经设置了values属性，则from和to都失效。 @@ -46,7 +46,7 @@ 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。 -``` +```html
@@ -68,7 +68,7 @@ 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。 -``` +```html
@@ -94,7 +94,7 @@ ``` -``` +```css /* xxx.css */ .container { flex-direction: column; diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md index e0f2992b2f..4c642a9325 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-transform.md +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -7,7 +7,7 @@ 创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。 -``` +```html
@@ -22,7 +22,7 @@
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -96,7 +96,7 @@ 小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。 -``` +```html
@@ -104,7 +104,7 @@
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -175,7 +175,7 @@ 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。 -``` +```html
@@ -194,7 +194,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -301,7 +301,7 @@ ![zh-cn_image_0000001220316305](figures/zh-cn_image_0000001220316305.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。 @@ -311,7 +311,7 @@ 设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。 -``` +```html
@@ -326,7 +326,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -414,7 +414,7 @@ text{ ![zh-cn_image_0000001220396251](figures/zh-cn_image_0000001220396251.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width），子元素不会改变。 @@ -422,14 +422,14 @@ text{ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。 -``` +```html
``` -``` +```css /* xxx.css */ .container{ background-color:#F1F3F5; @@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。 -``` +```html
@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
``` -``` +```css /* xxx.css */ .container{ flex-direction:column; @@ -568,11 +568,11 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ![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属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md index eeecc674d8..03c99a2899 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md @@ -15,7 +15,7 @@ 具体的使用示例如下，更多信息请参考[组件方法](../reference/arkui-js/js-components-common-methods.md)。 -``` +```html
hello @@ -24,7 +24,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -78,7 +78,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动画的过渡效果，并通过一个样式类型在hml文件中调用。animation-name的使用示例如下： -``` +```html
animation-name @@ -92,7 +92,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
``` -``` +```css /* xxx.css */ .item-container { margin-right: 60px; diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-event.md b/zh-cn/application-dev/ui/ui-js-building-ui-event.md index 93752ddd5c..9c09ebb86f 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-event.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-event.md @@ -21,7 +21,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。 具体的使用示例如下： -``` +```html
@@ -45,7 +45,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -68,7 +68,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。 } ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md index 8f6957b695..b520951a42 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md @@ -17,7 +17,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状态，从而更新显示的image组件。如果isPressed为真，则点赞数加1。该函数在hml文件中对应的div组件上生效，点赞按钮各子组件的样式设置在css文件当中。具体的实现示例如下： -``` +```html
@@ -29,7 +29,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状 ``` -``` +```css /* xxx.css */ .like { width: 104px; @@ -53,7 +53,7 @@ click事件作为一个函数定义在js文件中，可以更改isPressed的状 ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md index ffc8508d19..295661a261 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md @@ -6,7 +6,7 @@ 留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件（通过if属性控制）。在包含文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示例如下： -``` +```html
Comment @@ -22,7 +22,7 @@ ``` -``` +```css /* xxx.css */ .container { margin-top: 24px; @@ -64,7 +64,7 @@ ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md index 9745b4d08f..aa49414732 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md @@ -7,7 +7,7 @@ 当页面结构较为复杂时，如果使用div循环渲染，容易出现卡顿，因此推荐使用list组件代替div组件实现长列表布局，从而实现更加流畅的列表滚动体验。需要注意的是，list仅支持list-item作为子组件，具体的使用示例如下： -``` +```html @@ -16,7 +16,7 @@ ``` -``` +```css /* xxx.css */ .desc-text { width: 683.3px; @@ -24,7 +24,7 @@ } ``` -``` +```js // xxx.js export default { data: { @@ -40,7 +40,7 @@ export default { 当页面经常需要动态加载时，推荐使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示例如下： -``` +```html @@ -56,7 +56,7 @@ export default { ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md index 78672e1b5d..0bcfe0af4e 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md @@ -7,13 +7,13 @@ 图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../ui/js-framework-file.md#目录结构)。代码示例如下： -``` +```html ``` -``` +```css /* xxx.css */ .img { margin-top: 30px; @@ -23,7 +23,7 @@ ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md index cb3a7c1a18..9dbcf23ef4 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md @@ -3,7 +3,7 @@ 实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考[text](../reference/arkui-js/js-components-basic-text.md)。在页面中插入标题和文本区域的示例如下： -``` +```html
{{headTitle}} @@ -13,7 +13,7 @@ ``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -34,7 +34,7 @@ ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md index eaa20d1aa8..084977da6a 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md @@ -17,7 +17,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组件用来指明当前页面，button组件用来实现两个页面之间的相互跳转。hml文件代码示例如下： -``` +```html
This is the index page. @@ -25,7 +25,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组
``` -``` +```html
This is the detail page. @@ -38,7 +38,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组 构建index和detail页面的页面样式，text组件和button组件居中显示，两个组件之间间距为50px。css代码如下（两个页面样式代码一致）： -``` +```css /* index.css */ /* detail.css */ .container { @@ -58,7 +58,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组 为了使button组件的launch方法生效，需要在页面的js文件中实现跳转逻辑。调用router.push()接口将uri指定的页面添加到路由栈中，即跳转到uri指定的页面。在调用router方法之前，需要导入router模块。代码示例如下： -``` +```js // index.js import router from '@system.router'; export default { @@ -70,7 +70,7 @@ export default { } ``` -``` +```js // detail.js import router from '@system.router'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md index 59421b9fef..21a1e4aa98 100644 --- a/zh-cn/application-dev/ui/ui-js-component-tabs.md +++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md @@ -1,14 +1,14 @@ -# 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 +
item1 @@ -26,7 +26,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -45,12 +45,12 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif) -## 设置Tabs方向 +## 设置tabs方向 -Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。 +tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。 -``` - +```html +
@@ -73,8 +73,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。 -``` - +```html +
@@ -98,9 +98,9 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ## 设置样式 -设置Tabs背景色及边框和tab-content布局。 -``` - +设置tabs背景色及边框和tab-content布局。 +```html +
@@ -119,7 +119,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -152,10 +152,10 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ## 显示页签索引 -开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。 +开发者可以为tabs添加change事件，实现页签切换后显示当前页签索引的功能。 -``` - +```html +
@@ -174,8 +174,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
``` -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { tabChange(e){ @@ -189,7 +189,7 @@ export default { ![zh-cn_image_0000001163228638](figures/zh-cn_image_0000001163228638.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > > tabs子组件仅支持一个[\](../reference/arkui-js/js-components-container-tab-bar.md)和一个[\](../reference/arkui-js/js-components-container-tab-content.md)。 @@ -200,8 +200,8 @@ export default { 用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。 -``` - +```html +
@@ -228,7 +228,7 @@ export default {
``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -264,8 +264,8 @@ background-color:#F1F3F5; } ``` -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data() { @@ -312,6 +312,6 @@ export default { ## 相关实例 -针对Tabs开发，有以下相关实例可供参考： +针对tabs开发，有以下相关实例可供参考： -- [`Tabs`：页签容器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs) \ No newline at end of file +- [`tabs`：页签容器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/tabs) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md index b6ac4f4679..6e6fd208a3 100644 --- a/zh-cn/application-dev/ui/ui-js-components-button.md +++ b/zh-cn/application-dev/ui/ui-js-components-button.md @@ -1,20 +1,20 @@ -# 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
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -29,12 +29,12 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ![zh-cn_image_0000001211225091](figures/zh-cn_image_0000001211225091.png) -## 设置Button类型 +## 设置button类型 -通过设置Button的type属性来选择按钮类型，如定义Button为圆形按钮、文本按钮等。 +通过设置button的type属性来选择按钮类型，如定义button为圆形按钮、文本按钮等。 -``` +```html
@@ -43,7 +43,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -73,14 +73,14 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ![zh-cn_image_0000001208771093](figures/zh-cn_image_0000001208771093.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 胶囊按钮（type=capsule）不支持border相关样式。 -> +> > - 圆形按钮（type=circle）不支持文本相关样式。 -> +> > - 文本按钮（type=text），自适应文本大小，不支持尺寸样式设置（radius，width，height），背景透明不支持background-color样式。 -> -> - Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。 +> +> - button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。 如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。 @@ -98,16 +98,16 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ## 显示下载进度 -为Button组件添加progress方法，来实时显示下载进度条的进度。 +为button组件添加progress方法，来实时显示下载进度条的进度。 -``` +```html
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -124,7 +124,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -174,16 +174,16 @@ export default { ![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > setProgress方法只支持button的类型为download。 ## 场景示例 -在本场景中，开发者可根据输入的文本内容进行Button类型切换。 +在本场景中，开发者可根据输入的文本内容进行button类型切换。 -``` +```html
@@ -201,7 +201,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -248,7 +248,7 @@ export default { ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md index 5eb3b7ac4d..36793f7a6b 100644 --- a/zh-cn/application-dev/ui/ui-js-components-canvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md @@ -17,7 +17,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -32,7 +32,7 @@ canvas{ ![zh-cn_image_0000001222984605](figures/zh-cn_image_0000001222984605.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - Canvas组件默认背景色与父组件的背景色一致。 > > - Canvas默认宽高为width: 300px，height: 150px。 @@ -43,7 +43,7 @@ canvas{ Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。 -``` +```html
@@ -51,7 +51,7 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -75,7 +75,7 @@ canvas{ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。 -``` +```html
@@ -85,7 +85,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ``` -``` +```css /* xxx.css */ .container{ width:100%; @@ -112,7 +112,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -137,7 +137,7 @@ export default { ![zh-cn_image_0000001222985331](figures/zh-cn_image_0000001222985331.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 画布不支持在onInit和onReady中进行创建。 ## 相关实例 diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md index 3865c41f1e..35e71ec12f 100644 --- a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md @@ -9,7 +9,7 @@ 使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。 -``` +```html
@@ -24,7 +24,7 @@ ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -47,7 +47,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -209,7 +209,7 @@ export default { -``` +```html
@@ -224,7 +224,7 @@ export default { -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -248,7 +248,7 @@ select{ -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -307,7 +307,7 @@ export default { 添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。 -``` +```html
@@ -321,7 +321,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -344,7 +344,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -432,7 +432,7 @@ export default { 先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。 -``` +```html
@@ -445,7 +445,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -468,7 +468,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -557,7 +557,7 @@ export default { ![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一致·。 @@ -566,7 +566,7 @@ export default { 创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。 -``` +```html
@@ -588,7 +588,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -623,7 +623,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -638,7 +638,7 @@ export default { img.src = 'common/images/2.png'; // 设置图片宽度 img.width= 150; - // 设置图片告度 + // 设置图高度 img.height=150; // 图片平铺容器 var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat; @@ -728,12 +728,12 @@ export default { ![zh-cn_image_0000001218279600](figures/zh-cn_image_0000001218279600.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 -> +> > - 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： > x' = scaleX \* x + skewY \* y + translateX -> +> > y' = skewX \* x + scaleY \* y + translateY @@ -742,7 +742,7 @@ export default { save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。 -``` +```html
@@ -757,7 +757,7 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢 ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -791,7 +791,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -816,7 +816,8 @@ export default { restore(){ this.ctx.beginPath(); // 画笔恢复 - this.ctx.restore(); this.ctx.fillRect(200, 150, 200, 200); + this.ctx.restore(); + this.ctx.fillRect(200, 150, 200, 200); }, } ``` diff --git a/zh-cn/application-dev/ui/ui-js-components-chart.md b/zh-cn/application-dev/ui/ui-js-components-chart.md index 586d58b96c..339f969771 100644 --- a/zh-cn/application-dev/ui/ui-js-components-chart.md +++ b/zh-cn/application-dev/ui/ui-js-components-chart.md @@ -1,21 +1,21 @@ -# 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
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -31,8 +31,8 @@ Chart为图表组件，用于呈现线形图、柱状图和量规图界面。具 } ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { lineData: [ @@ -67,10 +67,10 @@ export default { ## 设置图表类型 -Chart组件通过设置type属性定义图表t类型，如将图表设置为柱状图。 +chart组件通过设置type属性定义图表t类型，如将图表设置为柱状图。 -``` +```html
@@ -108,7 +108,7 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -144,8 +144,8 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱 ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { title: "类型展示", @@ -211,16 +211,16 @@ export default { ![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
@@ -228,7 +228,7 @@ Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -245,8 +245,8 @@ Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置 ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { //线形图数据 @@ -298,20 +298,20 @@ export default { } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - options只支持柱状图和线形图设置参数，量规图不生效。 -> +> > - datasets只支持柱状图和线形图设置数据集合，量规图不生效。 -> +> > - series只有线形图支持。 ## 添加数据 -通过Chart组件的append方法，实现动态添加数据。 +通过chart组件的append方法，实现动态添加数据。 -``` +```html
@@ -322,7 +322,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -348,7 +348,7 @@ button { ``` -``` +```js // xxx.js export default { data: { @@ -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 { 开发者可以根据开关Switch的状态来选择数据展示的状态，当Switch状态为true时，通过定时器来实现数据的动态展示。 -``` +```html
@@ -452,7 +457,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ display:flex; @@ -490,7 +495,7 @@ export default { ``` -``` +```js // xxx.js export default { data: { @@ -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) diff --git a/zh-cn/application-dev/ui/ui-js-components-dialog.md b/zh-cn/application-dev/ui/ui-js-components-dialog.md index 943f92da4d..bfe42a86b3 100644 --- a/zh-cn/application-dev/ui/ui-js-components-dialog.md +++ b/zh-cn/application-dev/ui/ui-js-components-dialog.md @@ -1,12 +1,12 @@ -# 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
@@ -14,11 +14,11 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要 this is a dialog
- +
``` -``` +```css /* xxx.css */ .doc-page { width:100%; @@ -51,11 +51,11 @@ button{ } ``` -``` -/* xxx.js */ +```js +// xxx.js export default { //Touch to open the dialog box. - openDialog(){ + opendialog(){ this.$element('dialogId').show() }, } @@ -66,10 +66,10 @@ export default { ## 设置弹窗响应 -开发者点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。 +开发者点击页面上非dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。 -``` +```html
@@ -78,12 +78,12 @@ export default {
- +
``` -``` +```css /* xxx.css */ .doc-page { width:100%; @@ -117,8 +117,8 @@ button{ ``` -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { canceldialog(e){ @@ -126,7 +126,7 @@ export default { message: 'dialogCancel' }) }, - openDialog(){ + opendialog(){ this.$element('dialogId').show() prompt.showToast({ message: 'dialogShow' @@ -145,21 +145,21 @@ export default { ![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 仅支持单个子组件。 -> -> - Dialog属性、样式均不支持动态更新。 -> -> - Dialog组件不支持focusable、click-effect属性。 +> +> - dialog属性、样式均不支持动态更新。 +> +> - 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
@@ -194,7 +194,7 @@ export default { ``` -``` +```css /* xxx.css */ .doc-page { flex-direction: column; @@ -263,8 +263,8 @@ export default { ``` -``` -/* xxx.js */ +```js +// xxx.js var info = null; import prompt from '@system.prompt'; import router from '@system.router'; @@ -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) diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md index c14e9d2df6..7568eef0cc 100644 --- a/zh-cn/application-dev/ui/ui-js-components-form.md +++ b/zh-cn/application-dev/ui/ui-js-components-form.md @@ -1,16 +1,16 @@ -# 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 开始支持。 -## 创建Form组件 +## 创建form组件 -在pages/index目录下的hml文件中创建一个Form组件。 -``` +在pages/index目录下的hml文件中创建一个form组件。 +```html
@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -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
@@ -47,13 +47,13 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ``` -## 设置Form样式 +## 设置form样式 -通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。 +通过为form添加background-color和border属性，来设置表单的背景颜色和边框。 -``` +```css /* xxx.css */ .container { width: 100%; @@ -77,9 +77,9 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ## 添加响应事件 -为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。 +为form组件添加submit和reset事件，来提交表单内容或重置表单选项。 -``` +```html
@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
``` -``` +```css /* index.css */ .container{ width: 100%; @@ -118,8 +118,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp } ``` -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default{ onSubmit(result) { @@ -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
- Form + form
Select 1 or more options @@ -180,7 +180,7 @@ export default{
``` -``` +```css /* index.css */ .container { flex-direction:column; @@ -197,8 +197,8 @@ label{ } ``` -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { formSubmit() { diff --git a/zh-cn/application-dev/ui/ui-js-components-grid.md b/zh-cn/application-dev/ui/ui-js-components-grid.md index e17190343b..b801fc9f30 100644 --- a/zh-cn/application-dev/ui/ui-js-components-grid.md +++ b/zh-cn/application-dev/ui/ui-js-components-grid.md @@ -9,7 +9,7 @@ 在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。 -``` +```html
@@ -22,7 +22,7 @@ ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -35,7 +35,7 @@ ![zh-cn_image_0000001226897009](figures/zh-cn_image_0000001226897009.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > grid-container仅支持grid-row为子组件。 @@ -44,7 +44,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。 -``` +```html
@@ -148,7 +148,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -165,7 +165,7 @@ text{ ![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组件中添加填充的内容。 @@ -174,7 +174,7 @@ text{ 本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。 -``` +```html
@@ -197,7 +197,7 @@ text{ ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -211,7 +211,7 @@ text{ ``` -``` +```js // index.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-image-animator.md b/zh-cn/application-dev/ui/ui-js-components-image-animator.md index 2a8d6eef11..420c989789 100644 --- a/zh-cn/application-dev/ui/ui-js-components-image-animator.md +++ b/zh-cn/application-dev/ui/ui-js-components-image-animator.md @@ -1,15 +1,15 @@ -# 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
@@ -17,7 +17,7 @@ Image-animator组件为图片帧动画播放器。具体用法请参考[Image-an ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -34,8 +34,8 @@ Image-animator组件为图片帧动画播放器。具体用法请参考[Image-an ``` -``` -/* index.js */ +```js +// index.js export default { data: { frames: [ @@ -53,12 +53,12 @@ export default { ![zh-cn_image_0000001218278612](figures/zh-cn_image_0000001218278612.gif) -## 设置Image-animator组件属性 +## 设置image-animator组件属性 添加iteration（播放次数）、reverse（播放顺序）、fixedsize（图片大小是否固定为组件大小）、duration（播放时长）和fillmode（执行结束后的状态）属性，控制图片的播放效果。 -``` +```html
@@ -66,7 +66,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -81,8 +81,8 @@ export default { ``` -``` -/* index.js */ +```js +// index.js export default { data: { frames: [ @@ -135,20 +135,20 @@ export default { ![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属性无效。 -> +> > - 如果reverse属性值设置为false，表示从第1张图片播放到最后1张图片。 如果reverse属性值设置为true，表示从最后1张图片播放到第1张图片。 ## 绑定事件 -向Image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件，当图片播放器被点击时触发pause事件，长按图片播放器触发resume事件，图片播放器停止播放时触发stop事件。 +向image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件，当图片播放器被点击时触发pause事件，长按图片播放器触发resume事件，图片播放器停止播放时触发stop事件。 -``` +```html
@@ -157,7 +157,7 @@ export default { ``` -``` +```css /* xxx.css */ .doc-page { width: 100%; @@ -175,8 +175,8 @@ export default { ``` -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { @@ -230,10 +230,10 @@ export default { 在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 -Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。 +image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。 -``` +```html
@@ -256,7 +256,7 @@ Image-animator组件通过调用start、pause、stop和resume方法控制图片 ``` -``` +```css /* xxx.css */ .doc-page { width: 100%; @@ -283,8 +283,8 @@ button{ ``` -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { @@ -337,6 +337,6 @@ export default { ## 相关实例 -针对Image-animator开发，有以下相关实例可供参考： +针对image-animator开发，有以下相关实例可供参考： - [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo) diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md index 4eb69617fc..9a56a16fce 100644 --- a/zh-cn/application-dev/ui/ui-js-components-images.md +++ b/zh-cn/application-dev/ui/ui-js-components-images.md @@ -1,19 +1,19 @@ -# 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
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -28,12 +28,12 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP ![zh-cn_image_0000001211227617](figures/zh-cn_image_0000001211227617.png) -## 设置Image样式 +## 设置image样式 通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。 -``` +```html
@@ -41,7 +41,7 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -69,7 +69,7 @@ image{ 图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。 -``` +```html
@@ -81,7 +81,7 @@ image{
``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -99,13 +99,13 @@ image{ } ``` -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { imageComplete(i,e){ 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, }) }, @@ -127,7 +127,7 @@ export default { ## 场景示例 在本场景中，开发者长按图片后将慢慢隐藏图片，当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果，当透明度为0时清除定时器，设置透明度为1。 -``` +```html
@@ -141,7 +141,7 @@ export default {
``` -``` +```css /* xxx.css */ .page-container { width: 100%; @@ -175,8 +175,8 @@ export default { } ``` -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { @@ -206,8 +206,8 @@ export default { ## 相关实例 -针对Image开发，有以下相关实例可供参考： +针对image开发，有以下相关实例可供参考： - [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo) -- [图片编辑模板（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate) \ No newline at end of file +- [图片编辑模板（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Media/imageEditorTemplate) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md index b1b55f49c1..96c5388e81 100644 --- a/zh-cn/application-dev/ui/ui-js-components-input.md +++ b/zh-cn/application-dev/ui/ui-js-components-input.md @@ -1,20 +1,22 @@ -# 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
- Please enter the content + + Please enter the content +
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -29,11 +31,11 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 ![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png) -## 设置Input类型 +## 设置input类型 -通过设置type属性来定义Input类型，如将Input设置为button、date等。 +通过设置type属性来定义input类型，如将input设置为button、date等。 -``` +```html
@@ -53,7 +55,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -87,7 +89,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 } ``` -``` +```js // xxx.js export default { btnclick(){ @@ -100,15 +102,15 @@ export default { ![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
@@ -119,7 +121,7 @@ export default {
``` -``` +```css /* xxx.css */ .content { width: 100%; @@ -141,7 +143,7 @@ text{ } ``` -``` +```js // xxx.js import prompt from '@system.prompt' export default { @@ -165,9 +167,9 @@ export default { ## 设置输入提示 -通过对Input组件添加showError方法来提示输入的错误原因。 +通过对input组件添加showError方法来提示输入的错误原因。 -``` +```html
@@ -176,7 +178,7 @@ export default {
``` -``` +```css /* xxx.css */ .content { width: 100%; @@ -196,7 +198,7 @@ export default { } ``` -``` +```js // xxx.js import prompt from '@system.prompt' export default { @@ -212,9 +214,13 @@ import prompt from '@system.prompt' }, buttonClick(e){ 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){ - 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{ prompt.showToast({ message: "success " @@ -226,17 +232,17 @@ import prompt from '@system.prompt' ![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
@@ -265,7 +271,7 @@ import prompt from '@system.prompt' ``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -294,7 +300,7 @@ label { ``` -``` +```js // xxx.js import prompt from '@system.prompt'; 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) diff --git a/zh-cn/application-dev/ui/ui-js-components-list.md b/zh-cn/application-dev/ui/ui-js-components-list.md index 858e7ce407..4d941f2e27 100644 --- a/zh-cn/application-dev/ui/ui-js-components-list.md +++ b/zh-cn/application-dev/ui/ui-js-components-list.md @@ -1,14 +1,14 @@ -# 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 +
@@ -19,7 +19,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -37,7 +37,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ![zh-cn_image_0000001211071477](figures/zh-cn_image_0000001211071477.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - <list-item-group>是<list>的子组件，实现列表分组功能，不能再嵌套<list>，可以嵌套<list-item>。 > > - <list-item>是<list>的子组件，展示列表的具体项。 @@ -47,8 +47,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， 设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。 -``` - +```html +
@@ -61,8 +61,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { flex-direction: column; background-color: #F1F3F5; @@ -86,8 +86,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， 设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。 -``` - +```html +
@@ -95,8 +95,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
``` -``` -/* index.css */ +```css +/* xxx.css */ .container{ flex-direction: column; background-color: #F1F3F5; @@ -110,7 +110,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ![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可以自定义索引表，自定义时"\#"必须要存在。 @@ -118,10 +118,10 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ## 实现列表折叠和展开 -为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。 +为list组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。 -``` - +```html +
@@ -140,8 +140,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
``` -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; @@ -160,7 +160,7 @@ margin-top:30px; } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -193,7 +193,7 @@ export default { ![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > > - groupcollapse和groupexpand事件仅支持list-item-group组件使用。 @@ -203,8 +203,8 @@ export default { 在本场景中，开发者可以根据字母索引表查找对应联系人。 -``` - +```html +
Contacts @@ -228,8 +228,8 @@ export default { ``` -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { width: 100%; height: 100%; @@ -265,7 +265,7 @@ export default { ``` -``` +```js // xxx.js export default { data: { @@ -312,6 +312,6 @@ export default { ## 相关实例 -针对List开发，有以下相关实例可供参考： +针对list开发，有以下相关实例可供参考： -- [`JsList`：商品列表（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList) \ No newline at end of file +- [`Jslist`：商品列表（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/Jslist) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-marquee.md b/zh-cn/application-dev/ui/ui-js-components-marquee.md index aac425fa09..f711b61e75 100644 --- a/zh-cn/application-dev/ui/ui-js-components-marquee.md +++ b/zh-cn/application-dev/ui/ui-js-components-marquee.md @@ -1,15 +1,15 @@ -# 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
This is a marquee. @@ -17,7 +17,7 @@ Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -34,18 +34,18 @@ Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用 ## 设置属性和样式 -Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。 +marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。 -``` +```html
- It's a racing lamp. + It's a racing lamp.
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -55,7 +55,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 align-items: center; background-color: #F1F3F5; } -.customMarquee { +.custommarquee { width: 100%; height: 80px; padding: 10px; @@ -74,7 +74,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。 -``` +```html
@@ -90,7 +90,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 ``` -``` +```css /* xxx.css */ .tutorial-page { width: 750px; @@ -124,7 +124,7 @@ button{ ``` -``` +```js // xxx.js export default { private: { @@ -144,7 +144,7 @@ export default { } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 当loop的值小于等于零时，跑马灯marquee将连续滚动。如果loop未指定，则默认为-1。 ![zh-cn_image_0000001227701867](figures/zh-cn_image_0000001227701867.gif) @@ -157,7 +157,7 @@ export default { 跑马灯的次数设置为1，在结束的时候触发finish事件使跑马灯的次数加1，字体颜色变为随机颜色，调用start方法使跑马灯再次开始滚动。 -``` +```html
@@ -174,7 +174,7 @@ export default { ``` -``` +```css /* xxx.css */ .tutorial-page { width: 750px; @@ -204,7 +204,7 @@ button{ ``` -``` +```js // xxx.js export default { private: { diff --git a/zh-cn/application-dev/ui/ui-js-components-menu.md b/zh-cn/application-dev/ui/ui-js-components-menu.md index 5f30f662d8..e6612723ce 100644 --- a/zh-cn/application-dev/ui/ui-js-components-menu.md +++ b/zh-cn/application-dev/ui/ui-js-components-menu.md @@ -1,15 +1,15 @@ -# 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
show menu @@ -22,7 +22,7 @@ ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -40,10 +40,10 @@ ![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组件不支持focusable、disabled属性。 +> **说明：** +> - menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。 +> +> - menu组件不支持focusable、disabled属性。 ## 设置样式 @@ -51,7 +51,7 @@ 为menu组件设置样式，例如字体颜色、大小、字符间距等。 -``` +```html
show menu @@ -64,7 +64,7 @@ ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -103,7 +103,7 @@ option{ 为menu组件绑定onselected事件（菜单中某个值被点击选中时触发）和oncancel事件（取消操作时触发），点击text组件调用show方法可设置menu组件的坐标。 -``` +```html
show menu @@ -116,7 +116,7 @@ option{ ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -148,8 +148,8 @@ option{ ``` -``` -// index.js +```js +// xxx.js import prompt from '@system.prompt'; export default { select(e) { @@ -176,7 +176,7 @@ export default { 本场景中开发者可点击toggle组件修改文字颜色，选择menu组件修改渐变色块大小。 -``` +```html
@@ -192,7 +192,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -240,8 +240,8 @@ option{ ``` -``` -// index.js +```js +// xxx.js import prompt from '@system.prompt'; export default { data:{ @@ -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) diff --git a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md index f645c710a3..e6fd3a0e2f 100644 --- a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md @@ -4,7 +4,7 @@ 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。 -``` +```html
@@ -23,7 +23,7 @@
``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -45,7 +45,7 @@ select{ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -89,7 +89,7 @@ export default { 使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。 -``` +```html
@@ -103,7 +103,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -136,7 +136,7 @@ button{ ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md index f5e8690de8..da7e1bc8c4 100644 --- a/zh-cn/application-dev/ui/ui-js-components-path2d.md +++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md @@ -8,14 +8,14 @@ 创建Path2D，使用多条线段组合图形。 -``` +```html
``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -32,7 +32,7 @@ canvas{ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; 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)，图形变大并向左倾斜。 -``` +```html
@@ -93,7 +93,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -128,7 +128,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -162,7 +162,8 @@ export default { this.isAdd = "clearPath2" }else{ this.ctx.clearRect(0,0,600,600) - this.ctx.stroke(this.path1); this.isAdd = "addPath2" + this.ctx.stroke(this.path1); + this.isAdd = "addPath2" } }, setTransform(){ @@ -170,10 +171,16 @@ export default { this.ctx.clearRect(0,0,600,600) this.path3 = this.ctx.createPath2D(); 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{ 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" } }, } diff --git a/zh-cn/application-dev/ui/ui-js-components-picker.md b/zh-cn/application-dev/ui/ui-js-components-picker.md index eea53de794..050749bee8 100644 --- a/zh-cn/application-dev/ui/ui-js-components-picker.md +++ b/zh-cn/application-dev/ui/ui-js-components-picker.md @@ -1,21 +1,21 @@ -# 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 +
picker
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -29,20 +29,20 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器 ![zh-cn_image_0000001210951541](figures/zh-cn_image_0000001210951541.gif) -## 设置Picker类型 +## 设置picker类型 -通过设置Picker的type属性来选择滑动选择器类型，如定义Picker为日期选择器。 +通过设置picker的type属性来选择滑动选择器类型，如定义picker为日期选择器。 -``` - +```html +
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -56,7 +56,7 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器 } ``` -``` +```js // xxx.js export default { data: { @@ -69,25 +69,25 @@ export default { ![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.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -105,7 +105,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 ![zh-cn_image_0000001234327855](figures/zh-cn_image_0000001234327855.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - hours属性为12：按照12小时制显示，用上午和下午进行区分； > > - hours属性为24：按照24小时制显示。 @@ -113,18 +113,18 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 ## 添加响应事件 -对Picker添加change和cancel事件，来对选择的内容进行确定和取消。 +对picker添加change和cancel事件，来对选择的内容进行确定和取消。 -``` - +```html +
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -142,7 +142,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -170,8 +170,8 @@ export default { 在本场景中，开发者可以自定义填写当前的健康情况来进行打卡。 -``` - +```html +
Health check-in
@@ -201,8 +201,8 @@ export default { ``` -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; @@ -244,7 +244,7 @@ export default { ``` -``` +```js // xxx.js import pmt from '@system.prompt' 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) diff --git a/zh-cn/application-dev/ui/ui-js-components-qrcode.md b/zh-cn/application-dev/ui/ui-js-components-qrcode.md index 7850991379..6bae160089 100644 --- a/zh-cn/application-dev/ui/ui-js-components-qrcode.md +++ b/zh-cn/application-dev/ui/ui-js-components-qrcode.md @@ -1,15 +1,15 @@ -# 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
@@ -17,7 +17,7 @@ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -31,16 +31,16 @@ ![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
@@ -137,7 +137,7 @@ qrcode{ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -154,7 +154,7 @@ qrcode{ ``` -``` +```js // index.js export default{ data: { diff --git a/zh-cn/application-dev/ui/ui-js-components-rating.md b/zh-cn/application-dev/ui/ui-js-components-rating.md index a6f5b44348..bb7387651e 100644 --- a/zh-cn/application-dev/ui/ui-js-components-rating.md +++ b/zh-cn/application-dev/ui/ui-js-components-rating.md @@ -1,15 +1,15 @@ -# 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
@@ -17,7 +17,7 @@ Rating为评分条组件，表示用户使用感受的衡量标准条。具体 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -38,10 +38,10 @@ rating { ## 设置评分星级 -Rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。 +rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。 -``` +```html
@@ -50,7 +50,7 @@ Rating组件通过设置numstars和rating属性设置评分条的星级总数和 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -71,10 +71,10 @@ rating { ## 设置评分样式 -Rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。 +rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。 -``` +```html
@@ -86,7 +86,7 @@ Rating组件通过star-background、star-foreground和star-secondary属性设置 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -99,8 +99,8 @@ Rating组件通过star-background、star-foreground和star-secondary属性设置 ``` -``` -/* index.js */ +```js +// index.js export default { data: { backstar: 'common/love.png', @@ -116,18 +116,18 @@ export default { ![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属性只支持本地路径图片，图片格式为png和jpg。 ## 绑定事件 -向Rating组件添加change事件，打印当前评分。 +向rating组件添加change事件，打印当前评分。 -``` +```html
@@ -135,7 +135,8 @@ export default { ``` -``` +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -151,7 +152,8 @@ rating { ``` -``` +```js +// xxx.js import prompt from '@system.prompt'; export default { showrating(e) { @@ -170,7 +172,7 @@ export default { 开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。 -``` +```html
@@ -197,7 +199,7 @@ export default { ``` -``` +```css /* xxx.css */ .myrating:active { width: 500px; @@ -209,8 +211,8 @@ switch{ ``` -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-components-search.md b/zh-cn/application-dev/ui/ui-js-components-search.md index d0bf429726..5c712126e1 100644 --- a/zh-cn/application-dev/ui/ui-js-components-search.md +++ b/zh-cn/application-dev/ui/ui-js-components-search.md @@ -1,15 +1,15 @@ -# 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
@@ -17,7 +17,7 @@ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -37,7 +37,7 @@ 通过设置hint、icon和searchbutton属性设置搜索框的提示文字、图标和末尾搜索按钮的内容。 -``` +```html
@@ -45,7 +45,7 @@ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -65,7 +65,7 @@ 通过color、placeholder和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。 -``` +```html
@@ -73,7 +73,7 @@ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -93,10 +93,10 @@ search{ ## 绑定事件 -向Search组件添加change、search、submit、share和translate事件，对输入信息进行操作。 +向search组件添加change、search、submit、share和translate事件，对输入信息进行操作。 -``` +```html
@@ -109,7 +109,7 @@ search{ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -128,7 +128,7 @@ text{ ``` -``` +```js // index.js import prompt from '@system.prompt' export default { @@ -170,14 +170,14 @@ export default { ## 场景示例 -在本场景中通过下拉菜单选择Search、Textarea和Input组件来实现搜索和输入效果。 +在本场景中通过下拉菜单选择search、Textarea和Input组件来实现搜索和输入效果。 -``` +```html
@@ -197,7 +197,7 @@ export default { ``` -``` +```css /* xxx.css */ .field { width: 80%; @@ -214,7 +214,7 @@ export default { ``` -``` +```js // index.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-slider.md b/zh-cn/application-dev/ui/ui-js-components-slider.md index 24c1bf1619..658f56c2a9 100644 --- a/zh-cn/application-dev/ui/ui-js-components-slider.md +++ b/zh-cn/application-dev/ui/ui-js-components-slider.md @@ -1,23 +1,23 @@ -# 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
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -35,10 +35,10 @@ Slider为滑动条组件，用来快速调节音量、亮度等。具体用法 ## 设置样式和属性 -Slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。 +slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。 -``` +```html
@@ -46,7 +46,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -68,7 +68,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 通过添加mix、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。 -``` +```html
@@ -76,7 +76,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -90,7 +90,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ![zh-cn_image_0000001179438692](figures/zh-cn_image_0000001179438692.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > mode属性为滑动条样式，可选值为： > > - outset：滑块在滑杆上； @@ -103,7 +103,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 向Rating组件添加change事件，添加时需要传入ChangeEvent参数。 -``` +```html
slider start value is {{startValue}} @@ -114,7 +114,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -127,7 +127,7 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ``` -``` +```js // xxx.js export default { data: { @@ -159,7 +159,7 @@ export default { 开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。 -``` +```html
@@ -172,7 +172,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -195,7 +195,7 @@ text{ ``` -``` +```js // xxx.js export default{ data: { @@ -215,8 +215,8 @@ 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) -- [slider（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication) \ No newline at end of file +- [slider（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/sliderApplication) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-stepper.md b/zh-cn/application-dev/ui/ui-js-components-stepper.md index 0c34896794..73e53835e9 100644 --- a/zh-cn/application-dev/ui/ui-js-components-stepper.md +++ b/zh-cn/application-dev/ui/ui-js-components-stepper.md @@ -1,18 +1,18 @@ -# 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 开始支持。 -## 创建Stepper组件 +## 创建stepper组件 -在pages/index目录下的hml文件中创建一个Stepper组件。 +在pages/index目录下的hml文件中创建一个stepper组件。 -``` - +```html +
@@ -25,7 +25,7 @@
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -49,8 +49,8 @@ text{ 页面默认显示索引值为index的步骤。 -``` - +```html +
@@ -66,8 +66,8 @@ text{
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width:100%; height:100%; @@ -85,8 +85,8 @@ text{ 通过设置label属性，自定义stepper-item的提示按钮。 -``` - +```html +
@@ -105,8 +105,8 @@ text{
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width:100%; height:100%; @@ -120,8 +120,8 @@ text{ } ``` -``` -/* index.js */ +```js +// xxx.js export default { data: { label_1:{ @@ -147,9 +147,9 @@ export default { ## 设置样式 -Stepper组件默认填充父容器，通过border和background-color设置边框、背景色。 -``` - +stepper组件默认填充父容器，通过border和background-color设置边框、背景色。 +```html +
@@ -161,8 +161,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width:100%; height:100%; @@ -191,14 +191,14 @@ text{ ## 添加事件 -Stepper分别添加finish，change，next，back，skip事件。 +stepper分别添加finish，change，next，back，skip事件。 - 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。 - 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。 -``` - +```html +
@@ -218,7 +218,7 @@ Stepper分别添加finish，change，next，back，skip事件。
``` -``` +```css /* xxx.css */ .doc-page { width:100%; @@ -246,8 +246,8 @@ button{ } ``` -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data: { @@ -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 +
@@ -337,7 +338,7 @@ export default {
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -358,8 +359,8 @@ export default { } ``` -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; import router from '@system.router'; let myset = new Set(); @@ -405,6 +406,6 @@ export default { ## 相关实例 -针对Stepper开发，有以下相关实例可供参考： +针对stepper开发，有以下相关实例可供参考： - [`StepNavigator`：步骤导航器（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator) diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md b/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md index 9cb7f7c3ab..eecf7d5acc 100644 --- a/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md +++ b/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md @@ -6,8 +6,8 @@ Svg组件可以用来绘制常见图形和线段，如矩形（<rect>） 在本场景中，绘制各种图形拼接组成一个小房子。 - -``` + +```html
@@ -25,8 +25,8 @@ Svg组件可以用来绘制常见图形和线段，如矩形（<rect>）
``` - -``` + +```css /* xxx.css */ .container { width: 100%; diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-overview.md b/zh-cn/application-dev/ui/ui-js-components-svg-overview.md index aa13c248a8..601ff8c6d6 100644 --- a/zh-cn/application-dev/ui/ui-js-components-svg-overview.md +++ b/zh-cn/application-dev/ui/ui-js-components-svg-overview.md @@ -4,9 +4,9 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使用。具体用法请参考[Svg](../reference/arkui-js/js-components-svg.md)。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 从API version 7开始支持。 -> +> > - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 @@ -15,7 +15,7 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使 在pages/index目录下的hml文件中创建一个Svg组件。 -``` +```html
@@ -23,7 +23,7 @@ Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使 ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -46,15 +46,18 @@ svg{ 通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。 -``` +```html
- + + + +
``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -74,9 +77,9 @@ svg{ ![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轴属性无效。 -> +> > - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。 diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-path.md b/zh-cn/application-dev/ui/ui-js-components-svg-path.md index 80770f6543..5597fc284f 100644 --- a/zh-cn/application-dev/ui/ui-js-components-svg-path.md +++ b/zh-cn/application-dev/ui/ui-js-components-svg-path.md @@ -3,16 +3,19 @@ Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现 饼状图效果。 -``` +```html
- + + + +
``` -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -28,23 +31,23 @@ Svg组件绘制路径时，通过Path中的M(起点)、H（水平线）、a（ ![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命令经常出现在路径的开始处，用来指明从何处开始画。 -> +> > - L/l = lineto 参数x和y表示一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。 -> +> > - H/h = horizontal lineto 绘制平行线。 -> +> > - V/v = vertical lineto 绘制垂直线。 -> +> > - C/c = curveto 三次贝塞尔曲线 设置三组坐标参数： x1 y1, x2 y2, x y。 -> +> > - S/s = smooth curveto 三次贝塞尔曲线命令 设置两组坐标参数： x2 y2, x y。 -> +> > - Q/q = quadratic Belzier curve 二次贝塞尔曲线 设置两组坐标参数： x1 y1, x y。 -> +> > - T/t = smooth quadratic Belzier curveto 二次贝塞尔曲线命令 设置参数： x y。 -> +> > - A/a = elliptical Arc 弧形命令 设置参数： rx ry x-axis-rotation（旋转角度）large-arc-flag（角度大小） sweep-flag（弧线方向） x y。large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。 -> +> > - Z/z = closepath 从当前点画一条直线到路径的起点。 diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-text.md b/zh-cn/application-dev/ui/ui-js-components-svg-text.md index c5e0d18c7e..4663070c8f 100644 --- a/zh-cn/application-dev/ui/ui-js-components-svg-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-svg-text.md @@ -6,17 +6,17 @@ Svg组件还可以绘制文本。 ## 文本 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 文本的展示内容需要写在元素标签text内，可嵌套tspan子元素标签分段。 -> +> > - 只支持被父元素标签svg嵌套。 -> +> > - 只支持默认字体sans-serif。 通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。 -``` +```html
@@ -36,7 +36,7 @@ Svg组件还可以绘制文本。 textpath文本内容沿着属性path中的路径绘制文本。 -``` +```html
diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md index 96cff3844a..f2c66bdba2 100644 --- a/zh-cn/application-dev/ui/ui-js-components-swiper.md +++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md @@ -1,14 +1,14 @@ -# 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
@@ -25,7 +25,7 @@ Swiper为滑动容器，提供切换显示子组件的能力。具体用法请
``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -56,16 +56,16 @@ text{ ![zh-cn_image_0000001181495038](figures/zh-cn_image_0000001181495038.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> Swiper组件支持除<list>之外的子组件。 +> **说明：** +> swiper组件支持除<list>之外的子组件。 ## 添加属性 -Swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。 +swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect="fade"））。 -``` +```html
![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 设置indicator（是否启用导航点指示器）属性为true时digital（是否启用数字导航点）属性才会生效。 -> -> - Swiper子组件的个数大于等于2时设置的loop属性才会生效。 -> +> +> - swiper子组件的个数大于等于2时设置的loop属性才会生效。 +> > - scrolleffect属性仅在loop属性值为false时生效。 ## 设置样式 -设置Swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。 +设置swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。 -``` +```html
@@ -146,7 +146,7 @@ text{ ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -184,10 +184,10 @@ text{ ## 绑定事件 -创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。Swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。 +创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。 -``` +```html
@@ -218,7 +218,7 @@ text{ ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -259,7 +259,8 @@ select{ ``` -``` +```js +// xxx.js import prompt from '@system.prompt'; export default{ change(e){ @@ -285,10 +286,10 @@ export default{ ## 场景示例 -本场景中使用Swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。 +本场景中使用swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。 -``` +```html
@@ -305,7 +306,7 @@ export default{ ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -340,8 +341,8 @@ swiper{ ``` -``` -// index.js +```js +// xxx.js import prompt from '@system.prompt'; export default { data:{ @@ -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) diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md index aa7e7e71cb..9430f6e942 100644 --- a/zh-cn/application-dev/ui/ui-js-components-switch.md +++ b/zh-cn/application-dev/ui/ui-js-components-switch.md @@ -1,22 +1,23 @@ -# 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 +
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -33,7 +34,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 -``` +```html
@@ -41,7 +42,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -62,7 +63,7 @@ switch{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -84,7 +85,7 @@ export default { ![zh-cn_image_0000001221030133](figures/zh-cn_image_0000001221030133.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。 @@ -92,9 +93,9 @@ export default { 在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。 - 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 + 实现方法：创建switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 -``` +```html
@@ -113,7 +114,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -168,7 +169,7 @@ switch{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md index 091d350735..807d43c11d 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -1,20 +1,20 @@ -# 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
Hello World
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -29,13 +29,13 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ![zh-cn_image_0000001211383427](figures/zh-cn_image_0000001211383427.png) -## 设置Text组件样式和属性 +## 设置text组件样式和属性 - 添加文本样式 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 - ``` + ```html
@@ -47,7 +47,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
``` - ``` + ```css /* xxx.css */ .container { width: 100%; @@ -65,9 +65,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex - 添加划线 - 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 Text自有样式。 + 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 text自有样式。 - ``` + ```html
@@ -79,7 +79,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
``` - ``` + ```css /* xxx.css */ .container { width: 100%; @@ -101,7 +101,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。 - ``` + ```html
@@ -110,7 +110,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
``` - ``` + ```css /* xxx.css */ .container { width: 100%; @@ -136,9 +136,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex - 设置文本折行 - 设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。 + 设置word-break属性对文本内容做断行处理，word-break枚举值请参考text自有样式。 - ``` + ```html
@@ -152,7 +152,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
``` - ``` + ```css /* xxx.css */ .container { width: 100%; @@ -190,9 +190,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ​ ![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
@@ -208,17 +208,17 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ``` ![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子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。 + > - 在使用Span子组件时，注意text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。 ## 场景示例 -Text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。 +text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。 -``` +```html
@@ -237,7 +237,7 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -255,7 +255,7 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属 } ``` -``` +```js // xxx.js export default { data: { @@ -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) diff --git a/zh-cn/application-dev/ui/ui-js-components-toolbar.md b/zh-cn/application-dev/ui/ui-js-components-toolbar.md index 6d71893d1d..87d4d848df 100644 --- a/zh-cn/application-dev/ui/ui-js-components-toolbar.md +++ b/zh-cn/application-dev/ui/ui-js-components-toolbar.md @@ -1,15 +1,15 @@ -# 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
@@ -20,7 +20,7 @@ Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项 ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -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
@@ -57,7 +57,7 @@ toolbar-item{ ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -77,11 +77,11 @@ toolbar-item{ ## 设置样式 -设置position样式控制Toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。 +设置position样式控制toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。 -``` +```html
@@ -95,7 +95,7 @@ toolbar-item{ -``` +```css /* xxx.css */ .container { background-color: #F1F3F5; @@ -123,7 +123,7 @@ toolbar-item{ 分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。 -``` +```html
@@ -135,7 +135,7 @@ toolbar-item{ ``` -``` +```css /* xxx.css */ .container { background-color: #F1F3F5; @@ -151,7 +151,7 @@ toolbar-item{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -171,8 +171,8 @@ export default { ![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 { 使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。 -``` +```html
@@ -193,7 +193,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { background-color: #F1F3F5; @@ -208,7 +208,7 @@ toolbar-item{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; 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) diff --git a/zh-cn/application-dev/ui/ui-js-custom-components.md b/zh-cn/application-dev/ui/ui-js-custom-components.md index 829dff91ed..ee18744f78 100755 --- a/zh-cn/application-dev/ui/ui-js-custom-components.md +++ b/zh-cn/application-dev/ui/ui-js-custom-components.md @@ -4,7 +4,7 @@ - 构建自定义组件 - ``` + ```html
{{title}} @@ -13,7 +13,7 @@
``` - ``` + ```css /* comp.css */ .item { width: 700px; @@ -37,7 +37,7 @@ } ``` - ``` + ```js // comp.js export default { props: { @@ -59,7 +59,7 @@ ``` - 引入自定义组件 - ``` + ```html
@@ -68,7 +68,7 @@
``` - ``` + ```css /* xxx.css */ .container { background-color: #f8f8ff; @@ -78,7 +78,7 @@ } ``` - ``` + ```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-ts-basic-components-button.md b/zh-cn/application-dev/ui/ui-ts-basic-components-button.md index 47be13c7c5..9983e643f1 100644 --- a/zh-cn/application-dev/ui/ui-ts-basic-components-button.md +++ b/zh-cn/application-dev/ui/ui-ts-basic-components-button.md @@ -12,7 +12,6 @@ Button通过调用接口来创建，接口调用有以下两种形式： `Button(options?: {type?: ButtonType, stateEffect?: boolean})`，该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。 - ``` Button({ type: ButtonType.Normal, stateEffect: true }) { Row() { @@ -22,13 +21,13 @@ Button通过调用接口来创建，接口调用有以下两种形式： }.borderRadius(8).backgroundColor(0x317aff).width(90) ``` + ![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png) - 创建不包含子组件的按钮 `Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`，该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。 - ``` Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) @@ -36,6 +35,7 @@ Button通过调用接口来创建，接口调用有以下两种形式： .width(90) ``` + ![zh-cn_image_0000001215796030](figures/zh-cn_image_0000001215796030.png) @@ -45,7 +45,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 - 胶囊按钮（默认类型） - ``` + ```ts Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90) @@ -55,7 +55,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 - 圆形按钮 - ``` + ```ts Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) @@ -71,7 +71,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。 - ``` + ```ts Button('circle border', { type: ButtonType.Normal }) .borderRadius(20) ``` @@ -82,7 +82,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 通过添加文本样式设置按钮文本的展示样式。 - ``` + ```ts Button('font style', { type: ButtonType.Normal }) .fontSize(20) .fontColor(Color.Red) @@ -95,7 +95,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 添加backgroundColor属性设置按钮的背景颜色。 - ``` + ```ts Button('background color').backgroundColor(0xF55A42) ``` @@ -105,7 +105,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 为删除操作创建一个按钮。 - ``` + ```ts Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_delete_filled')).width(30).height(30) }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) @@ -119,7 +119,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆 Button组件通常用于触发某些操作，可以在绑定onClick事件来响应点击操作后的自定义行为。 -``` +```ts Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .onClick(()=>{ console.info('Button onClick') @@ -133,7 +133,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 可以将按钮用于启动操作的任何用户界面元素。按钮会根据用户的操作触发相应的事件。如，在List容器里边通过点击按钮进行页面跳转： - ``` + ```ts + // xxx.js import router from '@ohos.router' @Entry @@ -173,8 +174,9 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。 - ``` - @Entry + ```ts +// xxx.js +@Entry @Component struct ButtonCase2 { build() { diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md index 876ab9c8f4..51ee15b3e6 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md @@ -6,12 +6,12 @@ 1. 将Category枚举类型引入FoodCategoryList页面。 - ``` + ```ts import { Category, FoodData } from '../model/FoodData' ``` 2. 创建FoodCategoryList和FoodCategory组件，其中FoodCategoryList作为新的页面入口组件，在入口组件调用initializeOnStartup方法。 - ``` + ```ts @Component struct FoodList { private foodItems: FoodData[] @@ -19,7 +19,7 @@ ...... } } - + @Component struct FoodCategory { private foodItems: FoodData[] @@ -27,7 +27,7 @@ ...... } } - + @Entry @Component struct FoodCategoryList { @@ -39,13 +39,13 @@ ``` 3. 在FoodCategoryList组件内创建showList成员变量，用于控制List布局和Grid布局的渲染切换。需要用到条件渲染语句if...else...。 - ``` + ```ts @Entry @Component struct FoodCategoryList { private foodItems: FoodData[] = initializeOnStartup() private showList: boolean = false - + build() { Stack() { if (this.showList) { @@ -59,13 +59,13 @@ ``` 4. 在页面右上角创建切换List/Grid布局的图标。设置Stack对齐方式为顶部尾部对齐TopEnd，创建Image组件，设置其点击事件，即showList取反。 - ``` + ```ts @Entry @Component struct FoodCategoryList { private foodItems: FoodData[] = initializeOnStartup() private showList: boolean = false - + build() { Stack({ alignContent: Alignment.TopEnd }) { if (this.showList) { @@ -86,13 +86,13 @@ ``` 5. 添加\@State装饰器。点击右上角的switch标签后，页面没有任何变化，这是因为showList不是有状态数据，它的改变不会触发页面的刷新。需要为其添加\@State装饰器，使其成为状态数据，它的改变会引起其所在组件的重新渲染。 - ``` + ```ts @Entry @Component struct FoodCategoryList { private foodItems: FoodData[] = initializeOnStartup() @State private showList: boolean = false - + build() { Stack({ alignContent: Alignment.TopEnd }) { if (this.showList) { @@ -110,7 +110,7 @@ }.height('100%') } } - + ``` 点击切换图标，FoodList组件出现，再次点击，FoodList组件消失。 @@ -118,7 +118,7 @@ ![zh-cn_image_0000001170411978](figures/zh-cn_image_0000001170411978.gif) 6. 创建显示所有食物的页签（All）。在FoodCategory组件内创建Tabs组件和其子组件TabContent，设置tabBar为All。设置TabBars的宽度为280，布局模式为Scrollable，即超过总长度后可以滑动。Tabs是一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图TabContent。 - ``` + ```ts @Component struct FoodCategory { private foodItems: FoodData[] @@ -137,13 +137,13 @@ ![zh-cn_image_0000001204538065](figures/zh-cn_image_0000001204538065.png) 7. 创建FoodGrid组件，作为TabContent的子组件。 - ``` + ```ts @Component struct FoodGrid { private foodItems: FoodData[] build() {} } - + @Component struct FoodCategory { private foodItems: FoodData[] @@ -162,7 +162,7 @@ ``` 8. 实现2 \* 6的网格布局（一共12个食物数据资源）。创建Grid组件，设置列数columnsTemplate('1fr 1fr')，行数rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')，行间距和列间距rowsGap和columnsGap为8。创建Scroll组件，使其可以滑动。 - ``` + ```ts @Component struct FoodGrid { private foodItems: FoodData[] @@ -185,7 +185,7 @@ ``` 9. 创建FoodGridItem组件，展示食物图片、名称和卡路里，实现其UI布局，为GridItem的子组件。每个FoodGridItem高度为184，行间距为8，设置Grid总高度为(184 + 8) \* 6 - 8 = 1144。 - ``` + ```ts @Component struct FoodGridItem { private foodItem: FoodData @@ -214,7 +214,7 @@ .width('100%') } } - + @Component struct FoodGrid { private foodItems: FoodData[] @@ -242,48 +242,48 @@ ![zh-cn_image_0000001170167520](figures/zh-cn_image_0000001170167520.gif) 10. 创建展示蔬菜（Category.Vegetable）、水果（Category.Fruit）、坚果（Category.Nut）、海鲜（Category.SeaFood）和甜品（Category.Dessert）分类的页签。 - ``` - @Component - struct FoodCategory { - private foodItems: FoodData[] - build() { - Stack() { - Tabs() { - TabContent() { - FoodGrid({ foodItems: this.foodItems }) - }.tabBar('All') - - TabContent() { - FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) }) - }.tabBar('Vegetable') - - TabContent() { - FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) }) - }.tabBar('Fruit') - - TabContent() { - FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) }) - }.tabBar('Nut') - - TabContent() { - FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) }) - }.tabBar('Seafood') - - TabContent() { - FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) }) - }.tabBar('Dessert') - } - .barWidth(280) - .barMode(BarMode.Scrollable) - } - } - } - ``` + ```ts + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() { + FoodGrid({ foodItems: this.foodItems }) + }.tabBar('All') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) }) + }.tabBar('Vegetable') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) }) + }.tabBar('Fruit') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) }) + }.tabBar('Nut') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) }) + }.tabBar('Seafood') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) }) + }.tabBar('Dessert') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` 11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同，所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。 创建gridRowTemplate和HeightValue成员变量，通过成员变量设置Grid行数和高度。 - ``` + ```ts @Component struct FoodGrid { private foodItems: FoodData[] @@ -312,7 +312,7 @@ 调用aboutToAppear接口计算行数（gridRowTemplate ）和高度（heightValue）。 - ``` + ```ts aboutToAppear() { var rows = Math.round(this.foodItems.length / 2); this.gridRowTemplate = '1fr '.repeat(rows); @@ -324,7 +324,7 @@ ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) - ``` + ```ts @Component struct FoodGrid { private foodItems: FoodData[] diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md index 8a75c1334e..bb5ab8da2f 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md @@ -6,7 +6,7 @@ 1. 在pages目录新建页面FoodCategoryList.ets，将index.ets改名为FoodDetail.ets，并将其添加到config.json文件下的pages标签，位于第一序位的页面为首页。 - ``` + ```json "js": [ { "pages": [ @@ -22,7 +22,7 @@ struct FoodListItem { build() {} } - + @Entry @Component struct FoodList { @@ -46,13 +46,13 @@ ``` import { FoodData } from '../model/FoodData' import { initializeOnStartup } from '../model/FoodDataModels' - + @Component struct FoodListItem { private foodItem: FoodData build() {} } - + @Entry @Component struct FoodList { @@ -71,7 +71,7 @@ ``` import { FoodData } from '../model/FoodData' import { initializeOnStartup } from '../model/FoodDataModels' - + @Component struct FoodListItem { private foodItem: FoodData @@ -93,7 +93,7 @@ .margin({ right: 24, left:32 }) } } - + @Entry @Component struct FoodList { @@ -114,7 +114,7 @@ ``` import { FoodData } from '../model/FoodData' import { initializeOnStartup } from '../model/FoodDataModels' - + @Component struct FoodListItem { private foodItem: FoodData @@ -136,7 +136,7 @@ .margin({ right: 24, left:32 }) } } - + @Entry @Component struct FoodList { @@ -182,7 +182,7 @@ ``` import { FoodData } from '../model/FoodData' import { initializeOnStartup } from '../model/FoodDataModels' - + @Component struct FoodListItem { private foodItem: FoodData @@ -204,7 +204,7 @@ .margin({ right: 24, left:32 }) } } - + @Entry @Component struct FoodList { diff --git a/zh-cn/application-dev/ui/ui-ts-components-web.md b/zh-cn/application-dev/ui/ui-ts-components-web.md index 6cd3922dd8..0386a71085 100644 --- a/zh-cn/application-dev/ui/ui-ts-components-web.md +++ b/zh-cn/application-dev/ui/ui-ts-components-web.md @@ -6,7 +6,7 @@ Web是提供网页显示能力的组件，具体用法请参考 [Web API](../ref 在main/ets/MainAbility/pages目录下的ets文件中创建一个Web组件。在web组件中通过src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于调用Web组件的方法。 - ``` + ```ts // xxx.ets @Entry @Component @@ -24,7 +24,7 @@ Web是提供网页显示能力的组件，具体用法请参考 [Web API](../ref Web组件的使用需要添加丰富的页面样式和功能属性。设置height、padding样式可为Web组件添加高和内边距，设置fileAccess属性可为Web组件添加文件访问权限，设置javaScriptAccess属性为true使Web组件具有执行JavaScript代码的能力。 -``` +```ts // xxx.ets @Entry @Component @@ -52,7 +52,7 @@ struct WebComponent { 为Web组件添加onProgressChange事件，该事件回调Web引擎加载页面的进度值。将该进度值赋值给Progress组件的value，控制Progress组件的状态。当进度为100%时隐藏Progress组件，Web页面加载完成。 -``` +```ts // xxx.ets @Entry @Component @@ -91,7 +91,7 @@ struct WebComponent { ``` 在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是网页加载完成时的回调，runJavaScript方法可以执行HTML中的JavaScript脚本。当页面加载完成时，触发onPageEnd事件，调用HTML文件中的test方法，在控制台打印信息。 -``` +```ts // xxx.ets @Entry @Component @@ -136,7 +136,7 @@ struct WebComponent { 在main/resources/rawfile目录下创建一个HTML文件。 -``` +```html @@ -155,7 +155,7 @@ struct WebComponent { 该场景实现了Web组件中视频的动态播放。首先在HTML页面内嵌入视频资源，再使用Web组件的控制器调用onActive和onInactive方法激活和暂停页面渲染。点击onInactive按钮，Web页面停止渲染，视频暂停播放；点击onActive按钮，激活Web组件，视频继续播放。 - ``` + ```ts // xxx.ets @Entry @Component @@ -180,7 +180,7 @@ struct WebComponent { } ``` - ``` + ```html diff --git a/zh-cn/application-dev/ui/ui-ts-components.md b/zh-cn/application-dev/ui/ui-ts-components.md index a255554228..7712c3c674 100644 --- a/zh-cn/application-dev/ui/ui-ts-components.md +++ b/zh-cn/application-dev/ui/ui-ts-components.md @@ -9,14 +9,14 @@ 自定义组件的声明方式为： -``` +```ts @Component struct MyComponent {} ``` 在IDE创建工程模板中，MyComponent就是一个可以居中显示文字的自定义组件。开发者可以在Component的build方法里描述自己的UI结构，但需要遵循Builder的接口约束。 -``` +```ts interface Builder { build: () => void } diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md index fb875bc077..2fe5474f2a 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md @@ -17,7 +17,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。 - ``` + ```ts Flex({ direction: FlexDirection.Row }) { Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('2').width('33%').height(50).backgroundColor(0xD2B48C) @@ -33,7 +33,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。 - ``` + ```ts Flex({ direction: FlexDirection.RowReverse }) { Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('2').width('33%').height(50).backgroundColor(0xD2B48C) @@ -49,7 +49,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。 - ``` + ```ts Flex({ direction: FlexDirection.Column }) { Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('2').width('100%').height(50).backgroundColor(0xD2B48C) @@ -65,7 +65,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。 - ``` + ```ts Flex({ direction: FlexDirection.ColumnReverse }) { Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('2').width('100%').height(50).backgroundColor(0xD2B48C) @@ -86,7 +86,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。 - ``` + ```ts Flex({ wrap: FlexWrap.NoWrap }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) @@ -101,7 +101,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexWrap.Wrap：换行。 - ``` + ```ts Flex({ wrap: FlexWrap.Wrap }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) @@ -116,7 +116,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexWrap.WrapReverse：换行，且与行排列方向相反。 - ``` + ```ts Flex({ wrap: FlexWrap.WrapReverse}) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) @@ -139,7 +139,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 - ``` + ```ts Flex({ justifyContent: FlexAlign.Start }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) @@ -154,7 +154,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 - ``` + ```ts Flex({ justifyContent: FlexAlign.Center }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) @@ -169,7 +169,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexAlign.End: 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。 - ``` + ```ts Flex({ justifyContent: FlexAlign.End }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) @@ -184,7 +184,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexAlign.SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 - ``` + ```ts Flex({ justifyContent: FlexAlign.SpaceBetween }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) @@ -199,7 +199,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexAlign.SpaceAround: Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 - ``` + ```ts Flex({ justifyContent: FlexAlign.SpaceAround }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) @@ -214,7 +214,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - FlexAlign.SpaceEvenly: Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 - ``` + ```ts Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) @@ -234,7 +234,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - ItemAlign.Auto: 使用Flex容器中默认配置。 - ``` + ```ts Flex({ alignItems: ItemAlign.Auto }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) @@ -249,7 +249,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - ItemAlign.Start: 交叉轴方向首部对齐。 - ``` + ```ts Flex({ alignItems: ItemAlign.Start }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) @@ -264,7 +264,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - ItemAlign.Center: 交叉轴方向居中对齐。 - ``` + ```ts Flex({ alignItems: ItemAlign.Center }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) @@ -279,7 +279,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - ItemAlign.End：交叉轴方向底部对齐。 - ``` + ```ts Flex({ alignItems: ItemAlign.End }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) @@ -294,7 +294,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 - ``` + ```ts Flex({ alignItems: ItemAlign.Stretch }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) @@ -309,7 +309,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 - ItemAlign.Baseline：交叉轴方向文本基线对齐。 - ``` + ```ts Flex({ alignItems: ItemAlign.Baseline }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) @@ -344,7 +344,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容 可使用弹性布局做出子元素排列方式为水平方向排列，且子元素的总宽度超出父元素的宽度不换行，子元素在水平方向两端对齐，中间间距由除首尾外的子元素平分，竖直方向上子元素居中的效果。 -``` +```ts @Entry @Component struct FlexExample { diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md index e32f4b0b2c..8fc5f5cfe5 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md @@ -50,13 +50,13 @@ - 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp： - ``` + ```ts GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} ``` 栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如： - ``` + ```ts GridContainer() {} ``` @@ -64,10 +64,9 @@ - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如： - ``` + ```ts GridContainer({ sizeType: SizeType.SM) { Row() { - Text('1') .useSizeType({ xs: { span: 2}, @@ -85,7 +84,7 @@ 栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offest表示列偏移量，指将组件放置在哪一个columns上。 如： -``` +```ts GridContainer() { Row() { Text('1') @@ -103,7 +102,7 @@ GridContainer() { 使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。 -``` +```ts @Entry @Component struct GridContainerExample { diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md index 11a08f36e6..85b9d19fd6 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md @@ -18,11 +18,11 @@ import mediaquery from '@ohos.mediaquery' ``` 然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如： -``` +```ts listener = mediaquery.matchMediaSync('(orientation: landscape)') ``` 最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如： -``` +```ts onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // do something here @@ -63,8 +63,8 @@ listener.on('change', onPortrait) | 类型 | 说明 | | -------- | ---------------------------------------- | | and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | -| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用not运算符时必须指定媒体类型。 | -| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用only时必须指定媒体类型。 | +| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
使用not运算符时必须指定媒体类型。 | +| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
使用only时必须指定媒体类型。 | | ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000),  （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | | or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or  （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 | @@ -142,10 +142,12 @@ listener.on('change', onPortrait) } } ``` -横屏下文本内容为Landscape，颜色为#FFD700。
+横屏下文本内容为Landscape，颜色为#FFD700。 + ![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png) -非横屏下文本内容为Portrait，颜色为#DB7093。
+非横屏下文本内容为Portrait，颜色为#DB7093。 + ![zh-cn_image_0000001263074739](figures/zh-cn_image_0000001263074739.png) ## 相关实例 diff --git a/zh-cn/application-dev/ui/ui-ts-local-storage.md b/zh-cn/application-dev/ui/ui-ts-local-storage.md index 901c78f8b6..32bad90098 100644 --- a/zh-cn/application-dev/ui/ui-ts-local-storage.md +++ b/zh-cn/application-dev/ui/ui-ts-local-storage.md @@ -30,9 +30,9 @@ constructor(initializingProperties?: Object) **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| ---------------------- | ------ | :--: | ------ | ------------------------------------------------------------ | -| initializingProperties | Object | 否 | - | object.keys(obj)返回的所有对象属性及其值都将添加到LocalStorage。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| ---------------------- | ------ | :--: | ---- | ---------------------------------------- | +| initializingProperties | Object | 否 | - | object.keys(obj)返回的所有对象属性及其值都将添加到LocalStorage。 | @@ -44,14 +44,14 @@ has(propName: string): boolean **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | -------------- | -| propName | string | 是 | - | 属性的属性值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | ------- | +| propName | string | 是 | - | 属性的属性值。 | **返回值：** -| 类型 | 描述 | -| ------- | -------------------------- | +| 类型 | 描述 | +| ------- | ------------- | | boolean | 返回属性的属性值是否存在。 | @@ -64,14 +64,14 @@ get\(propName: string): T **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | ------------------- | -| propName | string | 是 | - | 要获取对应的key值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | ----------- | +| propName | string | 是 | - | 要获取对应的key值。 | **返回值：** -| 类型 | 描述 | -| -------------- | ------------------------------------------------------- | +| 类型 | 描述 | +| -------------- | ---------------------------------------- | | T \| undefined | 当keyvalue存在时，返回keyvalue值。不存在返回undefined。 | @@ -84,15 +84,15 @@ set\(propName: string, newValue: T): boolean **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | ----------------- | -| propName | string | 是 | - | 要设置的key值。 | -| newValue | T | 是 | - | 要设置的value值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | ----------- | +| propName | string | 是 | - | 要设置的key值。 | +| newValue | T | 是 | - | 要设置的value值。 | **返回值：** -| 类型 | 描述 | -| ------- | ----------------------------------------------------- | +| 类型 | 描述 | +| ------- | ----------------------------------- | | boolean | 如果存在key值，设置value值并返回true，否则返回false。 | @@ -105,15 +105,15 @@ setOrCreate\(propName: string, newValue: T): boolean **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | ----------------------- | -| propName | string | 是 | - | 要更新或者创建的key值。 | -| newValue | T | 是 | - | 要更新或创建的value值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | -------------- | +| propName | string | 是 | - | 要更新或者创建的key值。 | +| newValue | T | 是 | - | 要更新或创建的value值。 | **返回值：** -| 类型 | 描述 | -| ------- | ------------------------------------------------------------ | +| 类型 | 描述 | +| ------- | ---------------------------------------- | | boolean | 如果已存在与给定键名字相同的属性，更新其值且返回true。如果不存在具有给定名称的属性，在LocalStorage中创建具有给定默认值的新属性，默认值必须是T类型。不允许undefined 或 null 返回true。 | @@ -126,14 +126,14 @@ link\(propName: string): T **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | ---------------------- | -| propName | string | 是 | - | 要双向绑定的属性名称。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | ----------- | +| propName | string | 是 | - | 要双向绑定的属性名称。 | **返回值：** -| 类型 | 描述 | -| ---- | ------------------------------------------------------------ | +| 类型 | 描述 | +| ---- | ---------------------------------------- | | T | 如果存在具有给定键的属性，返回到此属性的双向绑定，该双向绑定意味着变量或者组件对数据的更改将同步到LocalStorage，然后通过LocalStorage实例同步到任何变量或组件。如果不存在给定键的属性，返回undefined。 | @@ -146,15 +146,15 @@ setAndLink\(propName: string, defaultValue: T): T **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| ------------ | ------ | :--: | ------ | -------------------- | -| propName | string | 是 | - | 要进行创建的key值。 | -| defaultValue | T | 是 | - | 要进行设置的默认值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| ------------ | ------ | :--: | ---- | ----------- | +| propName | string | 是 | - | 要进行创建的key值。 | +| defaultValue | T | 是 | - | 要进行设置的默认值。 | **返回值：** -| 类型 | 描述 | -| ------------------------------------- | ------------------------------------------------------------ | +| 类型 | 描述 | +| ------------------------------------- | ---------------------------------------- | | [@Link](ts-component-states-link.md ) | 与Link接口类似，如果当前的key保存于LocalStorage，返回该key值对应的value值。如果该key值未被创建，则创建一个对应的defaultValue的Link返回。 | @@ -167,14 +167,14 @@ prop\(propName: string): T **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | ----------------------- | -| propName | string | 是 | - | 要单向数据绑定的key值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | ------------- | +| propName | string | 是 | - | 要单向数据绑定的key值。 | **返回值：** -| 类型 | 描述 | -| ------------------------------------ | ------------------------------------------------------------ | +| 类型 | 描述 | +| ------------------------------------ | ---------------------------------------- | | [@Prop](ts-component-states-prop.md) | 如果存在具有给定键的属性，返回此属性的单向数据绑定。该单向绑定意味着只能通过LocalStorage将属性的更改同步到变量或组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态变量。如果此键的属性不存在则返回undefined。 | @@ -187,15 +187,15 @@ setAndProp\(propName: string, defaultValue: T): T **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| ------------ | ------ | :--: | ------ | --------------------------- | -| propName | string | 是 | - | 要保存的的键值对中的key值。 | -| defaultValue | T | 是 | - | 创建的默认值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| ------------ | ------ | :--: | ---- | --------------- | +| propName | string | 是 | - | 要保存的的键值对中的key值。 | +| defaultValue | T | 是 | - | 创建的默认值。 | **返回值：** -| 类型 | 描述 | -| ------------------------------------ | ------------------------------------------------------------ | +| 类型 | 描述 | +| ------------------------------------ | ---------------------------------------- | | [@Prop](ts-component-states-prop.md) | 如果当前的key保存与LocalStorage，返回该key值对应的value值。如果该key值未被创建，则创建一个对应的defaultValue的Prop返回。 | @@ -208,14 +208,14 @@ delete(propName: string): boolean **参数：** -| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------ | :--: | ------ | --------------------- | -| propName | string | 是 | - | 要删除的属性的key值。 | +| 参数名 | 类型 | 必填 | 默认值 | 参数描述 | +| -------- | ------ | :--: | ---- | ------------ | +| propName | string | 是 | - | 要删除的属性的key值。 | **返回值：** -| 类型 | 描述 | -| ------- | ------------------------------------------------------------ | +| 类型 | 描述 | +| ------- | ---------------------------------------- | | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 | @@ -228,8 +228,8 @@ keys(): IterableIterator\ **返回值：** -| 类型 | 描述 | -| ------------- | ---------------------------- | +| 类型 | 描述 | +| -------------- | -------------- | | array\ | 返回包含所有键的字符串数组。 | @@ -242,8 +242,8 @@ size(): number **返回值：** -| 类型 | 描述 | -| ------ | ------------------ | +| 类型 | 描述 | +| ------ | --------- | | number | 返回键值对的数量。 | @@ -256,8 +256,8 @@ clear(): boolean **返回值：** -| 类型 | 描述 | -| ------- | ------------------------------------------------------------ | +| 类型 | 描述 | +| ------- | --------------------------------- | | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，返回false。 | ### 示例1（在一个Ability创建的LocalStorage) @@ -292,7 +292,7 @@ export default class MainAbility extends Ability { @Component组件获取数据 -``` +```ts let storage = LocalStorage.GetShared() @Entry(storage) @Component @@ -314,7 +314,7 @@ struct LocalStorageComponent { ### 示例2（在Entry页面定义LocalStorage） -``` +```ts let storage = new LocalStorage({"PropA":47}); @Entry(storage) @Component diff --git a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md index 02db871f12..95d0a31333 100644 --- a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md +++ b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md @@ -19,7 +19,7 @@ 下面我们就分别学习这两种跳转机制来实现食物分类列表页面和食物详情页的链接。 1. 点击FoodListItem后跳转到FoodDetail页面。在FoodListItem内创建Navigator组件，使其子组件都具有路由功能，目标页面target为'pages/FoodDetail'。 - ``` + ```ts @Component struct FoodListItem { private foodItem: FoodData @@ -48,7 +48,7 @@ ![zh-cn_image_0000001215318403](figures/zh-cn_image_0000001215318403.gif) 2. 点击FoodGridItem后跳转到FoodDetail页面。调用页面路由router模块的push接口，将FoodDetail页面推到路由栈中，实现页面跳转。使用router路由API接口，需要先引入router。 - ``` + ```ts import router from '@system.router' @Component @@ -70,7 +70,7 @@ ![zh-cn_image_0000001169918548](figures/zh-cn_image_0000001169918548.gif) 3. 在FoodDetail页面增加回到食物列表页面的图标。在resources > base > media文件夹下存入回退图标Back.png。新建自定义组件PageTitle，包含后退的图标和Food Detail的文本，调用路由的router.back()接口，弹出路由栈最上面的页面，即返回上一级页面。 - ``` + ```ts // FoodDetail.ets import router from '@system.router' @@ -96,7 +96,7 @@ ``` 4. 在FoodDetail组件内创建Stack组件，包含子组件FoodImageDisplay和PageTitle子组件，设置其对齐方式为左上对齐TopStart。 - ``` + ```ts @Entry @Component struct FoodDetail { @@ -121,7 +121,7 @@ 我们已经完成了FoodCategoryList页面和FoodDetail页面的跳转和回退，但是点击不同的FoodListItem/FoodGridItem，跳转的FoodDetail页面都是西红柿Tomato的详细介绍，这是因为没有构建起两个页面的数据传递，需要用到携带参数（parameter）路由。 1. 在FoodListItem组件的Navigator设置其params属性，params属性接受key-value的Object。 - ``` + ```ts // FoodList.ets @Component struct FoodListItem { @@ -137,7 +137,7 @@ FoodGridItem调用的routerAPI同样有携带参数跳转的能力，使用方法和Navigator类似。 - ``` + ```ts router.push({ uri: 'pages/FoodDetail', params: { foodData: this.foodItem } @@ -145,7 +145,7 @@ ``` 2. FoodDetail页面引入FoodData类，在FoodDetail组件内添加foodItem成员变量。 - ``` + ```ts // FoodDetail.ets import { FoodData } from '../model/FoodData' @@ -160,7 +160,7 @@ ``` 3. 获取foodData对应的value。调用router.getParams().foodData来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。 - ``` + ```ts @Entry @Component struct FoodDetail { @@ -173,7 +173,7 @@ ``` 4. 重构FoodDetail页面的组件。在构建视图时，FoodDetail页面的食物信息都是直接声明的常量，现在要用传递来的FoodData数据来对其进行重新赋值。整体的FoodDetail.ets代码如下。 - ``` + ```ts @Component struct PageTitle { build() { -- GitLab