diff --git a/en/application-dev/ui/ui-js-building-ui-component.md b/en/application-dev/ui/ui-js-building-ui-component.md index 752b8c4e4d527c9ffa0357fa9474aa1430bca6d9..23d7d74e0d74fb770de4e9c206472cd5087a8170 100644 --- a/en/application-dev/ui/ui-js-building-ui-component.md +++ b/en/application-dev/ui/ui-js-building-ui-component.md @@ -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 | diff --git a/zh-cn/application-dev/quick-start/arkts-prop.md b/zh-cn/application-dev/quick-start/arkts-prop.md index 2ca0097998cbc59f982c857b53117a3e8da3e133..f8663e44503b813f1241b4b9532adc55e298c362 100644 --- a/zh-cn/application-dev/quick-start/arkts-prop.md +++ b/zh-cn/application-dev/quick-start/arkts-prop.md @@ -275,7 +275,7 @@ struct ReaderComp { build() { Row() { Text(this.title) - Text(`... ${this.readIt ? 'I have read' : 'I have bot read it'}`) + Text(`... ${this.readIt ? 'I have read' : 'I have not read it'}`) .onClick(() => this.readIt = true) } } diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index 80e1fced38bfce12740fe9c04130e9748aeaf8dc..8d259707e54049ffaf57e4638fe306111de3cc96 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -864,8 +864,8 @@ moveTo(x: number, y: number): void | 参数 | 类型 | 描述 | | ---- | ------ | --------- | -| x | number | 指定位置的x坐标。 | -| y | number | 指定位置的y坐标。 | +| x | number | 指定位置的x坐标。
单位：vp | +| y | number | 指定位置的y坐标。
单位：vp | **示例：** ```html @@ -901,8 +901,8 @@ lineTo(x: number, y: number): void | 参数 | 类型 | 描述 | | ---- | ------ | --------- | -| x | number | 指定位置的x坐标。 | -| y | number | 指定位置的y坐标。 | +| x | number | 指定位置的x坐标。
单位：vp | +| y | number | 指定位置的y坐标。
单位：vp | **示例：** ```html diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index 89d6668d4d3fe664094b5e1020667537465c1540..da572d2ea4c6f7ed0c61cc39a6607690dc81ed9b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -28,7 +28,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) | 参数名 | 参数类型 | 必填 | 参数描述 | | ---------- | ---------------------------------------- | ---- | ------- | | src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 | -| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | 控制器。从API Version 9开始，WebController不在维护，建议使用WebviewController替代。 | +| controller | [WebviewController9+](../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\ | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | -| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不在维护，建议使用WebviewController替代。 | +| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 | **示例：** @@ -4702,7 +4702,7 @@ clearHistory(): void setCookie(url: string, value: string): boolean 设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 -从API version 9开始不在维护，建议使用[setCookie9+](../apis/js-apis-webview.md#setcookie)代替。 +从API version 9开始不再维护，建议使用[setCookie9+](../apis/js-apis-webview.md#setcookie)代替。 **参数：** @@ -4742,7 +4742,7 @@ setCookie(url: string, value: string): boolean saveCookie(): boolean 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 -从API version 9开始不在维护，建议使用[saveCookieAsync9+](../apis/js-apis-webview.md#savecookieasync)代替。 +从API version 9开始不再维护，建议使用[saveCookieAsync9+](../apis/js-apis-webview.md#savecookieasync)代替。 **返回值：** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md b/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md index 477a9ca18f97c53922be2e37237be1577280a582..b668d1eeeb84c2060e21e669b5ef53e8fe717bde 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md @@ -43,7 +43,7 @@ onPageHide?(): void onBackPress?(): void -当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。 +当用户点击返回按钮时触发，仅\@Entry装饰的自定义组件生效。 ```ts diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md index 5a8da0fdde73adcd3714953cb1b580397deab18e..db569aedda9cab10dfdbb4e9896535053b8f020d 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md @@ -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 <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (由上到下渐变) | 否 | 指定过渡方向，如：to left (从右向左渐变)  ，或者to bottom right (从左上角到右下角)。 | - | angle | <deg> | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 | - | color | <color> [<length>\|<percentage>] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | +| direction | to <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (由上到下渐变) | 否 | 指定过渡方向，如：to left (从右向左渐变)  ，或者to bottom right (从左上角到右下角)。 | +| angle | <deg> | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 | +| color | <color> [<length>\|<percentage>] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | +**示例：** -- 示例 +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) diff --git a/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md b/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md index b3fb7674e968e5153a9215a62e9357727bed702d..d503763d71618f8bbfbc742048eae2727d9e2fbd 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md +++ b/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md @@ -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实例