Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

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

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 cd29a802
隐藏空白更改
内联 并排
Showing with 52 addition and 70 deletion
en/application-dev/ui/ui-js-building-ui-component.md
浏览文件 @ d8be0421
...@@ -11,26 +11,11 @@ You can also customize a new component through proper combination of components ...@@ -11,26 +11,11 @@ You can also customize a new component through proper combination of components
Components can be classified into the following types based on their functions. Components can be classified into the following types based on their functions.
| Type | Components | | Type | Components |
| -------- | -------- | | --------- | ---------------------------------------- |
| Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content | | Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content |
| Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle | | Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle |
| Media | video | | Media | video |
| Canvas | canvas | | Canvas | canvas |
| Grid | grid-container, grid-row, grid-col | | Grid | grid-container, grid-row, grid-col |
| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform | | SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |
## Samples
The following samples are provided to help you better understand how to develop components:
- [`JsPanel`: Content Display Panel (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
- [`Popup`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
- [`RefreshContainer`: Refresh Container (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
- [`JSComponments`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
- [`JsUserRegistration`: User Registration (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
- [`ECG`: Heart Rate Detection (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
- [`Badge`: Badge (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [`JsVideo`: JsVideo (API 8)](https://gitee.com/openharmony/app_samples/tree/master/media/JsVideo)
- [Rating (JavaScript)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
- [Simple Video Player](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ d8be0421
...@@ -864,8 +864,8 @@ moveTo(x: number, y: number): void ...@@ -864,8 +864,8 @@ moveTo(x: number, y: number): void
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。<br>单位：vp |
| y | number | 指定位置的y坐标。 | | y | number | 指定位置的y坐标。<br>单位：vp |
**示例：** **示例：**
```html ```html
...@@ -901,8 +901,8 @@ lineTo(x: number, y: number): void ...@@ -901,8 +901,8 @@ lineTo(x: number, y: number): void
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。<br>单位：vp |
| y | number | 指定位置的y坐标。 | | y | number | 指定位置的y坐标。<br>单位：vp |
**示例：** **示例：**
```html ```html
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ d8be0421
...@@ -28,7 +28,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ...@@ -28,7 +28,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ---------------------------------------- | ---- | ------- | | ---------- | ---------------------------------------- | ---- | ------- |
| src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 | | src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 |
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始，WebController不在维护，建议使用WebviewController替代。 | | controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
**示例：** **示例：**
...@@ -223,7 +223,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr ...@@ -223,7 +223,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 | | object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 | | name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | | methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不在维护，建议使用WebviewController替代。 | | controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
**示例：** **示例：**
...@@ -4612,7 +4612,7 @@ clearHistory(): void ...@@ -4612,7 +4612,7 @@ clearHistory(): void
setCookie(url: string, value: string): boolean setCookie(url: string, value: string): boolean
设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 设置cookie，该方法为同步方法。设置成功返回true，否则返回false。
从API version 9开始不在维护，建议使用[setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie)代替。 从API version 9开始不再维护，建议使用[setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie)代替。
**参数：** **参数：**
...@@ -4652,7 +4652,7 @@ setCookie(url: string, value: string): boolean ...@@ -4652,7 +4652,7 @@ setCookie(url: string, value: string): boolean
saveCookie(): boolean saveCookie(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
从API version 9开始不在维护，建议使用[saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync)代替。 从API version 9开始不再维护，建议使用[saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync)代替。
**返回值：** **返回值：**
......
zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md
浏览文件 @ d8be0421
...@@ -43,7 +43,7 @@ onPageHide?(): void ...@@ -43,7 +43,7 @@ onPageHide?(): void
onBackPress?(): void onBackPress?(): void
当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。 当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。
```ts ```ts
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
浏览文件 @ d8be0421
...@@ -33,54 +33,51 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -33,54 +33,51 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
支持以下四种方式：\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)，需要指定至少两种颜色。 支持以下四种方式：\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)，需要指定至少两种颜色。
- 参数 **参数：**
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
| direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向，如：to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;，或者to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 | | direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向，如：to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;，或者to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 |
| angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 | | angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 |
| color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | | color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 |
**示例：**
- 示例 1. 默认渐变方向为从上向下渐变。
1. 默认渐变方向为从上向下渐变。 ```css
#gradient {
height: 300px;
width: 600px;
/* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00);
}
```
```css ![111](figures/111.PNG)
#gradient {
height: 300px;
width: 600px;
/* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00);
}
```
![111](figures/111.PNG) 2. 45度夹角渐变。
2. 45度夹角渐变。 ```css
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
![222](figures/222.PNG)
```css 3. 设置方向从左向右渐变。
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
![222](figures/222.PNG) ```css
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
3. 设置方向从左向右渐变。 ![333](figures/333.PNG)
```css 4. 重复渐变。
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
```css
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
```
![333](figures/333.PNG) ![444](figures/444.PNG)
4. 重复渐变。
```css
/* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
```
![444](figures/444.PNG)
zh-cn/application-dev/ui/arkts-common-components-xcomponent.md
浏览文件 @ d8be0421
...@@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void) ...@@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void)
### 解析XComponent组件的NativeXComponent实例 ### 解析XComponent组件的NativeXComponent实例
NativeXComponent为XComponent提供了在native层的实例，可作为js层和native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。具体NKD接口可参考[Native XComponent](../reference/native-apis/_o_h___native_x_component.md)。 NativeXComponent为XComponent提供了在native层的实例，可作为js层和native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。具体NDK接口可参考[Native XComponent](../reference/native-apis/_o_h___native_x_component.md)。
可以在模块被加载时的回调内（即[Napi模块注册](#napi模块注册)中的Init函数）解析获得NativeXComponent实例 可以在模块被加载时的回调内（即[Napi模块注册](#napi模块注册)中的Init函数）解析获得NativeXComponent实例
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或