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
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 |
| 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 |
| Canvas | canvas |
| Grid | grid-container, grid-row, grid-col |
| 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)
| 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 |
| Canvas | canvas |
| Grid | grid-container, grid-row, grid-col |
| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ d8be0421
......@@ -864,8 +864,8 @@ moveTo(x: number, y: number): void
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
| x | number | 指定位置的x坐标。<br>单位：vp |
| y | number | 指定位置的y坐标。<br>单位：vp |
**示例：**
```html
......@@ -901,8 +901,8 @@ lineTo(x: number, y: number): void
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
| x | number | 指定位置的x坐标。<br>单位：vp |
| y | number | 指定位置的y坐标。<br>单位：vp |
**示例：**
```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})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ---------------------------------------- | ---- | ------- |
| 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
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| 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
setCookie(url: string, value: string): boolean
设置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
saveCookie(): boolean
将当前存在内存中的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
onBackPress?(): void
当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。
当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。
```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, ...);
支持以下四种方式：\#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;(从左上角到右下角)。 |
| angle | &lt;deg&gt; | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 |
| color | &lt;color&gt;&nbsp;[&lt;length&gt;\|&lt;percentage&gt;] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
| 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轴的夹角(顺时针方向)。 |
| 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
#gradient {
height: 300px;
width: 600px;
/* 从顶部开始向底部由红色向绿色渐变 */
background: linear-gradient(red, #00ff00);
}
```
![111](figures/111.PNG)
![111](figures/111.PNG)
2. 45度夹角渐变。
2. 45度夹角渐变。
```css
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
![222](figures/222.PNG)
```css
/* 45度夹角，从红色渐变到绿色 */
background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
```
3. 设置方向从左向右渐变。
![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
/* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
```
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);
```
![333](figures/333.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)
![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)
### 解析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实例
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或