Skip to content

D
Docs

Tonvia / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 87721ce0 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 acea059c
展开全部 隐藏空白更改
内联 并排
Showing with 1420 addition and 1360 deletion
zh-cn/application-dev/ui/js-framework-file.md
浏览文件 @ 87721ce0
......@@ -32,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()函数创建&lt;url&gt;数据类型，如：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&nbsp;AVC<br/>Baseline&nbsp;Profile&nbsp;(BP) | .3gp<br/>.mp4 |
zh-cn/application-dev/ui/js-framework-js-file.md
浏览文件 @ 87721ce0
......@@ -3,7 +3,7 @@
## 应用生命周期
每个应用可以在app.js自定义应用级[生命周期](../ui/js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志：
```
```js
// app.js
export default {
onCreate() {
......@@ -18,13 +18,13 @@ export default {
## 应用对象<sup>6+</sup>
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| 属性 | 类型 | 描述 |
| ------ | -------- | ---------------------------------------- |
| 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;
```
zh-cn/application-dev/ui/js-framework-js-tag.md
浏览文件 @ 87721ce0
......@@ -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. 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。
>
>
> 2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
| 属性 | 类型 | 必填 | 缺省值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| designWidth | number | 否 | 720<br/> | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
| 属性 | 类型 | 必填 | 缺省值 | 描述 |
| --------------- | ------- | ---- | -------- | ---------------------------------------- |
| designWidth | number | 否 | 720<br/> | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
示例如下：
```
```json
{
...
"window": {
......@@ -69,7 +69,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题，
## 示例
```
```json
{
"app": {
"bundleName": "com.example.player",
......
zh-cn/application-dev/ui/js-framework-multiple-languages.md
浏览文件 @ 87721ce0
......@@ -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 | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：<br/>- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：```$t('strings.object', {name:'Hello world'})```。 <br> - 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：```$t('strings.array', [Hello world']``` |
- 简单格式化示例代码
```
```html
<!-- xxx.hml -->
<div>
<!-- 不使用占位符，text中显示“Hello world!” -->
......@@ -127,7 +127,7 @@ ar-AE.json
</div>
```
```
```js
// xxx.js
// 下面为在js文件中的使用方法。
export default {
......@@ -147,7 +147,7 @@ ar-AE.json
```
- 单复数格式化方法
表4 单复数格式化
| 属性 | 类型 | 参数 | 必填 | 描述 |
......@@ -162,7 +162,7 @@ ar-AE.json
| count | number | 是 | 要表达的值 |
- 单复数格式化示例代码
```
```html
<!--xxx.hml-->
<div>
<!-- 传递数值为0时： "0 people" 阿拉伯语中此处匹配key为zero的词条-->
......
zh-cn/application-dev/ui/js-framework-resource-restriction.md
浏览文件 @ 87721ce0
......@@ -88,5 +88,5 @@ resources/res-defaults.json:
</div>
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 资源限定文件中不支持颜色枚举格式。
zh-cn/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 87721ce0
......@@ -22,14 +22,14 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。
1. 内部样式，支持使用style、class属性来控制组件的样式。例如：
```
```html
<!-- index.hml -->
<div class="container">
<text style="color: red">Hello World</text>
</div>
```
```
```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,&nbsp;.content | 用于选择class="title"和class="content"的组件。 |
| 选择器 | 样例 | 样例描述 |
| ------------------------- | ------------------------------------- | ---------------------------------------- |
| .class | .container | 用于选择class="container"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 |
| tag | text | 用于选择text组件。 |
| , | .title,&nbsp;.content | 用于选择class="title"和class="content"的组件。 |
| \#id&nbsp;.class&nbsp;tag | \#containerId&nbsp;.content&nbsp;text | 非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“&gt;”代替空格，如：\#containerId&gt;.content。 |
示例：
```
```html
<!-- 页面布局xxx.hml -->
<div id="containerId" class="container">
<text id="titleId" class="title">标题</text>
......@@ -77,7 +77,7 @@ css选择器用于选择需要添加样式的元素，支持的选择器如下
</div>
```
```
```css
/* 页面样式xxx.css */
/\* 对所有div组件设置样式 \*/
div {
......@@ -124,30 +124,30 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状
除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列：
| 名称 | 支持组件 | 描述 |
| -------- | -------- | -------- |
| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 |
| :active | 支持click事件的组件<br/> | 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 |
| :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 |
| :checked | input[type="checkbox"、type="radio"]、&nbsp;switch | 表示checked属性为true的元素（不支持动画样式的设置）。 |
| 名称 | 支持组件 | 描述 |
| --------- | ---------------------------------------- | ---------------------------------------- |
| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 |
| :active | 支持click事件的组件<br/> | 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 |
| :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 |
| :checked | input[type="checkbox"、type="radio"]、&nbsp;switch | 表示checked属性为true的元素（不支持动画样式的设置）。 |
伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式：
```
```html
<!-- index.hml -->
<div class="container">
<input type="button" class="button" value="Button"></input>
</div>
```
```
```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样式继承<sup>6+</sup>
......
zh-cn/application-dev/ui/js-framework-syntax-hml.md
浏览文件 @ 87721ce0
......@@ -5,7 +5,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
## 页面结构
```
```html
<!-- xxx.hml -->
<div class="item-container">
<text class="item-title">Image Show</text>
......@@ -18,19 +18,19 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
## 数据绑定
```
```html
<!-- xxx.hml -->
<div onclick="changeText">
<text> {{content[1]}} </text>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<text class="title">{{count}}</text>
......@@ -75,7 +75,7 @@ export default {
</div>
```
```
```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
<!-- xxx.hml -->
<div>
<!-- 使用事件冒泡模式绑定事件回调函数。5+ -->;
......@@ -157,7 +157,7 @@ export default {
</div>
```
```
```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以上时采用冒泡处理。
## 捕获事件绑定<sup>5+</sup>
......@@ -183,7 +183,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
- 绑定并阻止事件向下传递：grab:{event}.capture。
- 示例
```
```html
<!-- xxx.hml -->
<div>
<!-- 使用事件捕获模式绑定事件回调函数。5+ -->
......@@ -193,7 +193,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
</div>
```
```
```js
// xxx.js
export default {
touchstartfuc: function(e) {
......@@ -205,7 +205,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
## 列表渲染
```
```html
<!-- xxx.hml -->
<div class="array-container" style="flex-direction: column;margin: 200px;">
<!-- div列表渲染 -->
......@@ -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
<!-- xxx.hml -->
<div class="container">
<button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
......@@ -276,7 +276,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
......@@ -317,7 +317,7 @@ export default {
</div>
```
```
```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 {
&lt;block&gt;控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
```
```html
<!-- xxx.hml -->
<list>
<block for="glasses">
......@@ -367,7 +367,7 @@ export default {
</list>
```
```
```js
// xxx.js
export default {
data: {
......@@ -385,7 +385,7 @@ export default {
HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。
```
```html
<!-- template.hml -->
<div class="item">
<text>Name: {{name}}</text>
......@@ -393,7 +393,7 @@ HML可以通过element引用模板文件，详细介绍可参考[自定义组件
</div>
```
```
```html
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
......
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ 87721ce0
......@@ -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中暴露的对象。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;应用对象不支持数据绑定，需主动触发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,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。 |
| $refs | Object | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
| private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 |
| public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 |
| props | Array/Object | props用于组件之间的通信，可以通过&lt;tag&nbsp;xxxx='value'&gt;方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;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,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。 |
| $refs | Object | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
| private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 |
| public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 |
| props | Array/Object | props用于组件之间的通信，可以通过&lt;tag&nbsp;xxxx='value'&gt;方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。目前props的数据类型不支持Function。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 |
| computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 |
## 方法
- 数据方法
| 方法 | 参数 | 描述 |
| -------- | -------- | -------- |
| $set | key:&nbsp;string,&nbsp;value:&nbsp;any | 添加新的数据属性或者修改已有数据属性。<br/>用法：<br/>this.$set('key',value)：添加数据属性。 |
| $delete | key:&nbsp;string | 删除数据属性。<br/>用法：<br/>this.$delete('key')：删除数据属性。 |
| 方法 | 参数 | 描述 |
| ------- | -------------------------------------- | ---------------------------------------- |
| $set | key:&nbsp;string,&nbsp;value:&nbsp;any | 添加新的数据属性或者修改已有数据属性。<br/>用法：<br/>this.$set('key',value)：添加数据属性。 |
| $delete | key:&nbsp;string | 删除数据属性。<br/>用法：<br/>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:&nbsp;string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。<br/>用法：<br/>&lt;div&nbsp;id='xxx'&gt;&lt;/div&gt;<br/>-&nbsp;this.$element('xxx')：获得id为xxx的组件对象。<br/>-&nbsp;this.$element()：获得根组件对象。 |
| $rootElement | 无 | 获取根组件对象。<br/>用法：this.$rootElement().scrollTo({&nbsp;duration:&nbsp;500,&nbsp;position:&nbsp;300&nbsp;}),&nbsp;页面在500ms内滚动300px。 |
| $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
| $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
| $child | id:&nbsp;string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。<br/>用法：<br/>this.$child('xxx')&nbsp;：获取id为xxx的子级自定义组件的ViewModel实例。 |
| 方法 | 参数 | 描述 |
| ------------ | --------------- | ---------------------------------------- |
| $element | id:&nbsp;string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。<br/>用法：<br/>&lt;div&nbsp;id='xxx'&gt;&lt;/div&gt;<br/>-&nbsp;this.$element('xxx')：获得id为xxx的组件对象。<br/>-&nbsp;this.$element()：获得根组件对象。 |
| $rootElement | 无 | 获取根组件对象。<br/>用法：this.$rootElement().scrollTo({&nbsp;duration:&nbsp;500,&nbsp;position:&nbsp;300&nbsp;}),&nbsp;页面在500ms内滚动300px。 |
| $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
| $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
| $child | id:&nbsp;string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。<br/>用法：<br/>this.$child('xxx')&nbsp;：获取id为xxx的子级自定义组件的ViewModel实例。 |
- 事件方法
| 方法 | 参数 | 描述 |
| -------- | -------- | -------- |
| $watch | data:&nbsp;string,&nbsp;callback:&nbsp;string&nbsp;\|&nbsp;Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。<br/>用法：<br/>this.$watch('key',&nbsp;callback) |
| 方法 | 参数 | 描述 |
| ---------------------------------------- | ---- | ---- |
| $watch | data:&nbsp;string,&nbsp;callback:&nbsp;string&nbsp;\|&nbsp;Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。<br/>用法：<br/>this.$watch('key',&nbsp;callback) | | |
- 页面方法
| 方法 | 参数 | 描述 |
| -------- | -------- | -------- |
| 方法 | 参数 | 描述 |
| --------------------- | -------------------------------- | ------------------------------- |
| scrollTo<sup>6+</sup> | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 |
**表1** ScrollPageParam<sup>6+</sup>
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| position | number | - | 指定滚动位置。 |
| id | string | - | 指定需要滚动到的元素id。 |
| duration | number | 300 | 指定滚动时长，单位为毫秒。 |
| timingFunction | string | ease | 指定滚动动画曲线，可选值参考<br/>[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 |
| complete | ()&nbsp;=&gt;&nbsp;void | - | 指定滚动完成后需要执行的回调函数。 |
| 名称 | 类型 | 默认值 | 描述 |
| -------------- | ----------------------- | ---- | ---------------------------------------- |
| position | number | - | 指定滚动位置。 |
| id | string | - | 指定需要滚动到的元素id。 |
| duration | number | 300 | 指定滚动时长，单位为毫秒。 |
| timingFunction | string | ease | 指定滚动动画曲线，可选值参考<br/>[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 |
| complete | ()&nbsp;=&gt;&nbsp;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
<!-- index.hml -->
<div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
```
2. 通过$element获取DOM元素
```
```html
<!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
根节点所在页面：
```
```html
<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
......@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
</div>
```
```
```js
// root.js
export default {
data: {
......@@ -243,7 +243,7 @@ export default {
自定义parent组件：
```
```html
<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
......@@ -253,7 +253,7 @@ export default {
</div>
```
```
```js
// parent.js
export default {
data: {
......@@ -272,7 +272,7 @@ export default {
自定义child组件：
```
```html
<!-- child.hml -->
<div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">child component clicked</text>
......@@ -280,7 +280,7 @@ export default {
</div>
```
```
```js
// child.js
export default {
data: {
......
zh-cn/application-dev/ui/ts-application-states-apis-environment.md
浏览文件 @ 87721ce0
......@@ -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:&nbsp;string,<br/>defaultValue:&nbsp;any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 |
| EnvProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联此系统项数组到AppStorage中。 |
| Keys | Array&lt;string&gt; | number | 返回关联的系统项。 |
| key | 参数 | 返回值 | 说明 |
| -------- | ---------------------------------------- | ------- | ---------------------------------------- |
| EnvProp | key:&nbsp;string,<br/>defaultValue:&nbsp;any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 |
| EnvProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联此系统项数组到AppStorage中。 |
| Keys | Array&lt;string&gt; | number | 返回关联的系统项。 |
## Environment内置的环境变量
| key | 类型 | 说明 |
| -------- | -------- | -------- |
| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 |
| colorMode | ColorMode | 深浅色模式，可选值为：<br/>-&nbsp;ColorMode.LIGHT：浅色模式；<br/>-&nbsp;ColorMode.DARK：深色模式。 |
| fontScale | number | 字体大小比例，取值范围为[0.85,&nbsp;1.45]。 |
| fontWeightScale | number | 字体权重比例，取值范围为[0.6,&nbsp;1.6]。 |
| layoutDirection | LayoutDirection | 布局方向类型，可选值为：<br/>-&nbsp;LayoutDirection.LTR：从左到右；<br/>-&nbsp;LayoutDirection.RTL：从右到左。 |
| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 |
| key | 类型 | 说明 |
| -------------------- | --------------- | ---------------------------------------- |
| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 |
| colorMode | ColorMode | 深浅色模式，可选值为：<br/>-&nbsp;ColorMode.LIGHT：浅色模式；<br/>-&nbsp;ColorMode.DARK：深色模式。 |
| fontScale | number | 字体大小比例，取值范围为[0.85,&nbsp;1.45]。 |
| fontWeightScale | number | 字体权重比例，取值范围为[0.6,&nbsp;1.6]。 |
| layoutDirection | LayoutDirection | 布局方向类型，可选值为：<br/>-&nbsp;LayoutDirection.LTR：从左到右；<br/>-&nbsp;LayoutDirection.RTL：从右到左。 |
| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 |
zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md
浏览文件 @ 87721ce0
......@@ -3,21 +3,22 @@
方舟开发框架通过PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。
| 方法 | 参数说明 | 返回值 | 定义 |
| -------- | -------- | -------- | -------- |
| PersistProp | key&nbsp;:&nbsp;string<br/>defaultValue:&nbsp;T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：<br/>-&nbsp;首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。<br/>-&nbsp;其次，Persistent中有此命名的属性，使用Persistent中的属性值。<br/>-&nbsp;最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 |
| DeleteProp | key:&nbsp;string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 |
| PersistProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联多个命名的属性绑定。 |
| Keys | void | Array&lt;string&gt; | 返回所有持久化属性的标记。 |
| 方法 | 参数说明 | 返回值 | 定义 |
| ------------ | ---------------------------------------- | ------------------- | ---------------------------------------- |
| PersistProp | key&nbsp;:&nbsp;string<br/>defaultValue:&nbsp;T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：<br/>-&nbsp;首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。<br/>-&nbsp;其次，Persistent中有此命名的属性，使用Persistent中的属性值。<br/>-&nbsp;最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 |
| DeleteProp | key:&nbsp;string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 |
| PersistProps | keys:&nbsp;{<br/>key:&nbsp;string,<br/>defaultValue:&nbsp;any<br/>}[] | void | 关联多个命名的属性绑定。 |
| Keys | void | Array&lt;string&gt; | 返回所有持久化属性的标记。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - PersistProp接口使用时，需要保证输入对应的key应当在AppStorage存在。
>
>
> - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。
```
```ts
// xxx.ets
PersistentStorage.PersistProp("highScore", "0");
@Entry
......
zh-cn/application-dev/ui/ts-application-states-appstorage.md
浏览文件 @ 87721ce0
......@@ -14,20 +14,20 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同
## AppStorage接口
| 方法 | 参数说明 | 返回值 | 定义 |
| -------- | -------- | -------- | -------- |
| SetAndLink | key:&nbsp;string,<br/>defaultValue:&nbsp;T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 |
| Set | key:&nbsp;string,<br/>newValue:&nbsp;T | void | 对已保存的key值，替换其value值。 |
| Link | key:&nbsp;string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 |
| SetAndProp | propName:&nbsp;string,<br/>defaultValue:&nbsp;S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 |
| Prop | key:&nbsp;string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;prop方法对应的属性值类型为简单类型。 |
| SetOrCreate | key:&nbsp;string,<br/>newValue:&nbsp;T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。<br/>如果不存在存在与给定键名字相同的属性,&nbsp;则创建一个键为key,&nbsp;值为newValue的属性，属性值不支持null和undefined。 |
| Get | key:&nbsp;string | T或undefined | 通过此接口获取对应key值的value。 |
| Has | propName:&nbsp;string | boolean | 判断对应键值的属性是否存在。 |
| Keys | void | array&lt;string&gt; | 返回包含所有键的字符串数组。 |
| Delete | key:&nbsp;string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 |
| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 |
| IsMutable | key:&nbsp;string | boolean | 返回此属性是否存在并且是否可以改变。 |
| 方法 | 参数说明 | 返回值 | 定义 |
| ----------- | ---------------------------------------- | ------------------- | ---------------------------------------- |
| SetAndLink | key:&nbsp;string,<br/>defaultValue:&nbsp;T | @Link | 与Link接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Link返回。 |
| Set | key:&nbsp;string,<br/>newValue:&nbsp;T | void | 对已保存的key值，替换其value值。 |
| Link | key:&nbsp;string | @Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。 |
| SetAndProp | propName:&nbsp;string,<br/>defaultValue:&nbsp;S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 |
| Prop | key:&nbsp;string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;prop方法对应的属性值类型为简单类型。 |
| SetOrCreate | key:&nbsp;string,<br/>newValue:&nbsp;T | boolean | 如果已存在与给定键名字相同的属性，如果此属性可以被更改则替换其value值且返回true，否则不替换且返回false。<br/>如果不存在存在与给定键名字相同的属性,&nbsp;则创建一个键为key,&nbsp;值为newValue的属性，属性值不支持null和undefined。 |
| Get | key:&nbsp;string | T或undefined | 通过此接口获取对应key值的value。 |
| Has | propName:&nbsp;string | boolean | 判断对应键值的属性是否存在。 |
| Keys | void | array&lt;string&gt; | 返回包含所有键的字符串数组。 |
| Delete | key:&nbsp;string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 |
| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 |
| IsMutable | key:&nbsp;string | boolean | 返回此属性是否存在并且是否可以改变。 |
## AppStorage与组件同步
......@@ -49,7 +49,8 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同
## 示例
```
```ts
// xxx.ets
let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
......
zh-cn/application-dev/ui/ts-attribution-configuration.md
浏览文件 @ 87721ce0
......@@ -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)
......
zh-cn/application-dev/ui/ts-child-component-configuration.md
浏览文件 @ 87721ce0
......@@ -5,7 +5,7 @@
- 以下是简单的Column示例：
```
```ts
Column() {
Text('Hello')
.fontSize(100)
......@@ -18,7 +18,7 @@
- 可以嵌套多个子组件：
```
```ts
Column() {
Column() {
Button() {
......
zh-cn/application-dev/ui/ts-component-based-builder.md
浏览文件 @ 87721ce0
......@@ -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 = "";
......
zh-cn/application-dev/ui/ts-component-based-component.md
浏览文件 @ 87721ce0
......@@ -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() {
......
zh-cn/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @ 87721ce0
......@@ -3,7 +3,7 @@
@CustomDialog装饰器用于装饰自定义弹窗。
```
```ts
// custom-dialog-demo.ets
@CustomDialog
struct DialogExample {
......
zh-cn/application-dev/ui/ts-component-based-entry.md
浏览文件 @ 87721ce0
......@@ -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
......
zh-cn/application-dev/ui/ts-component-based-extend.md
浏览文件 @ 87721ce0
......@@ -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定义框内。
zh-cn/application-dev/ui/ts-component-based-preview.md
浏览文件 @ 87721ce0
......@@ -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 {
......
zh-cn/application-dev/ui/ts-component-based-styles.md
浏览文件 @ 87721ce0
......@@ -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)
......
zh-cn/application-dev/ui/ts-component-creation-re-initialization.md
浏览文件 @ 87721ce0
......@@ -46,7 +46,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ParentComp {
......
zh-cn/application-dev/ui/ts-component-states-link.md
浏览文件 @ 87721ce0
......@@ -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 {
......
zh-cn/application-dev/ui/ts-component-states-prop.md
浏览文件 @ 87721ce0
......@@ -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变量。
zh-cn/application-dev/ui/ts-component-states-state.md
浏览文件 @ 87721ce0
......@@ -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})
```
zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md
浏览文件 @ 87721ce0
......@@ -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)
......
zh-cn/application-dev/ui/ts-custom-component-initialization.md
浏览文件 @ 87721ce0
......@@ -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) {
......
zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md
浏览文件 @ 87721ce0
......@@ -5,18 +5,19 @@
## 生命周期回调函数定义
| 函数名 | 描述 |
| -------- | -------- |
| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 |
| 函数名 | 描述 |
| ---------------- | ---------------------------------------- |
| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 |
| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。<br/>-&nbsp;返回true表示页面自己处理返回逻辑,&nbsp;不进行页面路由。<br/>-&nbsp;返回false表示使用默认的返回逻辑。<br/>-&nbsp;不返回值会作为false处理。 |
| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。<br/>-&nbsp;返回true表示页面自己处理返回逻辑,&nbsp;不进行页面路由。<br/>-&nbsp;返回false表示使用默认的返回逻辑。<br/>-&nbsp;不返回值会作为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。
zh-cn/application-dev/ui/ts-event-configuration.md
浏览文件 @ 87721ce0
......@@ -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)
```
zh-cn/application-dev/ui/ts-framework-directory.md
浏览文件 @ 87721ce0
......@@ -24,8 +24,8 @@ 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)。
> **说明：**
>
> - 资源目录resources文件夹位于src/main下，此目录下资源文件的详细规范以及子目录结构规范参看[资源文件的分类](basic-resource-file-categories.md)。
>
> - 页面支持导入TypeScript和JavaScript文件。
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ 87721ce0
......@@ -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 {
......
zh-cn/application-dev/ui/ts-framework-js-tag.md
浏览文件 @ 87721ce0
......@@ -3,19 +3,19 @@
开发框架需要应用的config.json中配置相关的js标签，其中包含了实例名称、页面路由、视图窗口配置信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| name | string | default | 是 | 标识ETS实例的名字。 |
| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 |
| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 |
| mode | Object | - | 否 | 配置Js&nbsp;Component运行类型与语法风格，详见[mode](#mode)说明。 |
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ------ | ------- | ---- | ---------------------------------------- |
| name | string | default | 是 | 标识ETS实例的名字。 |
| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 |
| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 |
| mode | Object | - | 否 | 配置Js&nbsp;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&nbsp;Component的运行类型，可选值为：<br/>-&nbsp;pageAbility：以ability的方式运行该JS&nbsp;Component。<br/>-&nbsp;form：以卡片的方式运行该JS&nbsp;Component。 |
| syntax | - | 配置该JS&nbsp;Component的语法风格，可选值为：<br/>-&nbsp;hml：以hml/css/js风格进行编写。<br/>-&nbsp;ets：以声明式语法风格进行编写。 |
| 类型 | 默认值 | 说明 |
| ------ | ---- | ---------------------------------------- |
| type | - | 配置该JS&nbsp;Component的运行类型，可选值为：<br/>-&nbsp;pageAbility：以ability的方式运行该JS&nbsp;Component。<br/>-&nbsp;form：以卡片的方式运行该JS&nbsp;Component。 |
| syntax | - | 配置该JS&nbsp;Component的语法风格，可选值为：<br/>-&nbsp;hml：以hml/css/js风格进行编写。<br/>-&nbsp;ets：以声明式语法风格进行编写。 |
> ![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",
......
zh-cn/application-dev/ui/ts-function-build.md
浏览文件 @ 87721ce0
......@@ -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方法仅支持组合组件，使用渲染控制语法。
zh-cn/application-dev/ui/ts-general-ui-concepts.md
浏览文件 @ 87721ce0
......@@ -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 {
......
zh-cn/application-dev/ui/ts-other-states-consume-provide.md
浏览文件 @ 87721ce0
......@@ -4,28 +4,29 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触
表1 @Provide
| 名称 | 说明 |
| -------- | -------- |
| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 |
| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 |
| 初始值 | 必须制定初始值。 |
| 名称 | 说明 |
| ------- | ---------------------------------------- |
| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 |
| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 |
| 初始值 | 必须制定初始值。 |
| 页面重渲染场景 | 触发页面渲染的修改：<br/>-&nbsp;基础类型（boolean，string，number）变量的改变；<br/>-&nbsp;@Observed&nbsp;class类型变量及其属性的修改；<br/>-&nbsp;添加，删除，更新数组中的元素。 |
表2 @Consume
| 类型 | 说明 |
| -------- | -------- |
| 初始值 | 不可设置默认值。 |
| 类型 | 说明 |
| ---- | -------- |
| 初始值 | 不可设置默认值。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 使用@Provide 和@Consume时避免循环引用导致死循环。
其他属性说明与Provide一致。
```
```ts
// xxx.ets
@Entry
@Component
struct CompA {
......
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
浏览文件 @ 87721ce0
......@@ -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 {
......
zh-cn/application-dev/ui/ts-other-states-watch.md
浏览文件 @ 87721ce0
......@@ -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 {
......
zh-cn/application-dev/ui/ts-parameterless-configuration.md
浏览文件 @ 87721ce0
......@@ -4,7 +4,7 @@
组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。例如，Divider组件不包含构造参数：
```
```ts
Column() {
Text('item 1')
Divider() // No parameter configuration of the divider component
......
zh-cn/application-dev/ui/ts-pixel-units.md
浏览文件 @ 87721ce0
......@@ -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&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将vp单位的数值转换为以px为单位的数值。 |
| px2vp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以vp为单位的数值。 |
| fp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将fp单位的数值转换为以px为单位的数值。 |
| px2fp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以fp为单位的数值。 |
| 接口 | 描述 |
| ---------------------------------------- | ---------------------- |
| vp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将vp单位的数值转换为以px为单位的数值。 |
| px2vp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以vp为单位的数值。 |
| fp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将fp单位的数值转换为以px为单位的数值。 |
| px2fp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以fp为单位的数值。 |
| lpx2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将lpx单位的数值转换为以px为单位的数值。 |
| px2lpx(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以lpx为单位的数值。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct Example {
......
zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md
浏览文件 @ 87721ce0
......@@ -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) =&gt; void, keyGen
表1 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,&nbsp;3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 |
| itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| arr | any[] | 是 | - | 必须是数组，允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,&nbsp;3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 |
| itemGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名参数，用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 必须在容器组件内使用；
>
>
> - 生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中；
>
>
> - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作：
> ```
> ```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) =&gt; void, keyGen
简单类型数组示例：
```
```ts
// xxx.ets
@Entry
@Component
struct MyComponent {
......@@ -76,7 +77,8 @@ struct MyComponent {
```
复杂类型数组示例：
```
```ts
// xxx.ets
class Month {
year: number
month: number
......
zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md
浏览文件 @ 87721ce0
......@@ -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')
......
zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md
浏览文件 @ 87721ce0
......@@ -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) =&gt; void, keyG
表1 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 |
| itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------- | --------------------------------------- | ---- | ---- | ---------------------------------------- |
| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 |
| itemGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
| keyGenerator | (item:&nbsp;any)&nbsp;=&gt;&nbsp;string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
表2 IDataSource类型说明
| 名称 | 描述 |
| -------- | -------- |
| totalCount():&nbsp;number | 获取数据总数。 |
| getData(index:&nbsp;number):&nbsp;any | 获取索引对应的数据。 |
| 名称 | 描述 |
| ---------------------------------------- | ----------- |
| totalCount():&nbsp;number | 获取数据总数。 |
| getData(index:&nbsp;number):&nbsp;any | 获取索引对应的数据。 |
| registerDataChangeListener(listener:DataChangeListener):&nbsp;void | 注册改变数据的控制器。 |
| unregisterDataChangeListener(listener:DataChangeListener):&nbsp;void | 注销改变数据的控制器。 |
表3 DataChangeListener类型说明
| 名称 | 描述 |
| -------- | -------- |
| onDataReloaded():&nbsp;void | 重新加载所有数据。 |
| onDataAdded(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件index的位置有数据添加。 |
| onDataMoved(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件数据从from的位置移到to的位置。 |
| onDataDeleted(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件index的位置有数据删除。 |
| onDataChanged(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup>| 通知组件index的位置有数据变化。 |
| onDataAdd(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据添加。 |
| 名称 | 描述 |
| ---------------------------------------- | ---------------------- |
| onDataReloaded():&nbsp;void | 重新加载所有数据。 |
| onDataAdded(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件index的位置有数据添加。 |
| onDataMoved(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件数据从from的位置移到to的位置。 |
| onDataDeleted(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件index的位置有数据删除。 |
| onDataChanged(index:&nbsp;number):&nbsp;void <sup>(deprecated) </sup> | 通知组件index的位置有数据变化。 |
| onDataAdd(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据添加。 |
| onDataMove(from:&nbsp;number,&nbsp;to:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件数据从from的位置移到to的位置。 |
| onDataDelete(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据删除。 |
| onDataChange(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据变化。 |
| onDataDelete(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据删除。 |
| onDataChange(index:&nbsp;number):&nbsp;void <sup>8+</sup> | 通知组件index的位置有数据变化。 |
> ![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) =&gt; void, keyG
## 示例
```
```ts
// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = []
......
zh-cn/application-dev/ui/ts-resource-access.md
浏览文件 @ 87721ce0
......@@ -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":[
{
......
zh-cn/application-dev/ui/ts-syntactic-sugar.md
浏览文件 @ 87721ce0
......@@ -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&nbsp;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,&nbsp;@Prop,&nbsp;@Link,&nbsp;@ObjectLink,&nbsp;<br>@Provide,&nbsp;@Consume,&nbsp;@StorageProp，&nbsp;@StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化，应用可以注册回调方法。 |
| 装饰器 | 装饰内容 | 说明 |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 |
| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 |
| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco&nbsp;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,&nbsp;@Prop,&nbsp;@Link,&nbsp;@ObjectLink,&nbsp;<br>@Provide,&nbsp;@Consume,&nbsp;@StorageProp，&nbsp;@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 {
......
zh-cn/application-dev/ui/ts-syntax-intro.md
浏览文件 @ 87721ce0
......@@ -6,7 +6,7 @@
本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考组件说明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 本节所有示例都以TS语言为例，请遵循相应语言的语法要求。
>
> - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。
......
zh-cn/application-dev/ui/ts-types.md
浏览文件 @ 87721ce0
......@@ -2,58 +2,58 @@
## 长度类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| Length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
| 名称 | 类型定义 | 描述 |
| ------ | -------------------------- | ---------------------------------------- |
| Length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
## 角度类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| Angle | string&nbsp;\|&nbsp;number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：<br/>-&nbsp;deg：如'100deg'。<br/>-&nbsp;rad：如'3.14rad'。 |
| 名称 | 类型定义 | 描述 |
| ----- | -------------------------- | ---------------------------------------- |
| Angle | string&nbsp;\|&nbsp;number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：<br/>-&nbsp;deg：如'100deg'。<br/>-&nbsp;rad：如'3.14rad'。 |
## 点类型
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| Point | [Length,&nbsp;Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 |
| 名称 | 类型定义 | 描述 |
| ----- | --------------------- | --------------------------- |
| Point | [Length,&nbsp;Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 |
## 颜色类型
组件属性方法使用的颜色Color说明如下：
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| Color | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'。<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'。<br/>-&nbsp;HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。<br/>-&nbsp;枚举格式：Color.Black，Color.White等。 |
| 名称 | 类型定义 | 描述 |
| ----- | ---------------------------------------- | ---------------------------------------- |
| Color | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'。<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'。<br/>-&nbsp;HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。<br/>-&nbsp;枚举格式：Color.Black，Color.White等。 |
当前支持的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,&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | -------------------------------------- |
| ColorStop | [Color,&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
## Resource类型
......@@ -74,42 +74,43 @@
filename：工程中resources/rawfile目录下的文件名称。
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| Resource | {<br/>readonly&nbsp;id:&nbsp;[number];<br/>readonly&nbsp;type:&nbsp;[number];<br/>readonly&nbsp;params?:&nbsp;any[];<br/>} | - id：资源id值。<br/>- type：资源类型（枚举值）。<br/>- params：可选参数。<br/>通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 |
| 名称 | 类型定义 | 描述 |
| -------- | ---------------------------------------- | ---------------------------------------- |
| Resource | {<br/>readonly&nbsp;id:&nbsp;[number];<br/>readonly&nbsp;type:&nbsp;[number];<br/>readonly&nbsp;params?:&nbsp;any[];<br/>} | - id：资源id值。<br/>- type：资源类型（枚举值）。<br/>- params：可选参数。<br/>通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 |
## ResourceStr类型<sup>8+</sup>
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| ResourceStr | string&nbsp;\|&nbsp;Resource| 用于描述资源字符串的类型。 |
| 名称 | 类型定义 | 描述 |
| ----------- | ---------------------------- | ------------- |
| ResourceStr | string&nbsp;\|&nbsp;Resource | 用于描述资源字符串的类型。 |
## ResourceColor类型<sup>8+</sup>
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| ResourceColor | Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Resource | 用于描述资源颜色类型。 |
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------------------------- | ----------- |
| ResourceColor | Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Resource | 用于描述资源颜色类型。 |
## Font类型<sup>8+</sup>
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| 名称 | 类型定义 | 描述 |
| ---- | ---------------------------------------- | ---------------------------------------- |
| Font | {<br/>size?: Length;<br/>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a> &nbsp;\| number &nbsp;\| string;<br/>family?: string &nbsp;\| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="https://gitee.com/superFat/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li6906111945316">FontStyle</a>;<br/>} | 设置文本样式：<br/>size: 设置文本尺寸，Length为number类型时，使用fp单位。<br/>weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。<br/>style: 设置文本的字体样式。 |
## CustomBuilder类型<sup>8+</sup>
组件属性方法参数可使用CustomBuilder类型来自定义UI描述。
| 名称 | 类型定义 | 描述 |
| -------- | -------- | -------- |
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------- | ---------------------------------------- |
| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct dataTypeExample {
......
zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md
浏览文件 @ 87721ce0
......@@ -13,7 +13,7 @@
- @Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。
- @Prop：原理类似@Link，但是子组件所做的更改不会同步到父组件上，属于单向传递。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 状态变量名称不能使用id，如@Prop id:number 。
......
zh-cn/application-dev/ui/ui-js-animate-attribute-style.md
浏览文件 @ 87721ce0
......@@ -5,7 +5,7 @@
在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="fade">
......@@ -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时，组件直接展示最后一帧的样式。
zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ 87721ce0
......@@ -5,7 +5,7 @@
通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content"></div>
......@@ -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)
......
zh-cn/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 87721ce0
......@@ -7,14 +7,14 @@
通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。
```
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" class="box" onclick="Show"></div>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div id="content" class="box" onclick="Show"></div>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div id="content" class="box" onclick="Show"></div>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
......@@ -238,7 +238,7 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
......@@ -362,7 +362,7 @@ export default {
</div>
```
```
```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: {
......
zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
浏览文件 @ 87721ce0
......@@ -3,7 +3,7 @@
通过设置插值器来实现动画效果。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 6 开始支持。
......@@ -11,7 +11,7 @@
通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。
```
```html
<!-- xxx.hml -->
<div class="container">
<div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});">
......@@ -22,7 +22,7 @@
</div>
```
```
```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
<!-- xxx.hml -->
<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
<div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
......@@ -113,7 +113,7 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini
</div>
```
```
```css
/* xxx.css */
button{
width: 200px;
......@@ -150,8 +150,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
import animator from '@ohos.animator';
import prompt from '@system.prompt';
export default {
......@@ -234,5 +234,5 @@ export default {
![zh-cn_image_0000001220635059](figures/zh-cn_image_0000001220635059.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。
zh-cn/application-dev/ui/ui-js-animate-frame.md
浏览文件 @ 87721ce0
......@@ -6,7 +6,7 @@
runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函数step，将step中的timestamp赋予起始的startTime。当timestamp与startTime的差值小于规定的时间时将再次调用requestAnimationFrame，最终动画将会停止。
```
```html
<!-- xxx.hml -->
<div class="container">
<tabs onchange="changecontent">
......@@ -25,7 +25,7 @@ runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<tabs onchange="changecontent">
......@@ -122,7 +122,7 @@ export default {
</div>
```
```
```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的参数。
zh-cn/application-dev/ui/ui-js-animate-svg.md
浏览文件 @ 87721ce0
......@@ -9,7 +9,7 @@
在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="800" height="900">
......@@ -68,7 +68,7 @@
在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
```
```html
<!-- xxx.hml -->
<div class="container" style="">
<svg>
......@@ -94,7 +94,7 @@
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 87721ce0
......@@ -7,7 +7,7 @@
创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="top"></div>
......@@ -22,7 +22,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -96,7 +96,7 @@
小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="circle"></div>
......@@ -104,7 +104,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -175,7 +175,7 @@
设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="rotate">
......@@ -194,7 +194,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -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
<!-- xxx.hml -->
<div class="container">
<div class="circle">
......@@ -326,7 +326,7 @@
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div class="rect"> </div>
</div>
```
```
```css
/* xxx.css */
.container{
background-color:#F1F3F5;
......@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY
transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="rect1"></div>
......@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
......@@ -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属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
......
zh-cn/application-dev/ui/ui-js-building-ui-animation.md
浏览文件 @ 87721ce0
......@@ -15,7 +15,7 @@
具体的使用示例如下，更多信息请参考[组件方法](../reference/arkui-js/js-components-common-methods.md)。
```
```html
<!-- xxx.hml -->
<div class="container">
<text class="translate">hello</text>
......@@ -24,7 +24,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -78,7 +78,7 @@
animation样式需要在css文件中先定义keyframe，在keyframe中设置动画的过渡效果，并通过一个样式类型在hml文件中调用。animation-name的使用示例如下：
```
```html
<!-- xxx.hml -->
<div class="item-container">
<text class="header">animation-name</text>
......@@ -92,7 +92,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动
</div>
```
```
```css
/* xxx.css */
.item-container {
margin-right: 60px;
......
zh-cn/application-dev/ui/ui-js-building-ui-event.md
浏览文件 @ 87721ce0
......@@ -21,7 +21,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
具体的使用示例如下：
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="text-container" onclick="click">
......@@ -45,7 +45,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -68,7 +68,7 @@ longpress：用户在相同位置长时间保持与屏幕接触。
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-interactions.md
浏览文件 @ 87721ce0
......@@ -17,7 +17,7 @@
click事件作为一个函数定义在js文件中，可以更改isPressed的状态，从而更新显示的image组件。如果isPressed为真，则点赞数加1。该函数在hml文件中对应的div组件上生效，点赞按钮各子组件的样式设置在css文件当中。具体的实现示例如下：
```
```html
<!-- xxx.hml -->
<!-- 点赞按钮 -->
<div>
......@@ -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: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md
浏览文件 @ 87721ce0
......@@ -6,7 +6,7 @@
留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件（通过if属性控制）。在包含文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示例如下：
```
```html
<!-- xxx.hml -->
<div class="container">
<text class="comment-title">Comment</text>
......@@ -22,7 +22,7 @@
```
```
```css
/* xxx.css */
.container {
margin-top: 24px;
......@@ -64,7 +64,7 @@
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md
浏览文件 @ 87721ce0
......@@ -7,7 +7,7 @@
当页面结构较为复杂时，如果使用div循环渲染，容易出现卡顿，因此推荐使用list组件代替div组件实现长列表布局，从而实现更加流畅的列表滚动体验。需要注意的是，list仅支持list-item作为子组件，具体的使用示例如下：
```
```html
<!-- xxx.hml -->
<list class="list">
<list-item type="listItem" for="{{textList}}">
......@@ -16,7 +16,7 @@
</list>
```
```
```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
<!-- xxx.hml -->
<tabs>
<tab-bar>
......@@ -56,7 +56,7 @@ export default {
</tabs>
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md
浏览文件 @ 87721ce0
......@@ -7,13 +7,13 @@
图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../ui/js-framework-file.md#目录结构)。代码示例如下：
```
```html
<!-- xxx.hml -->
<image class="img" src="{{middleImage}}"></image>
```
```
```css
/* xxx.css */
.img {
margin-top: 30px;
......@@ -23,7 +23,7 @@
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md
浏览文件 @ 87721ce0
......@@ -3,7 +3,7 @@
实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考[text](../reference/arkui-js/js-components-basic-text.md)。在页面中插入标题和文本区域的示例如下：
```
```html
<!-- xxx.hml -->
<div class="container">
<text class="title-text">{{headTitle}}</text>
......@@ -13,7 +13,7 @@
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -34,7 +34,7 @@
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-building-ui-routes.md
浏览文件 @ 87721ce0
......@@ -17,7 +17,7 @@
index和detail这两个页面均包含一个text组件和button组件：text组件用来指明当前页面，button组件用来实现两个页面之间的相互跳转。hml文件代码示例如下：
```
```html
<!-- index.hml -->
<div class="container">
<text class="title">This is the index page.</text>
......@@ -25,7 +25,7 @@ index和detail这两个页面均包含一个text组件和button组件：text组
</div>
```
```
```html
<!-- detail.hml -->
<div class="container">
<text class="title">This is the detail page.</text>
......@@ -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 {
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 87721ce0
# Tabs
# tabs开发指导
Tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考[Tabs API](../reference/arkui-js/js-components-container-tabs.md)。
tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考[tabs API](../reference/arkui-js/js-components-container-tabs.md)。
## 创建Tabs
## 创建tabs
在pages/index目录下的hml文件中创建一个Tabs组件。
在pages/index目录下的hml文件中创建一个tabs组件。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" >
<tabs> <tab-bar>
<text>item1</text>
......@@ -26,7 +26,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
</div>
```
```
```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属性使组件纵向展示。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true">
<tab-bar >
......@@ -73,8 +73,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;">
<tab-bar mode="fixed">
......@@ -98,9 +98,9 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
## 设置样式
设置Tabs背景色及边框和tab-content布局。
```
<!-- index.hml -->
设置tabs背景色及边框和tab-content布局。
```html
<!-- xxx.hml -->
<div class="container">
<tabs class="tabs">
<tab-bar class="tabBar">
......@@ -119,7 +119,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -152,10 +152,10 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
## 显示页签索引
开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。
开发者可以为tabs添加change事件，实现页签切换后显示当前页签索引的功能。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange">
<tab-bar class="tabBar">
......@@ -174,8 +174,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div>
```
```
/* 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子组件仅支持一个[\<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md)和一个[\<tab-content>](../reference/arkui-js/js-components-container-tab-content.md)。
......@@ -200,8 +200,8 @@ export default {
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<tabs onchange="changeTabactive">
<tab-content>
......@@ -228,7 +228,7 @@ export default {
</div>
```
```
```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
zh-cn/application-dev/ui/ui-js-components-button.md
浏览文件 @ 87721ce0
# Button
# button开发指导
Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[Button API](../reference/arkui-js/js-components-basic-button.md)。
button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[button API](../reference/arkui-js/js-components-basic-button.md)。
## 创建Button组件
## 创建button组件
在pages/index目录下的hml文件中创建一个Button组件。
在pages/index目录下的hml文件中创建一个button组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<button type="capsule" value="Capsule button"></button>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<button class="circle" type="circle" >+</button>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div class="input-item">
......@@ -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: {
......
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ 87721ce0
......@@ -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
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas>
......@@ -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中进行创建。
## 相关实例
......
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 87721ce0
......@@ -9,7 +9,7 @@
使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -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
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -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);
},
}
```
......
zh-cn/application-dev/ui/ui-js-components-chart.md
浏览文件 @ 87721ce0
# Chart开发指导
# chart开发指导
Chart为图表组件，用于呈现线形图、柱状图和量规图界面。具体用法请参考[Chart](../reference/arkui-js/js-components-basic-chart.md)。
chart为图表组件，用于呈现线形图、柱状图和量规图界面。具体用法请参考[chart](../reference/arkui-js/js-components-basic-chart.md)。
## 创建Chart组件
## 创建chart组件
在pages/index目录下的hml文件中创建一个Chart组件。
在pages/index目录下的hml文件中创建一个chart组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div class="container">
......@@ -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
<!-- xxx.hml -->
<div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<stack class="chart-region">
......@@ -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
<!-- xxx.hml -->
<div class="container">
<div class="container">
......@@ -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)
zh-cn/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ 87721ce0
# Dialog
# dialog开发指导
Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考[Dialog API](../reference/arkui-js/js-components-container-dialog.md)。
dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考[dialog API](../reference/arkui-js/js-components-container-dialog.md)。
## 创建Dialog组件
## 创建dialog组件
在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
```
在pages/index目录下的hml文件中创建一个dialog组件，并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
```html
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" dragable="true">
......@@ -14,11 +14,11 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
<text>this is a dialog</text>
</div>
</dialog>
<button value="click me" onclick="openDialog"></button>
<button value="click me" onclick="opendialog"></button>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
......@@ -78,12 +78,12 @@ export default {
<button value="confirm" onclick="confirmClick"></button>
</div>
</dialog>
<button value="click me" onclick="openDialog"></button>
<button value="click me" onclick="opendialog"></button>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="doc-page">
<text style="margin-top: 60px;margin-left: 30px;">
......@@ -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)
- [dialog（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
- [Dialog（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @ 87721ce0
# Form
# form开发指导
Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-components-basic-input.md)组件内容的提交和重置。具体用法请参考[Form API](../reference/arkui-js/js-components-container-form.md)。
form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-components-basic-input.md)组件内容的提交和重置。具体用法请参考[form API](../reference/arkui-js/js-components-container-form.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从 API Version 6 开始支持。
## 创建Form组件
## 创建form组件
在pages/index目录下的hml文件中创建一个Form组件。
```
在pages/index目录下的hml文件中创建一个form组件。
```html
<!-- xxx.hml -->
<div class="container">
<form style="width: 100%; height: 20%">
......@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -36,8 +36,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 实现表单缩放
为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
```
为form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
```html
<!-- xxx.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
......@@ -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
<!-- xxx.hml -->
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
......@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div>
```
```
```css
/* index.css */
.container{
width: 100%;
......@@ -118,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
<!-- xxx.hml -->
<div class="container">
<form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > Form </span>
<span > form </span>
</text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text>
......@@ -180,7 +180,7 @@ export default{
</div>
```
```
```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() {
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 87721ce0
......@@ -9,7 +9,7 @@
在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
......@@ -22,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
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
......@@ -61,7 +61,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -73,7 +73,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......@@ -113,7 +113,7 @@ export default {
创建grid-container组件并添加grid-row，在grid-row组件内添加grild-col组件形成布局。
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
......@@ -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
<!-- index.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -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 {
......
zh-cn/application-dev/ui/ui-js-components-image-animator.md
浏览文件 @ 87721ce0
# Image-animator开发指导
# image-animator开发指导
Image-animator组件为图片帧动画播放器。具体用法请参考[Image-animator](../reference/arkui-js/js-components-basic-image-animator.md)。
image-animator组件为图片帧动画播放器。具体用法请参考[image-animator](../reference/arkui-js/js-components-basic-image-animator.md)。
## 创建Image-animator组件
## 创建image-animator组件
在pages/index目录下的hml文件中创建一个Image-animator组件，css文件中编写组件样式，js文件中引用图片。
在pages/index目录下的hml文件中创建一个image-animator组件，css文件中编写组件样式，js文件中引用图片。
```
```html
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" images="{{frames}}" duration="3s"/>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}" duration="5s" />
......@@ -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
<!-- xxx.hml -->
<div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
......@@ -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
<!-- xxx.hml -->
<div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s">
......@@ -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)
zh-cn/application-dev/ui/ui-js-components-images.md
浏览文件 @ 87721ce0
# Image
# image开发指导
Image是图片组件，用来渲染展示图片。具体用法请参考[Image API](../reference/arkui-js/js-components-basic-image.md)。
image是图片组件，用来渲染展示图片。具体用法请参考[image API](../reference/arkui-js/js-components-basic-image.md)。
## 创建Image组件
## 创建image组件
在pages/index目录下的hml文件中创建一个Image组件。
```
在pages/index目录下的hml文件中创建一个image组件。
```html
<!-- index.hml -->
<div class="container">
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div>
```
```
```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
<!-- index.hml -->
<div class="container">
<image src="common/images/bg-tv.jpg"> </image>
......@@ -41,7 +41,7 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -69,7 +69,7 @@ image{
图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。
```
```html
<!-- index.hml -->
<div class="container" >
<div>
......@@ -81,7 +81,7 @@ image{
</div>
```
```
```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
<!-- index.hml -->
<div class="page-container">
<div class="content">
......@@ -141,7 +141,7 @@ export default {
</div>
```
```
```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,7 +206,7 @@ export default {
## 相关实例
针对Image开发，有以下相关实例可供参考：
针对image开发，有以下相关实例可供参考：
- [image、image-animator（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
......
zh-cn/application-dev/ui/ui-js-components-input.md
浏览文件 @ 87721ce0
# Input
# input开发指导
Input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[Input API](../reference/arkui-js/js-components-basic-input.md)。
input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[input API](../reference/arkui-js/js-components-basic-input.md)。
## 创建Input组件
## 创建input组件
在pages/index目录下的hml文件中创建一个Input组件。
在pages/index目录下的hml文件中创建一个input组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<input type="text"> Please enter the content </input>
<input type="text">
Please enter the content
</input>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div class="div-button">
......@@ -53,7 +55,7 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
</div>
```
```
```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
<!-- xxx.hml -->
<div class="content">
<text style="margin-left: -7px;">
......@@ -119,7 +121,7 @@ export default {
</div>
```
```
```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
<!-- xxx.hml -->
<div class="content">
<input id="input" class="input" type="text" maxlength="20" placeholder="Please input text" onchange="change">
......@@ -176,7 +178,7 @@ export default {
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div class="label-item">
......@@ -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)
zh-cn/application-dev/ui/ui-js-components-list.md
浏览文件 @ 87721ce0
# List
# list开发指导
List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考[List API](../reference/arkui-js/js-components-container-list.md)。
list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考[list API](../reference/arkui-js/js-components-container-list.md)。
## 创建List组件
## 创建list组件
在pages/index目录下的hml文件中创建一个List组件。
在pages/index目录下的hml文件中创建一个list组件。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<list>
<list-item class="listItem"></list-item>
......@@ -19,7 +19,7 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div>
```
```
```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) **说明：**
> **说明：**
> - &lt;list-item-group&gt;是&lt;list&gt;的子组件，实现列表分组功能，不能再嵌套&lt;list&gt;，可以嵌套&lt;list-item&gt;。
>
> - &lt;list-item&gt;是&lt;list&gt;的子组件，展示列表的具体项。
......@@ -47,8 +47,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<list class="listCss" scrollbar="on" >
<list-item class="listItem"></list-item>
......@@ -61,8 +61,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div>
```
```
/* index.css */
```css
/* xxx.css */
.container {
flex-direction: column;
background-color: #F1F3F5;
......@@ -86,8 +86,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item>
......@@ -95,8 +95,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div>
```
```
/* 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事件实现列表的折叠和展开。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="doc-page">
<list style="width: 100%;" id="mylist">
<list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
......@@ -140,8 +140,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
</div>
```
```
/* 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 {
在本场景中，开发者可以根据字母索引表查找对应联系人。
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="doc-page">
<text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
<span>Contacts</span>
......@@ -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
zh-cn/application-dev/ui/ui-js-components-marquee.md
浏览文件 @ 87721ce0
# Marquee开发指导
# marquee开发指导
Marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/arkui-js/js-components-basic-marquee.md)。
marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/arkui-js/js-components-basic-marquee.md)。
## 创建Marquee组件
## 创建marquee组件
在pages/index目录下的hml文件中创建一个Marquee组件。
在pages/index目录下的hml文件中创建一个marquee组件。
```
```html
<!-- xxx.hml -->
<div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</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
<!-- xxx.hml -->
<div class="container">
<marquee class="customMarquee">It's a racing lamp.</marquee>
<marquee class="custommarquee">It's a racing lamp.</marquee>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="tutorial-page">
<div class="mymarquee">
......@@ -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
<!-- xxx.hml -->
<div class="tutorial-page">
<div class="mymarquee">
......@@ -174,7 +174,7 @@ export default {
```
```
```css
/* xxx.css */
.tutorial-page {
width: 750px;
......@@ -204,7 +204,7 @@ button{
```
```
```js
// xxx.js
export default {
private: {
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 87721ce0
# Menu
# menu开发指导
提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[Menu](../reference/arkui-js/js-components-basic-menu.md)。
提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作，具体用法请参考[menu](../reference/arkui-js/js-components-basic-menu.md)。
## 创建Menu组件
## 创建menu组件
在pages/index目录下的hml文件中创建一个Menu组件，添加target、type、title属性。
在pages/index目录下的hml文件中创建一个menu组件，添加target、type、title属性。
```
```html
<!-- xxx.hml-->
<div class="container">
<text class="title-text" id="textId">show menu</text>
......@@ -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
<!-- xxx.hml-->
<div class="container">
<text class="title-text" id="textId">show menu</text>
......@@ -64,7 +64,7 @@
```
```
```css
/* xxx.css */
.container{
width: 100%;
......@@ -103,7 +103,7 @@ option{
为menu组件绑定onselected事件（菜单中某个值被点击选中时触发）和oncancel事件（取消操作时触发），点击text组件调用show方法可设置menu组件的坐标。
```
```html
<!-- xxx.hml-->
<div class="container">
<text class="title-text" id="textId" onclick="textClick">show menu</text>
......@@ -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
<!-- xxx.hml-->
<div class="container">
<div class="contentToggle">
......@@ -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)
zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 87721ce0
......@@ -4,7 +4,7 @@
以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -23,7 +23,7 @@
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -103,7 +103,7 @@ export default {
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -136,7 +136,7 @@ button{
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 87721ce0
......@@ -8,14 +8,14 @@
创建Path2D，使用多条线段组合图形。
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas"></canvas>
</div>
```
```
```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
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas"></canvas>
......@@ -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"
}
},
}
......
zh-cn/application-dev/ui/ui-js-components-svg-graphics.md
浏览文件 @ 87721ce0
......@@ -6,8 +6,8 @@ Svg组件可以用来绘制常见图形和线段，如矩形（&lt;rect&gt;）
在本场景中，绘制各种图形拼接组成一个小房子。
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="1000" height="1000">
......@@ -25,8 +25,8 @@ Svg组件可以用来绘制常见图形和线段，如矩形（&lt;rect&gt;）
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......
zh-cn/application-dev/ui/ui-js-components-svg-overview.md
浏览文件 @ 87721ce0
......@@ -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
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400"> </svg>
......@@ -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
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400" viewBox="0 0 100 100"> <svg class="rect" width="100" height="100" x="20" y="10"> </svg> </svg>
<svg width="400" height="400" viewBox="0 0 100 100">
<svg class="rect" width="100" height="100" x="20" y="10">
</svg>
</svg>
</div>
```
```
```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的宽高不一致，会以中心对齐进行缩放。
......
zh-cn/application-dev/ui/ui-ts-components.md
浏览文件 @ 87721ce0
......@@ -9,14 +9,14 @@
自定义组件的声明方式为：
```
```ts
@Component
struct MyComponent {}
```
在IDE创建工程模板中，MyComponent就是一个可以居中显示文字的自定义组件。开发者可以在Component的build方法里描述自己的UI结构，但需要遵循Builder的接口约束。
```
```ts
interface Builder {
build: () => void
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或