diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index 837523f1a20f18fed4ab7fb79c4aa21929dda1e5..184a5d5467b37f4387fbacd33fe96c9a03763c80 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -19,13 +19,13 @@ - [音频管理](js-apis-audio.md) - [媒体服务](js-apis-media.md) - [图片处理](js-apis-image.md) + - [相机管理](js-apis-camera.md) - 安全 - [用户认证](js-apis-useriam-userauth.md) - [访问控制](js-apis-abilityAccessCtrl.md) - [通用密钥库系统](js-apis-huks.md) - 数据管理 - [轻量级存储](js-apis-data-preferences.md) - - [轻量级存储(废弃 since 8)](js-apis-data-storage.md) - [分布式数据管理](js-apis-distributed-data.md) - [关系型数据库](js-apis-data-rdb.md) - [结果集](js-apis-data-resultset.md) @@ -49,7 +49,9 @@ - [网络搜索](js-apis-radio.md) - [observer](js-apis-observer.md) - [蜂窝数据](js-apis-telephony-data.md) -- 网络与连接 +- 网络管理 + - [网络连接管理](js-apis-net-connection.md) +- 通信与连接 - [WLAN](js-apis-wifi.md) - [Bluetooth](js-apis-bluetooth.md) - 设备管理 diff --git a/zh-cn/application-dev/reference/apis/js-apis-camera.md b/zh-cn/application-dev/reference/apis/js-apis-camera.md index cb34f90715f3f769607381a01ca39862ba0409ed..5393f3f49ca9a1116f9f0f586bdf9f709bcc54c7 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-camera.md +++ b/zh-cn/application-dev/reference/apis/js-apis-camera.md @@ -1,4 +1,4 @@ -# 相机管理 +# 相机管理 ## 导入模块 @@ -8,30 +8,22 @@ import camera from '@ohos.multimedia.camera'; ## 权限 -``` ohos.permission.CAMERA -``` -## getCameraManager(context: Context, callback: AsyncCallback): void; -**系统能力:** +## camera.getCameraManager -SystemCapability.Multimedia.Camera.Core +getCameraManager(context: Context, callback: AsyncCallback): void -**说明:** +获取相机管理器实例,通过注册回调函数获取结果。 -获取**相机管理器**,使用callback方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|-------------------------------|-----------|-----------------------------------------------------| -| context | Context | Yes | 应用环境 | -| callback | AsyncCallback | Yes | 使用callback方式获取**相机管理器**实例
| - - -**返回值:** - -none +| context | Context | 是 | 应用上下文。 | +| callback | AsyncCallback<[CameraManager](#cameramanager)\> | 是 | 回调函数,用于获取相机管理器实例。 | **示例:** @@ -45,27 +37,25 @@ camera.getCameraManager(context, (err, cameraManager) => { }); ``` -## getCameraManager(context: Context): Promise; +## camera.getCameraManager -**系统能力:** +getCameraManager(context: Context): Promise -SystemCapability.Multimedia.Camera.Core +获取相机管理器实例,通过Promise获取结果。 -**说明:** - -获取**相机管理器**,使用promise的方式获取一个实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------| -| context | Context | Yes | 应用环境 | +| context | Context | 是 | 应用上下文。 | **返回值:** | 类型 | 说明 | |-------------------------|--------------------------------------------------------| -| Promise | 使用Promise的方式获取一个**相机管理器** 实例 | +| Promise<[CameraManager](#cameramanager)\> | 使用Promise的方式获取一个相机管理器实例。 | **示例:** @@ -75,87 +65,81 @@ camera.getCameraManager(context).then((cameraManger) => { }) ``` -## CameraStatus +## CameraStatus -枚举相机状态类型。 +枚举,相机状态。 | 名称 | 默认值 | 说明 | |---------------------------|---------------|--------------------| -| CAMERA_STATUS_APPEAR | 0 | Camera appear
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_STATUS_DISAPPEAR | 1 | Camera disappear
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_STATUS_AVAILABLE | 2 | 相机就绪
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_STATUS_UNAVAILABLE | 3 | 相机未就绪
系统能力 : SystemCapability.Multimedia.Camera.Core | +| CAMERA_STATUS_APPEAR | 0 | 相机存在。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_STATUS_DISAPPEAR | 1 | 相机不存在。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_STATUS_AVAILABLE | 2 | 相机就绪。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_STATUS_UNAVAILABLE | 3 | 相机未就绪。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## CameraPosition +## CameraPosition -枚举相机位置。 +枚举,相机方向。 | 名称 | 默认值 | 说明 | |-----------------------------|---------------|-----------------------| -| CAMERA_POSITION_UNSPECIFIED | 0 | 未指定方向相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_POSITION_BACK | 1 | 后置相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_POSITION_FRONT | 2 | 前置相机
系统能力 : SystemCapability.Multimedia.Camera.Core | +| CAMERA_POSITION_UNSPECIFIED | 0 | 未指定方向相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_POSITION_BACK | 1 | 后置相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_POSITION_FRONT | 2 | 前置相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## CameraType +## CameraType -枚举相机类型。 +枚举,相机类型。 | 名称 | 默认值 | 说明 | |-------------------------|---------------|-------------------------| -| CAMERA_TYPE_UNSPECIFIED | 0 | 未指定相机类型
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_TYPE_WIDE_ANGLE | 1 | 广角相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_TYPE_ULTRA_WIDE | 2 | 超级广角相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_TYPE_TELEPHOTO | 3 | 电话相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_TYPE_TRUE_DEPTH | 4 | 深度相机
系统能力 : SystemCapability.Multimedia.Camera.Core | +| CAMERA_TYPE_UNSPECIFIED | 0 | 未指定相机类型。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_TYPE_WIDE_ANGLE | 1 | 广角相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_TYPE_ULTRA_WIDE | 2 | 超级广角相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_TYPE_TELEPHOTO | 3 | 长焦相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_TYPE_TRUE_DEPTH | 4 | 深度相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## ConnectionType +## ConnectionType -枚举相机连接类型。 +枚举,相机连接类型。 | 名称 | 默认值 | 说明 | |------------------------------|---------------|----------------------------| -| CAMERA_CONNECTION_BUILT_IN | 0 | 内置相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_CONNECTION_USB_PLUGIN | 1 | USB外连相机
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_CONNECTION_REMOTE | 2 | 分布式相机
系统能力 : SystemCapability.Multimedia.Camera.Core | +| CAMERA_CONNECTION_BUILT_IN | 0 | 内置相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_CONNECTION_USB_PLUGIN | 1 | 外置USB相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_CONNECTION_REMOTE | 2 | 分布式相机。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## CameraFormat +## CameraFormat -枚举相机格式。 +枚举,照片格式。 | 名称 | 默认值 | 说明 | |----------------------------|---------------|---------------------| -| CAMERA_FORMAT_YCRCb_420_SP | 1003 | YCRCb格式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_FORMAT_JPEG | 2000 | JPEG格式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_FORMAT_AVC | 3000 | AVC 格式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| CAMERA_FORMAT_HEVC | 3001 | HEVC 格式
系统能力 : SystemCapability.Multimedia.Camera.Core | - +| CAMERA_FORMAT_YCRCb_420_SP | 1003 | YCRCb格式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_FORMAT_JPEG | 2000 | JPEG格式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_FORMAT_AVC | 3000 | AVC格式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| CAMERA_FORMAT_HEVC | 3001 | HEVC格式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## CameraManager -相机管理器类, 包含获取相机并创建“相机输入”实例。 +## CameraManager -### getCameras(callback: AsyncCallback\>): void; +相机管理器类,使用前需要通过getCameraManager获取相机管理实例。 -**系统能力:** +### getCameras -SystemCapability.Multimedia.Camera.Core +getCameras(callback: AsyncCallback\>): void -**说明:** +异步获取设备支持的相机列表,通过注册回调函数获取结果。 -获取设备支持的所有相机,使用callback方式获取异步的支持相机列表。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|--------------------------------|-----------|---------------------------------------------------------| -| callback | AsyncCallback\> | Yes | 使用callback方式获取支持的相机列表 | - -**返回值:** - -none +| callback | AsyncCallback\> | 是 | 使用callback方式获取支持的相机列表。 | **示例:** @@ -169,25 +153,19 @@ cameraManager.getCameras((err, cameras) => { }) ``` -### getCameras(): Promise\>; - -**系统能力:** +### getCameras -SystemCapability.Multimedia.Camera.Core +getCameras(): Promise\> -**说明:** +异步获取设备支持的相机列表,通过Promise获取结果。 -获取设备支持的所有相机,使用promise方式获取支持相机列表。 - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |------------------------|--------------------------------------------------------| -| Promise\> | 使用promise方获取支持相机列表 | +| Promise\> | 使用promise获取支持相机列表。 | **示例:** @@ -198,26 +176,20 @@ cameraManager.getCameras().then((cameraArray) => { }) ``` -### createCameraInput(cameraId: string, callback: AsyncCallback): void; +### createCameraInput -**系统能力:** +createCameraInput(cameraId: string, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +使用相机ID异步创建CameraInput实例,通过注册回调函数获取结果。 -**说明:** - -使用相机ID创建 **相机输入** 实例,使用callback方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 默认值 | 必填 | 说明 | |----------|------------------------------|-----------|--------------------------------------------------| -| cameraId | string | Yes | 使用 相机ID 来创建一个实例 | -| callback | AsyncCallback | Yes | 使用Callback方式来获取一个 CameraInput 实例 | - -**返回值:** - -none +| cameraId | string | 是 | 指定相机ID。 | +| callback | AsyncCallback<[CameraInput](#camerainput)\> | 是 | 回调函数,用于获取CameraInput实例。 | **示例:** @@ -231,27 +203,25 @@ cameraManager.createCameraInput(cameraId, (err, cameraInput) => { }) ``` -### createCameraInput(cameraId: string): Promise; - -**系统能力:** +### createCameraInput -SystemCapability.Multimedia.Camera.Core +createCameraInput(cameraId: string): Promise -**说明:** +使用相机ID异步创建CameraInput实例,通过Promise获取结果。 -使用相机ID创建 **相机输入** 实例,使用promise方式获取一个实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 默认值 | 必填 | 说明 | |----------|-----------------------------|-----------|------------------------------------------| -| cameraId | string | Yes | 使用 相机ID 来创建一个实例 | +| cameraId | string | 是 | 指定相机ID。 | **返回值:** | 类型 | 说明 | |-------------------------|-------------------------------------------------| -| Promise | 使用Promise的方式获取一个 CameraInput 的实例 | +| Promise<[CameraInput](#camerainput)\> | 使用Promise的方式获取CameraInput的实例。 | **示例:** @@ -261,29 +231,23 @@ cameraManager.createCameraInput(cameraId).then((cameraInput) => { }) ``` -### createCameraInput(position: CameraPosition, type: CameraType, callback: AsyncCallback): void; - -**系统能力:** +### createCameraInput -SystemCapability.Multimedia.Camera.Core +createCameraInput(position: CameraPosition, type: CameraType, callback: AsyncCallback): void -**说明:** +使用相机位置和相机类型异步创建CameraInput实例,通过注册回调函数获取结果。 -使用相机位置和相机类型创建 **相机输入** 实例, 使用callback方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------------|----------------------------|-----------|---------------------------------------------------| -| cameraPosition | CameraPosition | Yes | 相机位置 | -| cameraType | CameraType | Yes | 相机类型 | -| callback | AsyncCallback | Yes | 使用callback方式获取一个异步的实例 | - -**返回值:** +| cameraPosition | [CameraPosition](#cameraposition) | 是 | 相机位置。 | +| cameraType | [CameraType](#cameratype) | 是 | 相机类型。 | +| callback | AsyncCallback<[CameraInput](#camerainput)\> | 是 | 回调函数,用于获取CameraInput实例。 | -none - -**实例:** +**示例:** ``` cameraManager.createCameraInput(cameraPosition, cameraType, (err, cameraInput) => { @@ -295,28 +259,26 @@ cameraManager.createCameraInput(cameraPosition, cameraType, (err, cameraInput) = }) ``` -### createCameraInput(position: CameraPosition, type: CameraType): Promise; - -**系统能力:** +### createCameraInput -SystemCapability.Multimedia.Camera.Core +createCameraInput(position: CameraPosition, type: CameraType): Promise -**说明:** +使用相机位置和相机类型异步创建CameraInput实例,通过Promise获取结果。 -使用相机位置和相机类型创建 **相机输入** 实例, 使用promise的方式获取一个实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------------|----------------------------|-----------|----------------------------------------| -| cameraPosition | CameraPosition | Yes | 相机位置 | -| cameraType | CameraType | Yes | 相机类型 | +| cameraPosition | [CameraPosition](#cameraposition) | 是 | 相机位置。 | +| cameraType | [CameraType](#cameratype) | 是 | 相机类型。 | **返回值:** | 类型 | 说明 | |-------------------------|-------------------------------------------------| -| Promise | 使用promise的方式获取一个**相机输入**实例 | +| Promise<[CameraInput](#camerainput)\> | 使用Promise的方式获取CameraInput的实例。 | **示例:** @@ -326,26 +288,20 @@ cameraManager.createCameraInput(cameraPosition, cameraType).then((cameraInput) = }) ``` -### on(type: 'cameraStatus', callback: Callback): void; +### on('cameraStatus') -**系统能力:** +on(type: 'cameraStatus', callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +监听相机的状态变化,通过注册回调函数获取相机的状态变化。 -**说明:** - -监听相机的状态变化,使用callback的方式获取相机的状态变化 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :--------------------------------------------------- | -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取相机状态变化 | - -**返回值:** - -None +| type | string | 是 | 监听事件。 | +| callback | AsyncCallback<[CameraStatusInfo](#camerastatusinfo)\> | 是 | 回调函数,用于获取相机状态变化信息。 | **示例:** @@ -356,18 +312,18 @@ cameraManager.on('cameraStatus', (cameraStatusInfo) => { }) ``` -## Camera - -**相机**类。 +## Camera -**字段:** +相机实例。 -| 名称 | 类型 | 访问权限 | 说明 | +| 名称 | 类型 | 只读 | 说明 | |----------------|----------------|----------|------------------------| -| cameraId | string | readonly | 相机ID
系统能力 : SystemCapability.Multimedia.Camera.Core | -| cameraPosition | cameraPosition | readonly | 相机位置
系统能力 : SystemCapability.Multimedia.Camera.Core | -| cameraType | cameraType | readonly | 相机类型
系统能力 : SystemCapability.Multimedia.Camera.Core | -| connectionType | connectionType | readonly | 相机连接类型
系统能力 : SystemCapability.Multimedia.Camera.Core | +| cameraId | string | 是 | 相机ID。
**系统能力:** SystemCapability.Multimedia.Camera.Core| +| cameraPosition | [CameraPosition](#cameraposition) | 是 | 相机位置。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| cameraType | [CameraType](#cameratype) | 是 | 相机类型。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| connectionType | [ConnectionType](#connectiontype) | 是 | 相机连接类型。
**系统能力:** SystemCapability.Multimedia.Camera.Core | + +**示例:** ``` var cameraManager = await camera.getCameraManager(); @@ -380,41 +336,35 @@ var cameraId = cameraObj.connectionType; ``` -## CameraStatusInfo - -**相机状态信息**类。 +## CameraStatusInfo -**字段:** +相机状态信息。 | 名称 | 类型 | 说明 | |----------------|----------------|------------------| -| camera | Camera | 相机类
系统能力 : SystemCapability.Multimedia.Camera.Core | -| status | CameraStatus | 相机状态
系统能力 : SystemCapability.Multimedia.Camera.Core | - +| camera | [Camera](#camera) | 相机信息。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| status | [CameraStatus](#camerastatus) | 相机状态。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## CameraInput -**相机输入** 类。 +## CameraInput -### getCameraId(callback: AsyncCallback\): void; +相机输入类。在使用该类的方法前,需要先构建一个CameraInput实例。 -**系统能力:** +### getCameraId -SystemCapability.Multimedia.Camera.Core +getCameraId(callback: AsyncCallback\): void -**说明:** +异步获取该CameraInput实例的相机ID,通过注册回调函数获取结果。 -获取该**相机输入** 实例的相机ID, 使用callback的方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|------------------------|-----------|---------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取 相机ID | +| callback | AsyncCallback | 是 | 回调函数,用于获取相机ID。 | -**返回值:** - -none +**示例:** ``` cameraInput.getCameraId((err, cameraId) => { @@ -426,25 +376,19 @@ cameraInput.getCameraId((err, cameraId) => { }) ``` -### getCameraId(): Promise; +### getCameraId -**系统能力:** +getCameraId(): Promise -SystemCapability.Multimedia.Camera.Core +异步获取该CameraInput实例的相机ID,通过Promise获取结果。 -**说明:** - -获取该**相机输入** 实例的相机ID, 使用promise的方式获取相机ID。 - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |------------------------|--------------------------------------| -| Promise | 使用promise的方式获取相机ID | +| Promise | 使用Promise的方式获取相机ID。 | **示例:** @@ -454,27 +398,20 @@ cameraInput.getCameraId().then((cameraId) => { }) ``` -### getSupportedSizes\(format: CameraFormat, callback: AsyncCallback\>\): void; - -**系统能力:** +### getSupportedSizes -SystemCapability.Multimedia.Camera.Core +getSupportedSizes\(format: CameraFormat, callback: AsyncCallback\>\): void -**说明:** +根据指定格式,获取相机支持的分辨率,通过注册回调函数获取结果。 -根据格式查询相机支持的分辨率,使用callback的方式获取一个异步的支持分辨率。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|------------------------------|-----------|---------------------------------------------| -| format | CameraFormat | Yes | 使用CameraFormat来获取支持分辨率 | -| callback | AsyncCallback\> | Yes | 使用callback的方式来获取支持分辨率 | - - -**返回值:** - -none +| format | [CameraFormat](#cameraformat) | 是 | 指定照片格式。 | +| callback | AsyncCallback\> | 是 | 回调函数,用于获取相机支持分辨率。 | **示例:** @@ -488,27 +425,25 @@ cameraInput.getSupportedSizes(format, (err, sizes) => { }) ``` -### getSupportedSizes\(format: CameraFormat\): Promise\>; - -**系统能力:** +### getSupportedSizes -SystemCapability.Multimedia.Camera.Core +getSupportedSizes\(format: CameraFormat\): Promise\> -**说明:** +根据指定格式,获取相机支持的分辨率,通过Promise获取结果。 -获取CameraFormat的支持分辨率,使用promise的方式获取支持分辨率。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** -| 名称 | 类型 | 必填 | 说明 | -|----------|----------------------------|-----------|-----------------------------------------------| -| format | CameraFormat | Yes | 使用Camera format 获取支持分辨率 | +| 名称 | 类型 | 必填 | 说明 | +| ------ | ----------------------------- | ---- | -------------- | +| format | [CameraFormat](#cameraformat) | 是 | 指定照片格式。 | **返回值:** | 类型 | 说明 | |------------------------|---------------------------------------------| -| Promise\> | 使用promise的方式获取支持分辨率. | +| Promise\> | 使用Promise的方式获取相机支持的分辨率。 | **示例:** @@ -518,26 +453,19 @@ cameraInput.getSupportedSizes(format).then((sizes) => { }) ``` -### getSupportedPreviewFormats\(callback: AsyncCallback\>\): void; - -**系统能力:** +### getSupportedPreviewFormats -SystemCapability.Multimedia.Camera.Core +getSupportedPreviewFormats\(callback: AsyncCallback\>\): void -**说明:** +获取相机预览图片的支持格式,通过注册回调函数获取结果。 -获取预览的支持格式,使用callback的方式获取一个异步的支持格式. +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** -| 名称 | 类型 | 必填 | 说明 | -|----------|--------------------------------------|-----------|---------------------------------------------------| -| callback | AsyncCallback\> | Yes | 使用callback的方式获取支持的预览格式. | - - -**返回值:** - -none +| 名称 | 类型 | 必填 | 说明 | +| -------- | ----------------------------------------------------- | ---- | -------------------------------------- | +| callback | AsyncCallback\> | 是 | 回调函数,用于获取预览图片的支持格式。 | **示例:** @@ -551,26 +479,19 @@ cameraInput.getSupportedPreviewFormats((err, previewFormats) => { }) ``` +### getSupportedPreviewFormats -### getSupportedPreviewFormats\(\): Promise\>; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +getSupportedPreviewFormats\(\): Promise\> -**说明:** - -获取预览的 supported formats,使用promise的方式获取supported formats. - -**参数:** +获取相机预览图片的支持格式,通过注册回调函数获取结果。 -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |--------------------------------|-------------------------------------------------------| -| Promise\> | 使用promise的方式获取supported preview formats | +| Promise\> | 使用Promise的方式获取预览图片的支持格式。 | **示例:** @@ -580,25 +501,19 @@ cameraInput.getSupportedPreviewFormats().then((previewFormats) => { }) ``` -### getSupportedPhotoFormats\(callback: AsyncCallback\>\): void; +### getSupportedPhotoFormats -**系统能力:** +getSupportedPhotoFormats\(callback: AsyncCallback\>\): void -SystemCapability.Multimedia.Camera.Core +获取照片的支持格式,通过注册回调函数获取结果。 -**说明:** - -获取 photographing的supported formats,使用callback的方式获取一个异步的supported formats. +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|--------------------------------------|-----------|-------------------------------------------------| -| callback | AsyncCallback\> | Yes | 使用callback的方式获取支持的照片格式 | - -**返回值:** - -none +| callback | AsyncCallback\> | 是 | 回调函数,用于获取支持的照片格式。 | **示例:** @@ -612,25 +527,19 @@ cameraInput.getSupportedPhotoFormats((err, photoFormats) => { }) ``` -### getSupportedPhotoFormats\(\): Promise\>; - -**系统能力:** +### getSupportedPhotoFormats -SystemCapability.Multimedia.Camera.Core +getSupportedPhotoFormats\(\): Promise\> -**说明:** +获取照片的支持格式,通过Promise获取结果。 -获取 photographing的supported formats,使用promise的方式获取supported formats. - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |--------------------------------|---------------------------------------------------| -| Promise\> | 使用promise的方式获取支持的照片格式 | +| Promise\> | 使用Promise的方式获取支持的照片格式。 | **示例:** @@ -640,25 +549,19 @@ cameraInput.getSupportedPhotoFormats().then((photoFormats) => { }) ``` -### getSupportedVideoFormats\(callback: AsyncCallback\>\): void; - -**系统能力:** +### getSupportedVideoFormats -SystemCapability.Multimedia.Camera.Core +getSupportedVideoFormats\(callback: AsyncCallback\>\): void -**说明:** +获取录制视频的支持格式,通过注册回调函数获取结果。 -获取录制视频的supported formats,使用callback的方式获取一个异步的支持的录像格式。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|--------------------------------------|-----------|-------------------------------------------------| -| callback | AsyncCallback\> | Yes | 使用callback的方式获取支持的录像格式 | - -**返回值:** - -none +| callback | AsyncCallback\> | 是 | 回调函数,用于获取支持的视频格式。 | **示例:** @@ -672,25 +575,19 @@ cameraInput.getSupportedVideoFormats((err, videoFormats) => { }) ``` -### getSupportedVideoFormats\(\): Promise\>; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### getSupportedVideoFormats -**说明:** +getSupportedVideoFormats\(\): Promise\> -获取录制视频的supported formats,使用promise的方式获取支持的录像格式。 +获取录制视频的支持格式,通过Promise获取结果。 -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |--------------------------------|---------------------------------------------------| -| Promise\> | 使用promise的方式获取支持的录像格式 | +| Promise\> | 使用Promise的方式获取支持的视频格式。 | **示例:** @@ -700,25 +597,19 @@ cameraInput.getSupportedVideoFormats().then((videoFormats) => { }) ``` -### hasFlash(callback: AsyncCallback): void; - -**系统能力:** +### hasFlash -SystemCapability.Multimedia.Camera.Core +hasFlash(callback: AsyncCallback): void -**说明:** +判断设备是否支持闪光灯,通过注册回调函数获取结果。 -检查设备是否支持闪光灯,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|-------------------------|-----------|----------------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取支持闪光灯的状态 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,返回true表示设备支持闪光灯。 | **示例:** @@ -732,25 +623,19 @@ cameraInput.hasFlash((err, status) => { }) ``` -### hasFlash(): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### hasFlash -**说明:** +hasFlash(): Promise -检查设备是否支持闪光灯,使用promise的方式获取结果。 +判断设备是否支持闪光灯,通过Promise获取结果。 -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |-----------------------|--------------------------------------------------------| -| Promise | 使用promise的方式获取支持闪光灯的状态。 | +| Promise | 使用Promise的方式获取结果,返回true表示设备支持闪光灯。 | **示例:** @@ -760,26 +645,20 @@ cameraInput.hasFlash().then((status) => { }) ``` -### isFlashModeSupported(flashMode: FlashMode, callback: AsyncCallback): void; - -**系统能力:** +### isFlashModeSupported -SystemCapability.Multimedia.Camera.Core +isFlashModeSupported(flashMode: FlashMode, callback: AsyncCallback): void -**说明:** +判断设备是否支持指定闪光灯模式,通过注册回调函数获取结果。 -检查设备是否支持闪光灯模式,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|----------------------------------------------------| -| flashMode | FlashMode | Yes | 闪光灯模式 | -| callback | AsyncCallback | Yes | 使用callback的方式获取设备支持闪光灯模式 | - -**返回值:** - -none +| flashMode | [FlashMode](#flashmode) | 是 | 指定闪光灯模式。 | +| callback | AsyncCallback | 是 | 回调函数,返回true表示支持该闪光灯模式。 | **示例:** @@ -793,27 +672,25 @@ cameraInput.isFlashModeSupported(flashMode, (err, status) => { }) ``` -### isFlashModeSupported(flashMode: FlashMode): Promise; +### isFlashModeSupported -**系统能力:** +isFlashModeSupported(flashMode: FlashMode): Promise -SystemCapability.Multimedia.Camera.Core +判断设备是否支持指定闪光灯模式,通过Promise获取结果。 -**说明:** - -检查设备是否支持闪光灯模式,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|----------------------------------------------------| -| flashMode | FlashMode | Yes | 闪光灯模式 | +| flashMode | [FlashMode](#flashmode) | 是 | 指定闪光灯模式。 | **返回值:** | 类型 | 说明 | |-----------------------|---------------------------------------------------| -| Promise | 使用promise的方式获取支持的闪光灯模式 | +| Promise | 使用Promise的方式获取结果,返回true表示设备支持该闪光灯模式。 | **示例:** @@ -823,28 +700,25 @@ cameraInput.isFlashModeSupported(flashMode).then((status) => { }) ``` -### setFlashMode(flashMode: FlashMode, callback: AsyncCallback): void; +### setFlashMode -**系统能力:** +setFlashMode(flashMode: FlashMode, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +设置闪光灯模式,通过注册回调函数获取结果。 -**说明:** +进行设置之前,需要先检查: -设置闪光灯模式,使用callback的方式获取一个异步的结果。 +1. 设备是否支持闪光灯,可使用方法[hasFlash](#hasflash)。 +2. 设备是否支持指定的闪光灯模式,可使用方法[isFlashModeSupported](#isflashmodesupported)。 -说明: 设置闪光灯模式之前, 检查支持的闪光灯 (hasFlash method) 以及支持的闪光灯模式 (isFlashModeSupported method); +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|----------------------------------------------------| -| flashMode | FlashMode | Yes | 闪光灯模式 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| flashMode | [FlashMode](#flashmode) | 是 | 指定闪光灯模式。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -858,29 +732,30 @@ cameraInput.setFlashMode(flashMode, (err) => { }) ``` -### setFlashMode(flashMode: FlashMode): Promise; +### setFlashMode -**系统能力:** +setFlashMode(flashMode: FlashMode): Promise -SystemCapability.Multimedia.Camera.Core +设置闪光灯模式,通过Promise获取结果。 -**说明:** +进行设置之前,需要先检查: -设置闪光灯模式,使用promise的方式获取结果。 +1. 设备是否支持闪光灯,可使用方法[hasFlash](#hasflash)。 +2. 设备是否支持指定的闪光灯模式,可使用方法[isFlashModeSupported](#isflashmodesupported)。 -说明: 设置闪光灯模式之前, 检查支持的闪光灯 (hasFlash method) 以及支持的闪光灯模式 (isFlashModeSupported method); +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|----------------------------------------------------| -| flashMode | FlashMode | Yes | 闪光灯模式 | +| flashMode | [FlashMode](#flashmode) | 是 | 指定闪光灯模式。 | **返回值:** | 类型 | 说明 | |-----------------------|-----------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -890,25 +765,19 @@ cameraInput.setFlashMode(flashMode).then() => { }) ``` -### getFlashMode(callback: AsyncCallback): void; - -**系统能力:** +### getFlashMode -SystemCapability.Multimedia.Camera.Core +getFlashMode(callback: AsyncCallback): void -**说明:** +获取当前设备的闪光灯模式,通过注册回调函数获取结果。 -获取当前闪光灯模式,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|---------------------------|-----------|------------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取当前闪光灯模式 | - -**返回值:** - -none +| callback | AsyncCallback<[FlashMode](#flashmode)\> | 是 | 回调函数,用于获取当前设备的闪光灯模式。 | **示例:** @@ -922,25 +791,19 @@ cameraInput.getFlashMode((err, flashMode) => { }) ``` -### getFlashMode(): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core - -**说明:** +### getFlashMode -获取当前闪光灯模式,使用promise的方式获取结果。 +getFlashMode(): Promise -**参数:** +获取当前设备的闪光灯模式,通过Promise获取结果。 -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |-----------------------|---------------------------------------------------| -| Promise | 使用promise的方式获取当前闪光灯模式 | +| Promise<[FlashMode](#flashmode)\> | 使用Promise的方式获取当前的闪光灯模式。 | **示例:** @@ -950,26 +813,20 @@ cameraInput.getFlashMode().then(flashMode) => { }) ``` -### isFocusModeSupported(afMode: FocusMode, callback: AsyncCallback): void; - -**系统能力:** +### isFocusModeSupported -SystemCapability.Multimedia.Camera.Core +isFocusModeSupported(afMode: FocusMode, callback: AsyncCallback): void -**说明:** +判断设备是否支持指定的焦距模式,通过注册回调函数获取结果。 -检查支持的焦距模式,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|----------------------------------------------------| -| afMode | FocusMode | Yes | 焦距模式 | -| callback | AsyncCallback | Yes | 使用callback的方式获取设备支持的焦距模式 | - -**返回值:** - -none +| afMode | [FocusMode](#focusmode) | 是 | 指定的焦距模式。 | +| callback | AsyncCallback | 是 | 回调函数,返回true表示支持该焦距模式。 | **示例:** @@ -983,27 +840,25 @@ cameraInput.isFocusModeSupported(afMode, (err, status) => { }) ``` -### isFocusModeSupported(afMode: FocusMode): Promise; - -**系统能力:** +### isFocusModeSupported -SystemCapability.Multimedia.Camera.Core +isFocusModeSupported(afMode: FocusMode): Promise -**说明:** +判断设备是否支持指定的焦距模式,通过Promise获取结果。 -检查支持的焦距模式,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|----------------------------------------|-----------|-------------| -| afMode | FocusMode | Yes | 焦距模式 | +| afMode | [FocusMode](#focusmode) | 是 | 指定的焦距模式。 | **返回值:** | 类型 | 说明 | |-----------------------|---------------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果,返回true表示设备支持该焦距模式。 | **示例:** @@ -1013,28 +868,22 @@ cameraInput.isFocusModeSupported(afMode).then((status) => { }) ``` -### setFocusMode(afMode: FocusMode, callback: AsyncCallback): void; +### setFocusMode -**系统能力:** +setFocusMode(afMode: FocusMode, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +设置焦距模式,通过注册回调函数获取结果。 -**说明:** +进行设置之前,需要先检查设备是否支持指定的焦距模式,可使用方法[isFocusModeSupported](#isfocusmodesupported)。 -设置焦距模式,使用callback的方式获取一个异步的结果。 - -说明:使用设置焦距模式之前,检查设备支持的焦距模式 (isFocusModeSupported method); +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|------------------------------------| -| afMode | FocusMode | Yes | 焦距模式 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| afMode | [FocusMode](#focusmode) | 是 | 指定的焦距模式。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1048,29 +897,27 @@ cameraInput.setFocusMode(afMode, (err) => { }) ``` -### setFocusMode(afMode: FocusMode): Promise; - -**系统能力:** +### setFocusMode -SystemCapability.Multimedia.Camera.Core +setFocusMode(afMode: FocusMode): Promise -**说明:** +设置焦距模式,通过Promise获取结果。 -设置焦距模式,使用promise的方式获取结果。 +进行设置之前,需要先检查设备是否支持指定的焦距模式,可使用方法[isFocusModeSupported](#isfocusmodesupported)。 -说明:使用设置焦距模式之前,检查设备支持的焦距模式 (isFocusModeSupported method); +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|-----------------------------------------|-----------|-------------| -| afMode | FocusMode | Yes | 焦距模式 | +| afMode | [FocusMode](#focusmode) | 是 | 指定的焦距模式。 | **返回值:** | 类型 | 说明 | |-----------------------|-----------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1080,25 +927,19 @@ cameraInput.setFocusMode(afMode).then() => { }) ``` -### getFocusMode(callback: AsyncCallback): void; - -**系统能力:** +### getFocusMode -SystemCapability.Multimedia.Camera.Core +getFocusMode(callback: AsyncCallback): void -**说明:** +获取当前设备的焦距模式,通过注册回调函数获取结果。 -获取当前的焦距模式,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|---------------------------|-----------|------------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback<[FocusMode](#focusmode)\> | 是 | 回调函数,用于获取当前设备的焦距模式。 | **示例:** @@ -1112,25 +953,19 @@ cameraInput.getFocusMode((err, afMode) => { }) ``` -### getFocusMode(): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### getFocusMode -**说明:** +getFocusMode(): Promise -获取当前的焦距模式,使用promise的方式获取结果。 +获取当前设备的焦距模式,通过Promise获取结果。 -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** -| 类型 | 说明 | -|-----------------------|---------------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| 类型 | 说明 | +| ------------------- | ------------------------------------- | +| Promise | 使用Promise的方式获取当前的焦距模式。 | **示例:** @@ -1140,26 +975,19 @@ cameraInput.getFocusMode().then(afMode) => { }) ``` -### getZoomRatioRange\(callback: AsyncCallback\>\): void; +### getZoomRatioRange -**系统能力:** +getZoomRatioRange\(callback: AsyncCallback\>\): void -SystemCapability.Multimedia.Camera.Core +获取可变焦距比范围,通过注册回调函数获取结果。 -**说明:** - -获取变焦比率的范围,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|--------------------------------|-----------|-------------------------------------------------| -| callback | AsyncCallback\> | Yes | 使用callback的方式获取变焦比率的范围 | - - -**返回值:** - -none +| callback | AsyncCallback\> | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1173,25 +1001,19 @@ cameraInput.getZoomRatioRange(err, zoomRatioRange) => { }) ``` -### getZoomRatioRange\(\): Promise\>; - -**系统能力:** +### getZoomRatioRange -SystemCapability.Multimedia.Camera.Core +getZoomRatioRange\(\): Promise\> -**说明:** - -获取变焦比率的范围,使用promise的方式获取结果。 - -**参数:** +获取可变焦距比范围,通过Promise获取结果。 -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |------------------------|---------------------------------------------| -| Promise\> | 使用promise的方式获取变焦比率的范围 | +| Promise\> | 使用Promise的方式获取当前的可变焦距比范围。 | **示例:** @@ -1201,26 +1023,20 @@ cameraInput.getZoomRatioRange().then((zoomRatioRange) => { }) ``` -### setZoomRatio(zoomRatio: number, callback: AsyncCallback): void; +### setZoomRatio -**系统能力:** +setZoomRatio(zoomRatio: number, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +设置可变焦距比,通过注册回调函数获取结果。 -**说明:** - -设置变焦比率,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|------------------------|-----------|------------------------------------| -| zoomRatio | number | Yes | 变焦比率 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| zoomRatio | number | 是 | 可变焦距比。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1234,27 +1050,25 @@ cameraInput.setZoomRatio(zoomRatio, (err) => { }) ``` -### setZoomRatio(zoomRatio: number): Promise; - -**系统能力:** +### setZoomRatio -SystemCapability.Multimedia.Camera.Core +setZoomRatio(zoomRatio: number): Promise -**说明:** +设置可变焦距比,通过Promise获取结果。 -设置变焦比率,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|----------|-----------|-------------| -| zoomRatio | number | Yes | 变焦比率 | +| zoomRatio | number | 是 | 可变焦距比。 | **返回值:** | 类型 | 说明 | |-----------------------|-----------------------------------------| -| Promise | Promise used to return the result | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1264,25 +1078,19 @@ cameraInput.setZoomRatio(zoomRatio).then() => { }) ``` -### getZoomRatio(callback: AsyncCallback): void; - -**系统能力:** +### getZoomRatio -SystemCapability.Multimedia.Camera.Core +getZoomRatio(callback: AsyncCallback): void -**说明:** +获取当前的可变焦距比,通过注册回调函数获取结果。 -获取当前的变焦比率,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-----------|---------------------------|-----------|------------------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1296,25 +1104,19 @@ cameraInput.getZoomRatio((err, zoomRatio) => { }) ``` -### getZoomRatio(): Promise; +### getZoomRatio -**系统能力:** +getZoomRatio(): Promise -SystemCapability.Multimedia.Camera.Core +获取当前的可变焦距比,通过Promise获取结果。 -**说明:** - -Gets current zoom ratio value. This method uses a promise to return the result. - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** -| 类型 | 说明 | -|-----------------------|---------------------------------------------------| -| Promise | Promise used to return the zoom ratio vaule | +| 类型 | 说明 | +| ---------------- | --------------------------- | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1324,25 +1126,19 @@ cameraInput.getZoomRatio().then(zoomRatio) => { }) ``` -### release\(callback: AsyncCallback\): void; +### release -**系统能力:** +release\(callback: AsyncCallback\): void -SystemCapability.Multimedia.Camera.Core +释放相机实例,通过注册回调函数获取结果。 -**说明:** - -释放这个 **相机输入** 实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|------------------------------------| -| callback | AsyncCallback | Yes | 使用异步的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1356,25 +1152,19 @@ camera.release((err) => { }); ``` -### release(): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### release -**说明:** +release(): Promise -释放这个 **相机输入** 实例,使用promise的方式获取结果。 +释放相机实例,通过Promise获取结果。 -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1384,26 +1174,20 @@ cameraInput.release().then(() => { }) ``` -### on(type: 'focusStateChange', callback: Callback): void; - -**系统能力:** +### on('focusStateChange') -SystemCapability.Multimedia.Camera.Core +on(type: 'focusStateChange', callback: AsyncCallback): void -**说明:** +监听焦距的状态变化,通过注册回调函数获取结果。 -监听焦距的状态变化,使用callback的方式获取焦距的状态变化。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'focusStateChange',即焦距状态变化事件。 | +| callback | AsyncCallback<[FocusState](#focusstate)\> | 是 | 回调函数,用于获取焦距状态。 | **示例:** @@ -1413,26 +1197,20 @@ cameraInput.on('focusStateChange', (focusState) => { }) ``` -### on(type: 'error', callback: Callback): void; +### on('error') -**系统能力:** +on('error', callback: ErrorCallback): void -SystemCapability.Multimedia.Camera.Core +监听CameraInput的错误事件,通过注册回调函数获取结果。 -**说明:** - -监听**相机输入**的报错,使用callback的方式获取错误信息。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取**相机输入**的错误信息 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'error'。 | +| callback | ErrorCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1443,49 +1221,52 @@ cameraInput.on('error', (cameraInputError) => { ``` -## FlashMode +## FlashMode -枚举闪光灯模式。 +枚举,闪光灯模式。 | 名称 | 默认值 | 说明 | |------------------------|---------------|------------------------| -| FLASH_MODE_CLOSE | 0 | 闪光灯关闭模式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| FLASH_MODE_OPEN | 1 | 闪光灯开启模式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| FLASH_MODE_AUTO | 2 | 闪光灯自动模式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| FLASH_MODE_ALWAYS_OPEN | 3 | 闪光灯常亮模式
系统能力 : SystemCapability.Multimedia.Camera.Core | +| FLASH_MODE_CLOSE | 0 | 闪光灯关闭。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| FLASH_MODE_OPEN | 1 | 闪光灯开启。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| FLASH_MODE_AUTO | 2 | 自动闪光灯。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| FLASH_MODE_ALWAYS_OPEN | 3 | 闪光灯常亮。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## FocusMode +## FocusMode -枚举焦距模式。 +枚举,焦距模式。 | 名称 | 默认值 | 说明 | |----------------------------|---------------|----------------------------| -| FOCUS_MODE_MANUAL | 0 | 手动变焦模式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| FOCUS_MODE_CONTINUOUS_AUTO | 1 | 连续自动变焦模式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| FOCUS_MODE_AUTO | 2 | 自动变焦模式
系统能力 : SystemCapability.Multimedia.Camera.Core | -| FOCUS_MODE_LOCKED | 3 | 焦距锁定模式
系统能力 : SystemCapability.Multimedia.Camera.Core | +| FOCUS_MODE_MANUAL | 0 | 手动变焦模式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| FOCUS_MODE_CONTINUOUS_AUTO | 1 | 连续自动变焦模式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| FOCUS_MODE_AUTO | 2 | 自动变焦模式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| FOCUS_MODE_LOCKED | 3 | 定焦模式。
**系统能力:** SystemCapability.Multimedia.Camera.Core | + +## FocusState +枚举,焦距状态。 -## createCaptureSession\(context: Context, callback: AsyncCallback\): void; +| 名称 | 默认值 | 说明 | +| --------------------- | ------ | ------------------------------------------------------------ | +| FOCUS_STATE_SCAN | 0 | 扫描状态。
系统能力 : SystemCapability.Multimedia.Camera.Core | +| FOCUS_STATE_FOCUSED | 1 | 相机已对焦。
系统能力 : SystemCapability.Multimedia.Camera.Core | +| FOCUS_STATE_UNFOCUSED | 2 | 相机未对焦。
系统能力 : SystemCapability.Multimedia.Camera.Core | -**系统能力:** +## camera.createCaptureSession -SystemCapability.Multimedia.Camera.Core +createCaptureSession\(context: Context, callback: AsyncCallback\): void -**说明:** +获取CaptureSession实例,通过注册回调函数获取结果。 -创建 **拍照会话** 实例,使用callback的方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|--------------------------------|-----------|-----------------------------------------------------| -| context | Context | Yes | 应用环境 | -| callback | AsyncCallback | Yes | 使用callback的方式获取 **拍照会话** 实例 | - -**返回值:** - -none +| context | Context | 是 | 应用上下文。 | +| callback | AsyncCallback<[CaptureSession](#capturesession)\> | 是 | 回调函数,用于获取CaptureSession实例。 | **示例:** @@ -1499,27 +1280,25 @@ camera.createCaptureSession(context), (err, captureSession) => { }); ``` -## createCaptureSession(context: Context\): Promise; +## camera.createCaptureSession -**系统能力:** +createCaptureSession(context: Context\): Promise; -SystemCapability.Multimedia.Camera.Core +获取CaptureSession实例,通过Promise获取结果。 -**说明:** - -创建 **拍照会话** 实例,使用promise方式获取一个实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|-------------------------------|-----------|-----------------------------------------------------| -| context | Context | Yes | 应用环境 | +| context | Context | 是 | 应用上下文。 | **返回值:** | 类型 | 说明 | |---------------------------|---------------------------------------------------| -| Promise | 使用promise的方式获取**拍照会话**的实例 | +| Promise<[CaptureSession](#capturesession)\> | 使用Promise的方式获取CaptureSession实例。 | **示例:** @@ -1529,30 +1308,23 @@ camera.createCaptureSession(context).then((captureSession) => { }) ``` -## CaptureSession - -**拍照会话**类。 +## CaptureSession -### beginConfig\(callback: AsyncCallback\): void; +拍照会话类。 -**系统能力:** +### beginConfig -SystemCapability.Multimedia.Camera.Core +beginConfig\(callback: AsyncCallback\): void -**说明:** +开始配置会话,通过注册回调函数获取结果。 -设置此**拍照会话**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1566,25 +1338,19 @@ captureSession.beginConfig((err) => { }); ``` -### beginConfig\(\): Promise; +### beginConfig -**系统能力:** +beginConfig\(\): Promise -SystemCapability.Multimedia.Camera.Core +开始配置会话,通过Promise获取结果。 -**说明:** - -设置此**拍照会话**实例,使用promise的方式获取结果。 - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |---------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1595,25 +1361,19 @@ captureSession.beginConfig().then(() => { }) ``` -### commitConfig\(callback: AsyncCallback\): void; - -**系统能力:** +### commitConfig -SystemCapability.Multimedia.Camera.Core +commitConfig\(callback: AsyncCallback\): void -**说明:** +提交会话配置,通过注册回调函数获取结果。 -提交此**拍照会话**实例的设置,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|---------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取一个异步的结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1627,26 +1387,19 @@ captureSession.commitConfig((err) => { }); ``` +### commitConfig -### commitConfig\(\): Promise; +commitConfig\(\): Promise -**系统能力:** +提交会话配置,通过Promise获取结果。 -SystemCapability.Multimedia.Camera.Core - -**说明:** - -提交此**拍照会话**实例的设置,使用promise的方式获取结果。 - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |---------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1656,27 +1409,20 @@ captureSession.commitConfig().then(() => { }) ``` -### addInput\(cameraInput: CameraInput, callback: AsyncCallback\): void; - -**系统能力:** +### addInput -SystemCapability.Multimedia.Camera.Core +addInput\(cameraInput: CameraInput, callback: AsyncCallback\): void -**说明:** +在当前会话中,添加一个CameraInput实例,通过注册回调函数获取结果。 -为此**拍照会话**实例添加一个**相机输入**,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-------------|----------------------|-----------|---------------------------------------------| -| cameraInput | CameraInput | Yes | 需要添加的**相机输入**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - - -**返回值:** - -none +| cameraInput | [CameraInput](#camerainput) | 是 | 需要添加的CameraInput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1690,27 +1436,25 @@ captureSession.addInput(cameraInput, (err) => { }); ``` -### addInput\(cameraInput: CameraInput\): Promise; - -**系统能力:** +### addInput -SystemCapability.Multimedia.Camera.Core +addInput\(cameraInput: CameraInput\): Promise -**说明:** +在当前会话中,添加一个CameraInput实例,通过Promise获取结果。 -为此**拍照会话**实例添加一个**相机输入**,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-------------|---------------------|-----------|-------------------------------| -| cameraInput | CameraInput | Yes | 需要添加的**相机输入**实例 | +| cameraInput | [CameraInput](#camerainput) | 是 | 需要添加的CameraInput实例。 | **返回值:** | 类型 | 说明 | |----------------|------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1720,27 +1464,20 @@ captureSession.addInput(cameraInput).then(() => { }) ``` -### addOutput\(previewOutput: PreviewOutput, callback: AsyncCallback\): void; +### addOutput -**系统能力:** +addOutput\(previewOutput: PreviewOutput, callback: AsyncCallback\): void -SystemCapability.Multimedia.Camera.Core +在当前会话中,添加一个PreviewOutput实例,通过注册回调函数获取结果。 -**说明:** - -为此**拍照会话**实例添加一个**预览输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|----------------------|-----------|-------------------------------------| -| previewOutput | PreviewOutput | Yes | 需要添加的**预览输出**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - - -**返回值:** - -none +| previewOutput | [PreviewOutput](#previewoutput) | 是 | 需要添加的PreviewOutput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1754,27 +1491,25 @@ captureSession.addOutput(previewOutput, (err) => { }); ``` -### addOutput\(previewOutput: PreviewOutput\): Promise; - -**系统能力:** +### addOutput -SystemCapability.Multimedia.Camera.Core +addOutput\(previewOutput: PreviewOutput\): Promise -**说明:** +在当前会话中,添加一个PreviewOutput实例,通过Promise获取结果。 -为此**拍照会话**实例添加一个**预览输出**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|--------------------------------| -| previewOutput | PreviewOutput | Yes | 需要添加的**预览输出**实例 | +| previewOutput | [PreviewOutput](#previewoutput) | 是 | 需要添加的PreviewOutput实例。 | **返回值:** | 类型 | 说明 | |----------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -1784,26 +1519,20 @@ captureSession.addOutput(previewOutput).then(() => { }) ``` -### addOutput\(photoOutput: PhotoOutput, callback: AsyncCallback\): void; +### addOutput -**系统能力:** +addOutput\(photoOutput: PhotoOutput, callback: AsyncCallback\): void -SystemCapability.Multimedia.Camera.Core +在当前会话中,添加一个PhotoOutput实例,通过注册回调函数获取结果。 -**说明:** - -为此**拍照会话**实例添加一个**照片输出**实例, 使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|-------------------------------------| -| photoOutput | PhotoOutput | Yes | 需要添加的**照片输出**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| photoOutput | [PhotoOutput](#photooutput) | 是 | 需要添加的PhotoOutput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1817,27 +1546,25 @@ captureSession.addOutput(photoOutput, (err) => { }); ``` -### addOutput\(photoOutput: PhotoOutput\): Promise; - -**系统能力:** +### addOutput -SystemCapability.Multimedia.Camera.Core +addOutput\(photoOutput: PhotoOutput\): Promise -**说明:** +在当前会话中,添加一个PreviewOutput实例,通过Promise获取结果。 -为此**拍照会话**实例添加一个**照片输出**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|--------------------------------| -| photoOutput | PhotoOutput | Yes | 需要添加的**照片输出**实例 | +| photoOutput | [PhotoOutput](#photooutput) | 是 | 需要添加的PhotoOutput实例。 | **返回值:** | 类型 | 说明 | |---------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise\ | 使用Promise的方式获取结果。 | **示例:** @@ -1847,26 +1574,20 @@ captureSession.addOutput(photoOutput).then(() => { }) ``` -### addOutput\(videoOutput: VideoOutput, callback: AsyncCallback\): void; - -**系统能力:** +### addOutput -SystemCapability.Multimedia.Camera.Core +addOutput\(videoOutput: VideoOutput, callback: AsyncCallback\): void -**说明:** +在当前会话中,添加一个VideoOutput实例,通过注册回调函数获取结果。 -为此**拍照会话**实例添加一个**视频输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|-------------------------------------| -| videoOutput | VideoOutput | Yes | 需要添加的**视频输出**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| videoOutput | [VideoOutput](#videooutput) | 是 | 需要添加的VideoOutput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1880,27 +1601,25 @@ captureSession.addOutput(videoOutput, (err) => { }); ``` -### addOutput\(videoOutput: VideoOutput\): Promise; +### addOutput -**系统能力:** +addOutput\(videoOutput: VideoOutput\): Promise -SystemCapability.Multimedia.Camera.Core +在当前会话中,添加一个VideoOutput实例,通过Promise获取结果。 -**说明:** - -为此**拍照会话**实例添加一个**视频输出**实例, 使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** -| 名称 | 类型 | 必填 | 说明 | -|---------------|---------------------|-----------|--------------------------------| -| videoOutput | VideoOutput | Yes | 需要添加的**视频输出**实例 | +| 名称 | 类型 | 必填 | 说明 | +| ----------- | --------------------------- | ---- | --------------------------- | +| videoOutput | [VideoOutput](#videooutput) | 是 | 需要添加的VideoOutput实例。 | **返回值:** -| 类型 | 说明 | -|----------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| 类型 | 说明 | +| -------------- | --------------------------- | +| Promise\ | 使用Promise的方式获取结果。 | **示例:** @@ -1910,27 +1629,20 @@ captureSession.addOutput(videoOutput).then(() => { }) ``` -### removeInput\(cameraInput: CameraInput, callback: AsyncCallback\): void; - -**系统能力:** +### removeInput -SystemCapability.Multimedia.Camera.Core +removeInput\(cameraInput: CameraInput, callback: AsyncCallback\): void -**说明:** +在当前会话中,移除一个CameraInput实例,通过注册回调函数获取结果。 -为此**拍照会话**实例移除一个**相机输入**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-------------|----------------------|-----------|------------------------------------| -| cameraInput | CameraInput | Yes | 需要移除的**相机输入**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - - -**返回值:** - -none +| cameraInput | [CameraInput](#camerainput) | 是 | 需要移除的CameraInput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -1944,27 +1656,25 @@ captureSession.removeInput(cameraInput, (err) => { }); ``` -### removeInput\(cameraInput: CameraInput\): Promise; - -**系统能力:** +### removeInput -SystemCapability.Multimedia.Camera.Core +removeInput\(cameraInput: CameraInput\): Promise -**说明:** +在当前会话中,移除一个CameraInput实例,通过Promise获取结果。 -为此**拍照会话**实例移除一个**相机输入**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |-------------|---------------------|-----------|---------------------------------| -| cameraInput | CameraInput | Yes | 需要移除的**相机输入**实例 | +| cameraInput | [CameraInput](#camerainput) | 是 | 需要移除的CameraInput实例。 | **返回值:** | 类型 | 说明 | |----------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise\ | 使用Promise的方式获取结果。 | **示例:** @@ -1974,26 +1684,20 @@ captureSession.removeInput(cameraInput).then(() => { }) ``` -### removeOutput\(previewOutput: PreviewOutput, callback: AsyncCallback\): void; - -**系统能力:** +### removeOutput -SystemCapability.Multimedia.Camera.Core +removeOutput\(previewOutput: PreviewOutput, callback: AsyncCallback\): void -**说明:** +在当前会话中,移除一个PreviewOutput实例,通过注册回调函数获取结果。 -为此**拍照会话**实例移除一个**预览输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|----------------------|-----------|------------------------------------| -| previewOutput | PreviewOutput | Yes | 需要移除的**预览输出**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| previewOutput | [PreviewOutput](#previewoutput) | 是 | 需要移除的PreviewOutput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2007,28 +1711,26 @@ captureSession.removeOutput(previewOutput, (err) => { }); ``` -### removeOutput(previewOutput: PreviewOutput): Promise; +### removeOutput -**系统能力:** +removeOutput(previewOutput: PreviewOutput): Promise -SystemCapability.Multimedia.Camera.Core +在当前会话中,移除一个PreviewOutput实例,通过Promise获取结果。 -**说明:** - -为此**拍照会话**实例移除一个**预览输出**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|-----------------------------------| -| previewOutput | PreviewOutput | Yes | 需要移除的**预览输出**实例 | +| previewOutput | [PreviewOutput](#previewoutput) | 是 | 需要移除的PreviewOutput实例。 | **返回值:** | 类型 | 说明 | |---------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2039,26 +1741,20 @@ captureSession.removeOutput(previewOutput).then(() => { }) ``` -### removeOutput(photoOutput: PhotoOutput, callback: AsyncCallback): void; - -**系统能力:** +### removeOutput -SystemCapability.Multimedia.Camera.Core +removeOutput(photoOutput: PhotoOutput, callback: AsyncCallback): void -**说明:** +在当前会话中,移除一个PhotoOutput实例,通过注册回调函数获取结果。 -为此**拍照会话**实例移除一个**照片输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|----------------------|-----------|------------------------------------| -| photoOutput | PhotoOutput | Yes | 需要移除的**照片输出**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| photoOutput | [PhotoOutput](#photooutput) | 是 | 需要添加的PhotoOutput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2072,28 +1768,26 @@ captureSession.removeOutput(photoOutput, (err) => { }); ``` -### removeOutput(photoOutput: PhotoOutput): Promise; - -**系统能力:** +### removeOutput -SystemCapability.Multimedia.Camera.Core +removeOutput(photoOutput: PhotoOutput): Promise -**说明:** +在当前会话中,移除一个PhotoOutput实例,通过Promise获取结果。 -为此**拍照会话**实例移除一个**照片输出**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|---------------------------------| -| photoOutput | PhotoOutput | Yes | 需要移除的**照片输出**实例 | +| photoOutput | [PhotoOutput](#photooutput) | 是 | 需要添加的PhotoOutput实例。 | **返回值:** | 类型 | 说明 | |---------------|------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2104,26 +1798,20 @@ captureSession.removeOutput(photoOutput).then(() => { }) ``` -### removeOutput(videoOutput: VideoOutput, callback: AsyncCallback): void; +### removeOutput -**系统能力:** +removeOutput(videoOutput: VideoOutput, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +在当前会话中,移除一个VideoOutput实例,通过注册回调函数获取结果。 -**说明:** - -为此**拍照会话**实例移除一个**视频输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|----------------------|-----------|------------------------------------| -| videoOutput | VideoOutput | Yes | 需要移除的**视频输出**实例 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| videoOutput | [VideoOutput](#videooutput) | 是 | 需要添加的VideoOutput实例。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2137,28 +1825,26 @@ captureSession.removeOutput(videoOutput, (err) => { }); ``` -### removeOutput(videoOutput: VideoOutput): Promise; - -**系统能力:** +### removeOutput -SystemCapability.Multimedia.Camera.Core +removeOutput(videoOutput: VideoOutput): Promise -**说明:** +在当前会话中,移除一个VideoOutput实例,通过Promise获取结果。 -为此**拍照会话**实例移除一个**视频输出**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |---------------|---------------------|-----------|---------------------------------| -| videoOutput | VideoOutput | Yes | 需要移除的**照片输出**实例 | +| videoOutput | [VideoOutput](#videooutput) | 是 | 需要添加的VideoOutput实例。 | **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2169,25 +1855,19 @@ captureSession.removeOutput(videoOutput).then(() => { }) ``` -### start\(callback: AsyncCallback\): void; - -**系统能力:** +### start -SystemCapability.Multimedia.Camera.Core +start\(callback: AsyncCallback\): void -**说明:** +启动拍照会话,通过注册回调函数获取结果。 -开启**拍照会话** 实例, 使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2201,25 +1881,19 @@ captureSession.start((err) => { }); ``` -### start\(\): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### start -**说明:** +start\(\): Promise -开启**拍照会话** 实例,使用promise的方式获取结果。 +启动拍照会话,通过Promise获取结果。 -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2229,26 +1903,20 @@ captureSession.start().then(() => { }) ``` -### stop\(callback: AsyncCallback\): void; - -**系统能力:** +### stop -SystemCapability.Multimedia.Camera.Core +stop\(callback: AsyncCallback\): void -**说明:** +停止拍照会话,通过注册回调函数获取结果。 -关闭**拍照会话** 实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2262,26 +1930,19 @@ captureSession.stop((err) => { }); ``` +### stop -### stop(): Promise; +stop(): Promise -**系统能力:** +停止拍照会话,通过Promise获取结果。 -SystemCapability.Multimedia.Camera.Core - -**说明:** - -关闭**拍照会话** 实例,使用promise的方式获取结果。 - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2291,25 +1952,19 @@ captureSession.stop().then(() => { }) ``` -### release\(callback: AsyncCallback\): void; - -**系统能力:** +### release -SystemCapability.Multimedia.Camera.Core +release\(callback: AsyncCallback\): void -**说明:** +释放CaptureSession实例,通过注册回调函数获取结果。 -释放**拍照会话**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** -示例里 + | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2323,25 +1978,19 @@ captureSession.release((err) => { }); ``` -### release(): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### release -**说明:** +release(): Promise -释放**拍照会话**实例,使用promise的方式获取结果。 - -**参数:** +释放CaptureSession实例,通过Promise获取结果。 -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2351,26 +2000,20 @@ captureSession.release().then(() => { }) ``` -### on(type: 'error', callback: Callback): void; +### on('error') -**系统能力:** +on(type: 'error', callback: ErrorCallback): void -SystemCapability.Multimedia.Camera.Core +监听拍照会话的错误事件,通过注册回调函数获取结果。 -**说明:** - -监听**拍照会话** 的报错,使用callback的方式获取错误信息。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取**拍照会话**的错误信息 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'error'。 | +| callback | ErrorCallback | 是 | 回调函数,用于获取错误信息。 | **示例:** @@ -2380,26 +2023,20 @@ captureSession.on('error', (captureSessionError) => { }) ``` -## createPreviewOutput(surfaceId: string, callback: AsyncCallback): void; - -**系统能力:** +## camera.createPreviewOutput -SystemCapability.Multimedia.Camera.Core +createPreviewOutput(surfaceId: string, callback: AsyncCallback): void -**说明:** +获取PreviewOutput实例,通过注册回调函数获取结果。 -创建**预览输出**实例,使用callback的方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |------------|-------------------------------|-----------|----------------------------------------------------| -| surfaceId | string | Yes | 从XComponent组件获取的Surface ID | -| callback | AsyncCallback | Yes | 使用callback的方式获取的实例 | - -**返回值:** - -none +| surfaceId | string | 是 | 从XComponent组件获取的Surface ID。 | +| callback | AsyncCallback<[PreviewOutput](#previewoutput)\> | 是 | 回调函数,用于获取PreviewOutput实例。 | **示例:** @@ -2411,29 +2048,27 @@ camera.createPreviewOutput(surfaceId), (err, previewOutput) => { } console.log('Callback returned with previewOutput instance'); }); -``` - -## createPreviewOutput(surfaceId: string): Promise; +``` -**系统能力:** +## camera.createPreviewOutput -SystemCapability.Multimedia.Camera.Core +createPreviewOutput(surfaceId: string): Promise\ -**说明:** +获取PreviewOutput实例,通过Promise获取结果。 -创建**预览输出**实例, 使用promise方式获取一个实例。. +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |------------|-----------------|-----------|----------------------------------------------------| -| surfaceId | string | Yes | 从XComponent组件获取的Surface ID | +| surfaceId | string | 是 | 从XComponent组件获取的Surface ID。 | **返回值:** | 类型 | 说明 | |-------------------------|---------------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise<[PreviewOutput](#previewoutput)\> | 使用Promise的方式获取结果。 | **示例:** @@ -2445,27 +2080,21 @@ camera.createPreviewOutput(surfaceId).then((previewOutput) => { ## PreviewOutput -**预览输出**类。 - -### release(callback: AsyncCallback): void; +预览输出类。 -**系统能力:** +### release -SystemCapability.Multimedia.Camera.Core +release(callback: AsyncCallback): void -**说明:** +释放PreviewOutput实例,通过注册回调函数获取结果。 -释放**预览输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2479,24 +2108,19 @@ previewOutput.release((err) => { }); ``` -### release(): Promise; +### release -**系统能力:** +release(): Promise -SystemCapability.Multimedia.Camera.Core +释放PreviewOutput实例,通过Promise获取结果。 -**说明:** - -释放**预览输出**实例,使用promise的方式获取结果。 - -**参数:** -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|-----------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2507,26 +2131,20 @@ previewOutput.release().then(() => { }) ``` -### on(type: 'frameStart', callback: Callback): void; +### on('frameStart') -**系统能力:** +on(type: 'frameStart', callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +监听预览帧启动,通过注册回调函数获取结果。 -**说明:** - -监听一项预览帧的开启,使用callback的方式获取预览帧开启项。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :---------------- | :-------- | :----------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'frameStart',即帧启动事件。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2536,26 +2154,20 @@ previewOutput.on('frameStart', () => { }) ``` -### on(type: 'frameEnd', callback: Callback): void; - -**系统能力:** +### on('frameEnd') -SystemCapability.Multimedia.Camera.Core +on(type: 'frameEnd', callback: AsyncCallback): void -**说明:** +监听预览帧结束,通过注册回调函数获取结果。 -监听一项预览帧的关闭,使用callback的方式获取预览帧关闭项。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :---------------- | :-------- | :----------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'frameEnd',即帧结束事件。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2565,26 +2177,20 @@ previewOutput.on('frameEnd', () => { }) ``` -### on(type: 'error', callback: Callback): void; +### on('error') -**系统能力:** +on(type: 'error', callback: ErrorCallback): void -SystemCapability.Multimedia.Camera.Core +监听预览输出的错误事件,通过注册回调函数获取结果。 -**说明:** - -监听**预览输出**的报错,使用callback的方式获取错误信息。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | Name of event to listen for. | -| callback | Callback | Yes | 使用callback的方式获取**预览输出**的错误信息 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'error'。 | +| callback | ErrorCallback | 是 | 回调函数,用于获取错误信息。 | **示例:** @@ -2594,26 +2200,20 @@ previewOutput.on('error', (previewOutputError) => { }) ``` -## createPhotoOutput(surfaceId: string, callback: AsyncCallback): void; - -**系统能力:** +## camera.createPhotoOutput -SystemCapability.Multimedia.Camera.Core +createPhotoOutput(surfaceId: string, callback: AsyncCallback): void -**说明:** +获取PhotoOutput实例,通过注册回调函数获取结果。 -创建**照片输出**实例,使用callback的方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |------------|-------------------------------|-----------|----------------------------------------------------| -| surfaceId | string | Yes | 从ImageReceiver获取的Surfack ID | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| surfaceId | string | 是 | 从ImageReceiver获取的Surface ID。 | +| callback | AsyncCallback<[PhotoOutput](#photooutput)\> | 是 | 回调函数,用于获取PhotoOutput实例。 | **示例:** @@ -2625,29 +2225,27 @@ camera.createPhotoOutput(surfaceId), (err, photoOutput) => { } console.log('Callback returned with the PhotoOutput instance.'); }); -``` - -## createPhotoOutput(surfaceId: string): Promise; +``` -**系统能力:** +## camera.createPhotoOutput -SystemCapability.Multimedia.Camera.Core +createPhotoOutput(surfaceId: string): Promise -**说明:** +获取PhotoOutput实例,通过Promise获取结果。 -创建**照片输出**实例,使用promise的方式获取实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |------------|-----------------|-----------|----------------------------------------------------| -| surfaceId | string | Yes | 从ImageReceiver获取的Surfack ID | +| surfaceId | string | 是 | 从ImageReceiver获取的Surface ID。 | **返回值:** | 类型 | 说明 | |-------------------------|--------------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise<[PhotoOutput](#photooutput)\> | 使用Promise的方式获取PhotoOutput实例。 | **示例:** @@ -2656,71 +2254,55 @@ camera.createPhotoOutput(surfaceId).then((photoOutput) => { console.log('Promise returned with PhotoOutput instance'); }) ``` -## 图片旋转 +## ImageRotation -枚举图片旋转角度。 +枚举,图片旋转角度。 | 名称 | 默认值 | 说明 | |--------------|---------------|----------------------------------------| -| ROTATION_0 | 0 | 图片旋转0度
系统能力 : SystemCapability.Multimedia.Camera.Core | -| ROTATION_90 | 90 | 图片旋转90度
系统能力 : SystemCapability.Multimedia.Camera.Core | -| ROTATION_180 | 180 | 图片旋转180度
系统能力 : SystemCapability.Multimedia.Camera.Core | -| ROTATION_270 | 270 | 图片旋转270度
系统能力 : SystemCapability.Multimedia.Camera.Core | - - -## 拍摄地点 +| ROTATION_0 | 0 | 图片旋转0度。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| ROTATION_90 | 90 | 图片旋转90度。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| ROTATION_180 | 180 | 图片旋转180度。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| ROTATION_270 | 270 | 图片旋转270度。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -拍摄的照片的地点。 +## QualityLevel -| 名称 | 类型 | 权限 | 说明 | -|-----------|--------|--------------|-------------| -| latitude | number | read / write | 纬度
系统能力 : SystemCapability.Multimedia.Camera.Core | -| longitude | number | read / write | 经度
系统能力 : SystemCapability.Multimedia.Camera.Core | - -## 图片质量 - -枚举图片质量。 +枚举,图片质量。 | 名称 | 默认值 | 说明 | |----------------------|---------------|----------------------| -| QUALITY_LEVEL_HIGH | 0 | 高图片质量
系统能力 : SystemCapability.Multimedia.Camera.Core | -| QUALITY_LEVEL_MEDIUM | 1 | 中图片质量
系统能力 : SystemCapability.Multimedia.Camera.Core | -| QUALITY_LEVEL_LOW | 2 | 低图片质量
系统能力 : SystemCapability.Multimedia.Camera.Core | +| QUALITY_LEVEL_HIGH | 0 | 图片质量高。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| QUALITY_LEVEL_MEDIUM | 1 | 图片质量中等。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| QUALITY_LEVEL_LOW | 2 | 图片质量差。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## 拍照设置 +## PhotoCaptureSetting -拍摄的照片的设置。 +拍摄照片的设置。 | 名称 | 类型 | 必填 | 说明 | |----------|---------------|-----------|---------------------| -| quality | QualityLevel | Optional | 图片质量
系统能力 : SystemCapability.Multimedia.Camera.Core | -| rotation | ImageRotation | Optional | 图片旋转角度
系统能力 : SystemCapability.Multimedia.Camera.Core | - +| quality | [QualityLevel](#qualitylevel) | 否 | 图片质量。
**系统能力:** SystemCapability.Multimedia.Camera.Core | +| rotation | [ImageRotation](#imagerotation) | 否 | 图片旋转角度。
**系统能力:** SystemCapability.Multimedia.Camera.Core | -## 照片输出 -**照片输出**类。 +## PhotoOutput -### capture(callback: AsyncCallback): void; +照片输出类。 -**系统能力:** +### capture -SystemCapability.Multimedia.Camera.Core +capture(callback: AsyncCallback): void -**说明:** +拍照,通过注册回调函数获取结果。 -拍照,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|---------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2734,26 +2316,20 @@ photoOutput.capture((err) => { }); ``` -### capture(setting: PhotoCaptureSetting, callback: AsyncCallback): void; +### capture -**系统能力:** +capture(setting: PhotoCaptureSetting, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +根据拍照设置拍照,通过注册回调函数获取结果。 -**说明:** - -使用拍照设置拍照, 使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| setting | PhotoCaptureSetting | Yes | 拍照设置 | -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| setting | [PhotoCaptureSetting](#photocapturesetting) | 是 | 拍照设置。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2767,27 +2343,25 @@ photoOutput.capture(settings, (err) => { }); ``` -### capture(setting?: PhotoCaptureSetting): Promise; - -**系统能力:** +### capture -SystemCapability.Multimedia.Camera.Core +capture(setting?: PhotoCaptureSetting): Promise -**说明:** +根据拍照设置拍照,通过Promise获取结果。 -使用拍照设置拍照, 使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|---------------------|-----------|----------------------------------------------| -| setting | PhotoCaptureSetting | No | 拍照设置 | +| setting | [PhotoCaptureSetting](#photocapturesetting) | 否 | 拍照设置。 | **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2798,25 +2372,19 @@ photoOutput.capture().then(() => { }) ``` -### release(callback: AsyncCallback): void; +### release -**系统能力:** +release(callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +释放PhotoOutput实例,通过注册回调函数获取结果。 -**说明:** - -释放**拍照输出**实例,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -2830,24 +2398,19 @@ photoOutput.release((err) => { }); ``` -### release(): Promise; - -**系统能力:** - -SystemCapability.Multimedia.Camera.Core +### release -**说明:** +release(): Promise -释放**拍照输出**实例,使用promise的方式获取结果。 +释放PhotoOutput实例,通过Promise获取结果。 -**参数:** -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -2858,26 +2421,20 @@ photoOutput.release().then(() => { }) ``` -### on(type: 'captureStart', callback: Callback): void; - -**系统能力:** +### on('captureStart') -SystemCapability.Multimedia.Camera.Core +on(type: 'captureStart', callback: AsyncCallback): void -**说明:** +监听拍照启动,通过注册回调函数获取Capture ID。 -监听拍照项的启动,使用callback的方式获取一个拍照项的启动结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | Name of event to listen for. | -| callback | Callback | Yes | 使用callback的方式获取captureID | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'captureStart',即拍照启动事件。 | +| callback | AsyncCallback | 是 | 使用callback的方式获取Capture ID。 | **示例:** @@ -2887,26 +2444,20 @@ photoOutput.on('captureStart', (captureId) => { }) ``` -### on(type: 'frameShutter', callback: Callback): void; - -**系统能力:** +### on('frameShutter') -SystemCapability.Multimedia.Camera.Core +on(type: 'frameShutter', callback: AsyncCallback): void -**说明:** +监听帧刷新,通过注册回调函数获取结果。 -监听一项帧刷新,使用callback的方式获取帧的刷新项。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'frameShutter',即帧刷新事件。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取相关信息。 | **示例:** @@ -2917,26 +2468,20 @@ photoOutput.on('frameShutter', (frameShutterInfo) => { }) ``` -### on(type: 'captureEnd', callback: Callback): void; +### on('captureEnd') -**系统能力:** +on(type: 'captureEnd', callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +监听拍照停止,通过注册回调函数获取结果。 -**说明:** - -监听拍照项的关闭,使用callback的方式获取一个拍照项的关闭结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取拍照结束的信息 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'captureEnd',即拍照停止事件。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取相关信息。 | **示例:** @@ -2947,26 +2492,20 @@ photoOutput.on('captureEnd', (captureEndInfo) => { }) ``` -### on(type: 'error', callback: Callback): void; - -**系统能力:** +### on('error') -SystemCapability.Multimedia.Camera.Core +on(type: 'error', callback: ErrorCallback): void -**说明:** +监听拍照的错误事件,通过注册回调函数获取结果。 -监听**照片输出**的报错,使用callback的方式获取错误信息。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | Name of event to listen for. | -| callback | Callback | Yes | 使用callback的方式获取**照片输出**的错误信息 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'error'。 | +| callback | ErrorCallback | 是 | 回调函数,用于获取错误信息。 | **示例:** @@ -2976,26 +2515,20 @@ photoOutput.on('error', (photoOutputError) => { }) ``` -## createVideoOutput(surfaceId: string, callback: AsyncCallback): void; +## camera.createVideoOutput -**系统能力:** +createVideoOutput(surfaceId: string, callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +获取VideoOutput实例,通过注册回调函数获取结果。 -**说明:** - -创建**视频输出**实例,使用callback的方式获取一个异步的实例。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |------------|-------------------------------|-----------|----------------------------------------------------| -| surfaceId | string | Yes | 从VideoRecorder获取的Surfack ID | -| callback | AsyncCallback | Yes | 用callback的方式获取结果 | - -**返回值:** - -none +| surfaceId | string | 是 | 从VideoRecorder获取的Surface ID。 | +| callback | AsyncCallback<[VideoOutput](#videootput)\> | 是 | 回调函数,用于获取VideoOutput实例。 | **示例:** @@ -3007,29 +2540,27 @@ camera.createVideoOutput(surfaceId), (err, videoOutput) => { } console.log('Callback returned with the VideoOutput instance'); }); -``` - -## createVideoOutput(surfaceId: string): Promise; +``` -**系统能力:** +## camera.createVideoOutput -SystemCapability.Multimedia.Camera.Core +createVideoOutput(surfaceId: string): Promise -**说明:** +获取VideoOutput实例,通过Promise获取结果。 -创建**视频输出**实例,使用promise的方式获取结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |------------|-----------------|-----------|----------------------------------------------------| -| surfaceId | string | Yes | 从VideoRecorder获取的Surfack ID | +| surfaceId | string | 是 | 从VideoRecorder获取的Surface ID。 | **返回值:** -| 类型 | 说明 | -|-------------------------|-------------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| 类型 | 说明 | +| --------------------- | -------------------------------------- | +| Promise | 使用Promise的方式获取VideoOutput实例。 | **示例:** @@ -3041,27 +2572,21 @@ camera.createVideoOutput(surfaceId).then((videoOutput) => { ## VideoOutput -实现视频输出。 - -### start(callback: AsyncCallback): void; +视频输出类。 -**系统能力:** +### start -SystemCapability.Multimedia.Camera.Core +start(callback: AsyncCallback): void -**说明:** +开始拍摄视频,通过注册回调函数获取结果。 -开启**视频输出**实例, 使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -3075,24 +2600,19 @@ videoOutput.start((err) => { }); ``` -### start(): Promise; - -**系统能力:** +### start -SystemCapability.Multimedia.Camera.Core +start(): Promise -**说明:** +开始拍摄视频,通过Promise获取结果。 -开启**视频输出**实例, 使用promise的方式获取结果。 - -**参数:** -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -3103,25 +2623,19 @@ videoOutput.start().then(() => { }) ``` -### stop(callback: AsyncCallback): void; - -**系统能力:** +### stop -SystemCapability.Multimedia.Camera.Core +stop(callback: AsyncCallback): void -**说明:** +停止拍摄视频,通过注册回调函数获取结果。 -关闭视频输出,使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -3135,24 +2649,19 @@ videoOutput.stop((err) => { }); ``` -### stop(): Promise; +### stop -**系统能力:** +stop(): Promise -SystemCapability.Multimedia.Camera.Core +停止拍摄视频,通过Promise获取结果。 -**说明:** - -关闭视频输出,使用promise的方式获取结果。 - -**参数:** -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -3162,25 +2671,19 @@ videoOutput.start().then(() => { }) ``` -### release(callback: AsyncCallback): void; - -**系统能力:** +### release -SystemCapability.Multimedia.Camera.Core +release(callback: AsyncCallback): void -**说明:** +释放VideoOutput实例,通过注册回调函数获取结果。 -释放**视频输出**实例, 使用callback的方式获取一个异步的结果。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** -Camera appear + | 名称 | 类型 | 必填 | 说明 | |----------|----------------------|-----------|----------------------------------------------| -| callback | AsyncCallback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -none +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -3194,25 +2697,19 @@ videoOutput.release((err) => { }); ``` -### release(): Promise; +### release -**系统能力:** +release(): Promise -SystemCapability.Multimedia.Camera.Core +释放VideoOutput实例,通过Promise获取结果。 -**说明:** - -释放**视频输出**实例,使用promise的方式获取结果。 - -**参数:** - -none +**系统能力:** SystemCapability.Multimedia.Camera.Core **返回值:** | 类型 | 说明 | |----------------|---------------------------------------------| -| Promise | 使用promise的方式获取结果 | +| Promise | 使用Promise的方式获取结果。 | **示例:** @@ -3223,26 +2720,20 @@ videoOutput.release().then(() => { }) ``` -### on(type: 'frameStart', callback: Callback): void; - -**系统能力:** +### on('frameStart') -SystemCapability.Multimedia.Camera.Core +on(type: 'frameStart', callback: AsyncCallback): void -**说明:** +监听视频帧开启,通过注册回调函数获取结果。 -监听一项视频帧的开启,使用callback的方式获取视频帧的开启项。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :---------------- | :-------- | :----------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'frameStart',即视频帧开启事件。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -3252,26 +2743,20 @@ videoOutput.on('frameStart', () => { }) ``` -### on(type: 'frameEnd', callback: Callback): void; +### on('frameEnd') -**系统能力:** +on(type: 'frameEnd', callback: AsyncCallback): void -SystemCapability.Multimedia.Camera.Core +监听视频帧结束,通过注册回调函数获取结果。 -**说明:** - -监听一项视频帧的关闭,使用callback的方式获取视频帧的开启项。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :---------------- | :-------- | :----------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取结果 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'frameEnd',即视频帧结束事件。 | +| callback | AsyncCallback | 是 | 回调函数,用于获取结果。 | **示例:** @@ -3281,26 +2766,20 @@ videoOutput.on('frameEnd', () => { }) ``` -### on(type: 'error', callback: Callback): void; - -**系统能力:** +### on('error') -SystemCapability.Multimedia.Camera.Core +on(type: 'error', callback: ErrorCallback): void -**说明:** +监听视频输出的错误事件,通过注册回调函数获取结果。 -监听 **视频输出** 的报错,使用callback的方式获取错误信息。 +**系统能力:** SystemCapability.Multimedia.Camera.Core **参数:** | 名称 | 类型 | 必填 | 说明 | | :------- | :--------------------- | :-------- | :-----------------------------------------------| -| type | string | Yes | 监听项的名称 | -| callback | Callback | Yes | 使用callback的方式获取**视频输出**的错误信息 | - -**返回值:** - -None +| type | string | 是 | 监听事件,固定为'error'。 | +| callback | Callback | 是 | 回调函数,用于获取错误信息。 | **示例:** diff --git a/zh-cn/application-dev/reference/apis/js-apis-net-connection.md b/zh-cn/application-dev/reference/apis/js-apis-net-connection.md index 0320816196a4dff9f0f733ebd089374df44f1a5e..3b72f6733c4785062fa3cb6f3168cc90342576ca 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-net-connection.md +++ b/zh-cn/application-dev/reference/apis/js-apis-net-connection.md @@ -1,8 +1,8 @@ -# 网络 +# 网络连接管理 > **说明:** > ->本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 +> 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 ## 导入模块 @@ -14,7 +14,7 @@ import connection from '@ohos.net.connection' getDefaultNet(callback: AsyncCallback\): void -获取默认网络,使用callback方式作为异步方法。 +获取默认激活的数据网络,使用callback方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -22,9 +22,9 @@ getDefaultNet(callback: AsyncCallback\): void **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| callback | AsyncCallback\<[NetHandle](#nethandle)> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | --------------------------------------- | ---- | ---------- | +| callback | AsyncCallback\<[NetHandle](#nethandle)> | 是 | 回调函数。 | **示例:** @@ -39,7 +39,7 @@ connection.getDefaultNet(function (error, netHandle) { getDefaultNet(): Promise\ -获取默认网络,使用Promise方式作为异步方法。 +获取默认激活的数据网络,使用Promise方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -47,9 +47,9 @@ getDefaultNet(): Promise\ **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\<[NetHandle](#nethandle)> | 以Promise形式返回 | +| 类型 | 说明 | +| --------------------------------- | ------------------------------------- | +| Promise\<[NetHandle](#nethandle)> | 以Promise形式返回默认激活的数据网络。 | **示例:** @@ -63,15 +63,15 @@ connection.getDefaultNet().then(function (netHandle) { hasDefaultNet(callback: AsyncCallback\): void -判断是否有默认网络,使用callback方式作为异步方法。 +检查默认数据网络是否被激活,使用callback方式作为异步方法。 **系统能力**:SystemCapability.Communication.NetManager.Core **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| callback | AsyncCallback\ | 是 | 回调函数,有默认网络返回true。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ----------------------- | ---- | -------------------------------------- | +| callback | AsyncCallback\ | 是 | 回调函数,默认数据网络被激活返回true。 | **示例:** @@ -86,15 +86,15 @@ connection.hasDefaultNet(function (error, has) { hasDefaultNet(): Promise\ -判断是否有默认网络,使用Promise方式作为异步方法。 +检查默认数据网络是否被激活,使用Promise方式作为异步方法。 **系统能力**:SystemCapability.Communication.NetManager.Core **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\ | 以Promise形式返回,有默认网络返回true。 | +| 类型 | 说明 | +| ----------------- | ----------------------------------------------- | +| Promise\ | 以Promise形式返回,默认数据网络被激活返回true。 | **示例:** @@ -108,7 +108,7 @@ connection.hasDefaultNet().then(function (has) { getConnectionProperties(netHandle: NetHandle, callback: AsyncCallback\): void -查询netHandle对应的网络的连接信息,使用callback方式作为异步方法。 +获取netHandle对应的网络的连接信息,使用callback方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -116,10 +116,10 @@ getConnectionProperties(netHandle: NetHandle, callback: AsyncCallback\ | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ------------------------------------------------------------ | ---- | ---------------- | +| netHandle | [NetHandle](#nethandle) | 是 | 数据网络的句柄。 | +| callback | AsyncCallback\<[ConnectionProperties](#connectionproperties)> | 是 | 回调函数。 | **示例:** @@ -136,7 +136,7 @@ connection.getDefaultNet().then(function (netHandle) { getConnectionProperties(netHandle: NetHandle): Promise\ -查询netHandle对应的网络的连接信息,使用Promise方式作为异步方法。 +获取netHandle对应的网络的连接信息,使用Promise方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -144,15 +144,15 @@ getConnectionProperties(netHandle: NetHandle): Promise\ **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| netHandle | [NetHandle](#nethandle) | 是 | 对应网络 | +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ----------------------- | ---- | ---------------- | +| netHandle | [NetHandle](#nethandle) | 是 | 数据网络的句柄。 | **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\<[ConnectionProperties](#connectionproperties)> | 以Promise形式返回 | +| 类型 | 说明 | +| ------------------------------------------------------- | --------------------------------- | +| Promise\<[ConnectionProperties](#connectionproperties)> | 以Promise形式返回网络的连接信息。 | **示例:** @@ -168,7 +168,7 @@ connection.getDefaultNet().then(function (netHandle) { getNetCapabilities(netHandle: NetHandle, callback: AsyncCallback\): void -查询netHandle对应的网络的能力信息,使用callback方式作为异步方法。 +获取netHandle对应的网络的能力信息,使用callback方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -176,10 +176,10 @@ getNetCapabilities(netHandle: NetHandle, callback: AsyncCallback\ | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| --------- | --------------------------------------------------- | ---- | ---------------- | +| netHandle | [NetHandle](#nethandle) | 是 | 数据网络的句柄。 | +| callback | AsyncCallback\<[NetCapabilities](#netcapabilities)> | 是 | 回调函数。 | **示例:** @@ -196,7 +196,7 @@ connection.getDefaultNet().then(function (netHandle) { getNetCapabilities(netHandle: NetHandle): Promise\ -查询netHandle对应的网络的能力信息,使用Promise方式作为异步方法。 +获取netHandle对应的网络的能力信息,使用Promise方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -204,15 +204,15 @@ getNetCapabilities(netHandle: NetHandle): Promise\ **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| netHandle | [NetHandle](#nethandle) | 是 | 对应网络 | +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ----------------------- | ---- | ---------------- | +| netHandle | [NetHandle](#nethandle) | 是 | 数据网络的句柄。 | **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\<[NetCapabilities](#netcapabilities)> | 以Promise形式返回 | +| 类型 | 说明 | +| --------------------------------------------- | --------------------------------- | +| Promise\<[NetCapabilities](#netcapabilities)> | 以Promise形式返回网络的能力信息。 | **示例:** @@ -228,7 +228,7 @@ connection.getDefaultNet().then(function (netHandle) { getAddressesByName(host: string, callback: AsyncCallback\>): void -使用默认网络将host解析成IP,返回所有IP,使用callback方式作为异步方法。 +使用默认网络解析主机名以获取所有IP地址,使用callback方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -236,10 +236,10 @@ getAddressesByName(host: string, callback: AsyncCallback\>): **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| host | string | 是 | 需要解析的域名 | -| callback | AsyncCallback\> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------------------------------------------------- | ---- | ------------------ | +| host | string | 是 | 需要解析的主机名。 | +| callback | AsyncCallback\> | 是 | 回调函数。 | **示例:** @@ -256,7 +256,7 @@ connection.getDefaultNet().then(function (netHandle) { getAddressesByName(netHandle: NetHandle): Promise\> -使用默认网络将host解析成IP,返回所有IP,使用Promise方式作为异步方法。 +使用默认网络解析主机名以获取所有IP地址,使用Promise方式作为异步方法。 **需要权限**:ohos.permission.GET_NETWORK_INFO @@ -264,15 +264,15 @@ getAddressesByName(netHandle: NetHandle): Promise\> **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| host | string | 是 | 需要解析的域名 | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ------------------ | +| host | string | 是 | 需要解析的主机名。 | **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\> | 以Promise形式返回 | +| 类型 | 说明 | +| ------------------------------------------- | ----------------------------- | +| Promise\> | 以Promise形式返回所有IP地址。 | **示例:** @@ -294,16 +294,16 @@ createNetConnection(netSpecifier?: NetSpecifier, timeout?: number): NetConnectio **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| netSpecifier | [NetSpecifier](#netspecifier) | 否 | 指定网络的各项特征,不指定则关注默认网络。 | -| timeout | number | 否 | 获取netSpecifier指定的网络时的超时时间,仅netSpecifier存在时生效。 | +| 参数名 | 类型 | 必填 | 说明 | +| ------------ | ----------------------------- | ---- | ------------------------------------------------------------ | +| netSpecifier | [NetSpecifier](#netspecifier) | 否 | 指定网络的各项特征,不指定则关注默认网络。 | +| timeout | number | 否 | 获取netSpecifier指定的网络时的超时时间,仅netSpecifier存在时生效。 | **返回值:** -| 类型 | 说明 | -| ----- | ----- | -|[NetConnection](#netconnection) | 所关注的网络的句柄 | +| 类型 | 说明 | +| ------------------------------- | -------------------- | +| [NetConnection](#netconnection) | 所关注的网络的句柄。 | **示例:** @@ -321,7 +321,7 @@ let netConnection2 = connection.createNetConnection({ ## NetConnection -网络连接的句柄 +网络连接的句柄。 ### on('netAvailable') @@ -333,10 +333,10 @@ on(type: 'netAvailable', callback: Callback\): void **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| type | string | 是 | 监听的事件,固定'netAvailable' | -| callback | Callback\<[NetHandle](#nethandle)>> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ---------------------------------- | ---- | ------------------------------------------------------------ | +| type | string | 是 | 监听事件,固定为'netAvailable'。
netAvailable:数据网络可用事件。 | +| callback | Callback\<[NetHandle](#nethandle)> | 是 | 回调函数。 | **示例:** @@ -356,10 +356,10 @@ on(type: 'netCapabilitiesChange', callback: Callback<{ netHandle: NetHandle, net **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| type | string | 是 | 监听的事件,固定'netCapabilitiesChange' | -| callback | Callback<{ netHandle: [NetHandle](#nethandle), netCap: [NetCapabilities](#netcapabilities) }> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| type | string | 是 | 监听事件,固定为'netCapabilitiesChange'。
netCapabilitiesChange:网络能力变化事件。 | +| callback | Callback<{ netHandle: [NetHandle](#nethandle), netCap: [NetCapabilities](#netcapabilities) }> | 是 | 回调函数。 | **示例:** @@ -379,10 +379,10 @@ on(type: 'netConnectionPropertiesChange', callback: Callback<{ netHandle: NetHan **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| type | string | 是 | 监听的事件,固定'netConnectionPropertiesChange' | -| callback | Callback<{ netHandle: [NetHandle](#nethandle), connectionProperties: [ConnectionProperties](#connectionproperties) }> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| type | string | 是 | 监听事件,固定为'netConnectionPropertiesChange'。
netConnectionPropertiesChange:网络连接信息变化事件。 | +| callback | Callback<{ netHandle: [NetHandle](#nethandle), connectionProperties: [ConnectionProperties](#connectionproperties) }> | 是 | 回调函数。 | **示例:** @@ -402,10 +402,10 @@ on(type: 'netLost', callback: Callback\): void **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| type | string | 是 | 监听的事件,固定'netLost' | -| callback | Callback\<[NetHandle](#nethandle)>> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ---------------------------------- | ---- | ------------------------------------------------------------ | +| type | string | 是 | 监听事件,固定为'netLost'。
netLost:网络严重中断或正常断开事件。 | +| callback | Callback\<[NetHandle](#nethandle)> | 是 | 回调函数。 | **示例:** @@ -425,10 +425,10 @@ on(type: 'netUnavailable', callback: Callback\): void **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| type | string | 是 | 监听的事件,固定'netUnavailable' | -| callback | Callback\> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | --------------- | ---- | ------------------------------------------------------------ | +| type | string | 是 | 监听事件,固定为'netUnavailable'。
netUnavailable:网络不可用事件。 | +| callback | Callback\ | 是 | 回调函数。 | **示例:** @@ -450,9 +450,9 @@ register(callback: AsyncCallback\): void **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| callback | Callback\> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------------------- | ---- | ---------- | +| callback | AsyncCallback\ | 是 | 回调函数。 | **示例:** @@ -472,9 +472,9 @@ unregister(callback: AsyncCallback\): void **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| callback | Callback\> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------------------- | ---- | ---------- | +| callback | AsyncCallback\ | 是 | 回调函数。 | **示例:** @@ -486,26 +486,30 @@ connection.createNetConnection().unregister(function (error) { ## NetHandle -网络的句柄 +数据网络的句柄。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| netId | number | 对应网络的编号 | +在调用NetHandle的方法之前,需要先获取NetHandle对象。 + +### 属性 + +| 变量 | 类型 | 说明 | +| ----- | ------ | ------------------------- | +| netId | number | 网络ID,必须大于等于100。 | ### getAddressesByName getAddressesByName(host: string, callback: AsyncCallback\>): void -使用对应网络将host解析成IP,返回所有IP,使用callback方式作为异步方法。 +使用对应网络解析主机名以获取所有IP地址,使用callback方式作为异步方法。 **系统能力**:SystemCapability.Communication.NetManager.Core **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| host | string | 是 | 需要解析的域名 | -| callback | AsyncCallback\> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------------------------------------------------- | ---- | ------------------ | +| host | string | 是 | 需要解析的主机名。 | +| callback | AsyncCallback\> | 是 | 回调函数 | **示例:** @@ -522,21 +526,21 @@ connection.getDefaultNet().then(function (netHandle) { getAddressesByName(netHandle: NetHandle): Promise\> -使用对应网络将host解析成IP,返回所有IP,使用Promise方式作为异步方法。 +使用对应网络解析主机名以获取所有IP地址,使用Promise方式作为异步方法。 **系统能力**:SystemCapability.Communication.NetManager.Core **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| host | string | 是 | 需要解析的域名 | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ------------------ | +| host | string | 是 | 需要解析的主机名。 | **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\> | 以Promise形式返回 | +| 类型 | 说明 | +| ------------------------------------------- | ----------------------------- | +| Promise\> | 以Promise形式返回所有IP地址。 | **示例:** @@ -552,16 +556,16 @@ connection.getDefaultNet().then(function (netHandle) { getAddressByName(host: string, callback: AsyncCallback\): void -使用对应网络将host解析成IP,返回一个IP,使用callback方式作为异步方法。 +使用对应网络解析主机名以获取第一个IP地址,使用callback方式作为异步方法。 **系统能力**:SystemCapability.Communication.NetManager.Core **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| host | string | 是 | 需要解析的域名 | -| callback | AsyncCallback\<[NetAddress](#netaddress)> | 是 | 回调函数 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ----------------------------------------- | ---- | ------------------ | +| host | string | 是 | 需要解析的主机名。 | +| callback | AsyncCallback\<[NetAddress](#netaddress)> | 是 | 回调函数。 | **示例:** @@ -578,21 +582,21 @@ connection.getDefaultNet().then(function (netHandle) { getAddressByName(netHandle: NetHandle): Promise\ -使用对应网络将host解析成IP,返回一个IP,使用Promise方式作为异步方法。 +使用对应网络解析主机名以获取第一个IP地址,使用Promise方式作为异步方法。 **系统能力**:SystemCapability.Communication.NetManager.Core **参数:** -| 参数名 | 类型 | 必填 | 说明 | -| ----- | ----- | ---- | ----- | -| host | string | 是 | 需要解析的域名 | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ------------------ | +| host | string | 是 | 需要解析的主机名。 | **返回值:** -| 类型 | 说明 | -| ----- | ----- | -| Promise\<[NetAddress](#netaddress)> | 以Promise形式返回 | +| 类型 | 说明 | +| ----------------------------------- | ------------------------------- | +| Promise\<[NetAddress](#netaddress)> | 以Promise形式返回第一个IP地址。 | **示例:** @@ -606,81 +610,81 @@ connection.getDefaultNet().then(function (netHandle) { ## NetSpecifier -网络的特征。 +提供承载数据网络能力的实例。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| netCapabilities | [NetCapabilities](#netcapabilities) | 网络的能力集 | -| bearerPrivateIdentifier | string | 网络标识符,WIFI网络的标识符是"wifi",蜂窝网络的标识符是"slot0"(对应SIM卡1) | +| 变量 | 类型 | 说明 | +| ----------------------- | ----------------------------------- | ------------------------------------------------------------ | +| netCapabilities | [NetCapabilities](#netcapabilities) | 存储数据网络的传输能力和承载类型。 | +| bearerPrivateIdentifier | string | 网络标识符,WIFI网络的标识符是"wifi",蜂窝网络的标识符是"slot0"(对应SIM卡1)。 | ## NetCapabilities 网络的能力集。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| linkUpBandwidthKbps | number | 带宽上限 | -| linkDownBandwidthKbps | number | 带宽下限 | -| networkCap | Array<[NetCap](#netcap)> | 网络具体能力 | -| bearerTypes | Array<[NetBearType](#netbearType)> | 网络类型 | +| 变量 | 类型 | 说明 | +| --------------------- | ---------------------------------- | ------------------------ | +| linkUpBandwidthKbps | number | 上行(设备到网络)带宽。 | +| linkDownBandwidthKbps | number | 下行(网络到设备)带宽。 | +| networkCap | Array<[NetCap](#netcap)> | 网络具体能力。 | +| bearerTypes | Array<[NetBearType](#netbearType)> | 网络类型。 | ## NetCap 网络具体能力。 -| 变量 | 值 | 说明 | -| ------ | ----- | ----- | -| NET_CAPABILITY_INTERNET | 12 | 联网能力 | -| NET_CAPABILITY_VALIDATED | 16 | 网络可用 | +| 变量 | 值 | 说明 | +| ------------------------ | ---- | ---------------------- | +| NET_CAPABILITY_INTERNET | 12 | 网络可以访问Internet。 | +| NET_CAPABILITY_VALIDATED | 16 | 网络可用。 | ## NetBearType 网络类型。 -| 变量 | 值 | 说明 | -| ------ | ----- | ----- | -| BEARER_CELLULAR | 0 | 蜂窝网络 | -| BEARER_WIFI | 1 | WIFI网络 | +| 变量 | 值 | 说明 | +| --------------- | ---- | ----------- | +| BEARER_CELLULAR | 0 | 蜂窝网络。 | +| BEARER_WIFI | 1 | Wi-Fi网络。 | ## ConnectionProperties 网络连接信息。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| interfaceName | string | 网卡名称 | -| domains | string | 所属域,默认"" | -| linkAddresses | Array<[LinkAddress](#linkaddress)> | 链路信息 | -| routes | Array<[RouteInfo](#routeinfo)> | 路由信息 | -| mtu | number | 最大传输单元 | +| 变量 | 类型 | 说明 | +| ------------- | ---------------------------------- | ---------------- | +| interfaceName | string | 网卡名称。 | +| domains | string | 所属域,默认""。 | +| linkAddresses | Array<[LinkAddress](#linkaddress)> | 链路信息。 | +| routes | Array<[RouteInfo](#routeinfo)> | 路由信息。 | +| mtu | number | 最大传输单元。 | ## LinkAddress 网络链路信息。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| address | [NetAddress](#netaddress) | 链路地址 | -| prefixLength | number | 地址前缀长度 | +| 变量 | 类型 | 说明 | +| ------------ | ------------------------- | -------------------- | +| address | [NetAddress](#netaddress) | 链路地址。 | +| prefixLength | number | 链路地址前缀的长度。 | ## RouteInfo 网络路由信息。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| interface | string | 网卡名称 | -| destination | [LinkAddress](#linkaddress) | 目的地址 | -| gateway | [NetAddress](#netaddress) | 网关地址 | -| hasGateway | boolean | 是否有网关 | -| isDefaultRoute | boolean | 是否为默认路由 | +| 变量 | 类型 | 说明 | +| -------------- | --------------------------- | ---------------- | +| interface | string | 网卡名称。 | +| destination | [LinkAddress](#linkaddress) | 目的地址。 | +| gateway | [NetAddress](#netaddress) | 网关地址。 | +| hasGateway | boolean | 是否有网关。 | +| isDefaultRoute | boolean | 是否为默认路由。 | ## NetAddress -地址。 +网络地址。 -| 变量 | 类型 | 说明 | -| ----- | ----- | ----- | -| address | string | 一个IPv4地址或者IPv6地址 | -| family | number | IPv4 = 1, IPv6 = 2, 默认IPv4 | -| port | number | 端口,取值范围\[0, 65535] | +| 变量 | 类型 | 说明 | +| ------- | ------ | ------------------------------ | +| address | string | 地址。 | +| family | number | IPv4 = 1,IPv6 = 2,默认IPv4。 | +| port | number | 端口,取值范围\[0, 65535]。 | \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index b0adfa00699fb5b9d5bb1f98a58fc29b08391073..8380ca334b2b5c5925486f1215ea1a3447335480 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -1,111 +1,102 @@ -# 基于JS扩展的类Web开发范式 - -- [组件](js-components.md) - - [通用](js-components-common.md) - - [通用属性](js-components-common-attributes.md) - - [通用样式](js-components-common-styles.md) - - [通用事件](js-components-common-events.md) - - [通用方法](js-components-common-methods.md) - - [动画样式](js-components-common-animation.md) - - [渐变样式](js-components-common-gradient.md) - - [转场样式](js-components-common-transition.md) - - [媒体查询](js-components-common-mediaquery.md) - - [自定义字体样式](js-components-common-customizing-font.md) - - [原子布局](js-components-common-atomic-layout.md) - - - [容器组件](js-components-container.md) - - [badge](js-components-container-badge.md) - - [dialog](js-components-container-dialog.md) - - [div](js-components-container-div.md) - - [form](js-components-container-form.md) - - [list](js-components-container-list.md) - - [list-item](js-components-container-list-item.md) - - [list-item-group](js-components-container-list-item-group.md) - - [panel](js-components-container-panel.md) - - [popup](js-components-container-popup.md) - - [refresh](js-components-container-refresh.md) - - [stack](js-components-container-stack.md) - - [stepper](js-components-container-stepper.md) - - [stepper-item](js-components-container-stepper-item.md) - - [swiper](js-components-container-swiper.md) - - [tabs](js-components-container-tabs.md) - - [tab-bar](js-components-container-tab-bar.md) - - [tab-content](js-components-container-tab-content.md) - - - [基础组件](js-components-basic.md) - - [button](js-components-basic-button.md) - - [chart](js-components-basic-chart.md) - - [divider](js-components-basic-divider.md) - - [image](js-components-basic-image.md) - - [image-animator](js-components-basic-image-animator.md) - - [input](js-components-basic-input.md) - - [label](js-components-basic-label.md) - - [marquee](js-components-basic-marquee.md) - - [menu](js-components-basic-menu.md) - - [option](js-components-basic-option.md) - - [picker](js-components-basic-picker.md) - - [picker-view](js-components-basic-picker-view.md) - - [piece](js-components-basic-piece.md) - - [progress](js-components-basic-progress.md) - - [qrcode](js-components-basic-qrcode.md) - - [rating](js-components-basic-rating.md) - - [richtext](js-components-basic-richtext.md) - - [search](js-components-basic-search.md) - - [select](js-components-basic-select.md) - - [slider](js-components-basic-slider.md) - - [span](js-components-basic-span.md) - - [switch](js-components-basic-switch.md) - - [text](js-components-basic-text.md) - - [textarea](js-components-basic-textarea.md) - - [toolbar](js-components-basic-toolbar.md) - - [toolbar-item](js-components-basic-toolbar-item.md) - - [toggle](js-components-basic-toggle.md) - - - [媒体组件](js-components-media.md) - - [video](js-components-media-video.md) - - - [画布组件](js-components-canvas.md) - - [canvas组件](js-components-canvas-canvas.md) - - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) - - [Image对象](js-components-canvas-image.md) - - [CanvasGradient对象](js-components-canvas-canvasgradient.md) - - [ImageData对象](js-components-canvas-imagedata.md) - - [Path2D对象](js-components-canvas-path2d.md) - - [ImageBitmap对象](js-components-canvas-imagebitmap.md) - - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md) - - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md) - - - [栅格组件](js-components-grid.md) - - [基本概念](js-components-grid-basic-concepts.md) - - [grid-container](js-components-grid-container.md) - - [grid-row](js-components-grid-row.md) - - [grid-col](js-components-grid-col.md) - - - [svg组件](js-svg.md) - - [通用属性](js-components-svg-common-attributes.md) - - [svg](js-components-svg.md) - - [rect](js-components-svg-rect.md) - - [circle](js-components-svg-circle.md) - - [ellipse](js-components-svg-ellipse.md) - - [path](js-components-svg-path.md) - - [line](js-components-svg-line.md) - - [polyline](js-components-svg-polyline.md) - - [polygon](js-components-svg-polygon.md) - - [text](js-components-svg-text.md) - - [tspan](js-components-svg-tspan.md) - - [textPath](js-components-svg-textpath.md) - - [animate](js-components-svg-animate.md) - - [animateMotion](js-components-svg-animatemotion.md) - - [animateTransform](js-components-svg-animatetransform.md) - -- [自定义组件](js-components-custom.md) - - [基本用法](js-components-custom-basic-usage.md) - - [自定义事件](js-components-custom-events.md) - - [Props](js-components-custom-props.md) - - [事件参数](js-components-custom-event-parameter.md) - - [slot插槽](js-components-custom-slot.md) - - [生命周期定义](js-components-custom-lifecycle.md) - -- [附录](js-appendix.md) - - [类型说明](js-appendix-types.md) +# 基于JS扩展的类Web开发范式 +- 组件 + - 通用 + - [通用属性](js-components-common-attributes.md) + - [通用样式](js-components-common-styles.md) + - [通用事件](js-components-common-events.md) + - [通用方法](js-components-common-methods.md) + - [动画样式](js-components-common-animation.md) + - [渐变样式](js-components-common-gradient.md) + - [转场样式](js-components-common-transition.md) + - [媒体查询](js-components-common-mediaquery.md) + - [自定义字体样式](js-components-common-customizing-font.md) + - [原子布局](js-components-common-atomic-layout.md) + - 容器组件 + - [badge](js-components-container-badge.md) + - [dialog](js-components-container-dialog.md) + - [div](js-components-container-div.md) + - [form](js-components-container-form.md) + - [list](js-components-container-list.md) + - [list-item](js-components-container-list-item.md) + - [list-item-group](js-components-container-list-item-group.md) + - [panel](js-components-container-panel.md) + - [popup](js-components-container-popup.md) + - [refresh](js-components-container-refresh.md) + - [stack](js-components-container-stack.md) + - [stepper](js-components-container-stepper.md) + - [stepper-item](js-components-container-stepper-item.md) + - [swiper](js-components-container-swiper.md) + - [tabs](js-components-container-tabs.md) + - [tab-bar](js-components-container-tab-bar.md) + - [tab-content](js-components-container-tab-content.md) + - 基础组件 + - [button](js-components-basic-button.md) + - [chart](js-components-basic-chart.md) + - [divider](js-components-basic-divider.md) + - [image](js-components-basic-image.md) + - [image-animator](js-components-basic-image-animator.md) + - [input](js-components-basic-input.md) + - [label](js-components-basic-label.md) + - [marquee](js-components-basic-marquee.md) + - [menu](js-components-basic-menu.md) + - [option](js-components-basic-option.md) + - [picker](js-components-basic-picker.md) + - [picker-view](js-components-basic-picker-view.md) + - [piece](js-components-basic-piece.md) + - [progress](js-components-basic-progress.md) + - [qrcode](js-components-basic-qrcode.md) + - [rating](js-components-basic-rating.md) + - [richtext](js-components-basic-richtext.md) + - [search](js-components-basic-search.md) + - [select](js-components-basic-select.md) + - [slider](js-components-basic-slider.md) + - [span](js-components-basic-span.md) + - [switch](js-components-basic-switch.md) + - [text](js-components-basic-text.md) + - [textarea](js-components-basic-textarea.md) + - [toolbar](js-components-basic-toolbar.md) + - [toolbar-item](js-components-basic-toolbar-item.md) + - [toggle](js-components-basic-toggle.md) + - 媒体组件 + - [video](js-components-media-video.md) + - 画布组件 + - [canvas组件](js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) + - [Image对象](js-components-canvas-image.md) + - [CanvasGradient对象](js-components-canvas-canvasgradient.md) + - [ImageData对象](js-components-canvas-imagedata.md) + - [Path2D对象](js-components-canvas-path2d.md) + - [ImageBitmap对象](js-components-canvas-imagebitmap.md) + - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md) + - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md) + - 栅格组件 + - [基本概念](js-components-grid-basic-concepts.md) + - [grid-container](js-components-grid-container.md) + - [grid-row](js-components-grid-row.md) + - [grid-col](js-components-grid-col.md) + - svg组件 + - [通用属性](js-components-svg-common-attributes.md) + - [svg](js-components-svg.md) + - [rect](js-components-svg-rect.md) + - [circle](js-components-svg-circle.md) + - [ellipse](js-components-svg-ellipse.md) + - [path](js-components-svg-path.md) + - [line](js-components-svg-line.md) + - [polyline](js-components-svg-polyline.md) + - [polygon](js-components-svg-polygon.md) + - [text](js-components-svg-text.md) + - [tspan](js-components-svg-tspan.md) + - [textPath](js-components-svg-textpath.md) + - [animate](js-components-svg-animate.md) + - [animateMotion](js-components-svg-animatemotion.md) + - [animateTransform](js-components-svg-animatetransform.md) +- 自定义组件 + - [基本用法](js-components-custom-basic-usage.md) + - [自定义事件](js-components-custom-events.md) + - [Props](js-components-custom-props.md) + - [事件参数](js-components-custom-event-parameter.md) + - [slot插槽](js-components-custom-slot.md) + - [生命周期定义](js-components-custom-lifecycle.md) +- 附录 + - [类型说明](js-appendix-types.md) diff --git a/zh-cn/application-dev/reference/arkui-js/figures/Video_2021-03-26_154549.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125114.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/Video_2021-03-26_154549.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125114.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tab.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125116.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/tab.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125116.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textpath-animate1.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125118.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textpath-animate1.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125118.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/text-animate-part3.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125122.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/text-animate-part3.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125122.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/animate-4.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125126.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/animate-4.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125126.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125174.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125174.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125174.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125178.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125178.png new file mode 100644 index 0000000000000000000000000000000000000000..6064f64867e3aca621244e1e6fdb16d3ab2ed748 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125178.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125180.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125180.png new file mode 100644 index 0000000000000000000000000000000000000000..7cc96f8f6364b93923f0a88b895fe6b151080932 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125180.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125184.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125184.png new file mode 100644 index 0000000000000000000000000000000000000000..ecf361e4c749446160da1e8a07169b21d99f362a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125184.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125188.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125188.png new file mode 100644 index 0000000000000000000000000000000000000000..44e4d991524bd0ef88a0dd10f204e022dd9d0621 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125188.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125190.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125190.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125190.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/animate-transform2.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125192.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/animate-transform2.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125192.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125194.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125194.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125194.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tspan-part1.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125196.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/tspan-part1.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125196.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part2.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125198.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part2.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125198.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part4.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125200.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part4.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125200.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125210.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125210.png new file mode 100644 index 0000000000000000000000000000000000000000..a59bc9cdb0f75ad79e4714d3593216021369c862 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125210.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125214.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125214.png new file mode 100644 index 0000000000000000000000000000000000000000..b3c353b6a872d3597b767f4c216b2d16bfc2139b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125214.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125216.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125216.png new file mode 100644 index 0000000000000000000000000000000000000000..664d13c38389361e61a45870899e2a6f0bfc835f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125216.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125218.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125218.png new file mode 100644 index 0000000000000000000000000000000000000000..1b0ed50716d897398c1e9a741e08ff5f1b9fd9de Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125218.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125222.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125222.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125222.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125224.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125224.png new file mode 100644 index 0000000000000000000000000000000000000000..41be1a646e14511b5d177d11a7bce10deaee5bc9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125224.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125226.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125226.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125226.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125228.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125228.png new file mode 100644 index 0000000000000000000000000000000000000000..515185ab1b3cf9aaba1204760dae19ab3c112b42 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125228.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125230.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125230.png new file mode 100644 index 0000000000000000000000000000000000000000..984e7a561e661ecefca8b60d5ac239b67f96c98c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125230.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125232.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125232.png new file mode 100644 index 0000000000000000000000000000000000000000..115cb4c96382681743381aeba099549dc24c2ae5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125232.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125234.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125234.png new file mode 100644 index 0000000000000000000000000000000000000000..af32ecea68c1cef693bcfa379af5ac28f66c1e14 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125234.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125236.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125236.png new file mode 100644 index 0000000000000000000000000000000000000000..63a8c6adc29d340634ed06a1006a0fb56c991a9d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125236.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125238.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125238.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125238.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125240.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125240.png new file mode 100644 index 0000000000000000000000000000000000000000..a9aba5f67b94427168fade014542532431e28a2e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125240.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125242.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125242.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125242.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125244.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125244.png new file mode 100644 index 0000000000000000000000000000000000000000..0d386fef5c4fa9faf1b29c7667c7392db250f2eb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125244.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125246.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125246.png new file mode 100644 index 0000000000000000000000000000000000000000..7dfc7ee8793298d19c939369ba980abd547982ff Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125246.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125248.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125248.png new file mode 100644 index 0000000000000000000000000000000000000000..4b1948de8581602c6c5879c03d68c14f06eccd00 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125248.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125250.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125250.png new file mode 100644 index 0000000000000000000000000000000000000000..5d0ae86ad14ff863511a10ecc1a85b273e826dfc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125250.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125254.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125254.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125254.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125256.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125256.png new file mode 100644 index 0000000000000000000000000000000000000000..02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125256.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125258.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125258.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a0799a203fdd7bd41fa5175585dc170a20156e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125258.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125260.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125260.png new file mode 100644 index 0000000000000000000000000000000000000000..ac66614c0f277cd722b3d090cb10efb973152b0f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125260.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125262.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125262.png new file mode 100644 index 0000000000000000000000000000000000000000..131584c72c082f40e2b466e2706c86a05df375e0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125262.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/gauge.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125264.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/gauge.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125264.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textpath-animate4.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284924.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textpath-animate4.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284924.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textPath-part4.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284930.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textPath-part4.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284930.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/sample1.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/sample1.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/GIF.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284936.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/GIF.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284936.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/animate-3.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284938.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/animate-3.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284938.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/image-animator.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284946.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/image-animator.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284946.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284968.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284968.png new file mode 100644 index 0000000000000000000000000000000000000000..c0df3f4f7d99f0b8c39995133c71d944bc07ea4b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284968.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284970.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284970.png new file mode 100644 index 0000000000000000000000000000000000000000..1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284970.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284972.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284972.png new file mode 100644 index 0000000000000000000000000000000000000000..69cb300d4bc8decee06c7fb64b03a24287865a8f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284972.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284974.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284974.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284974.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284976.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284976.png new file mode 100644 index 0000000000000000000000000000000000000000..ac0521001d2513fd69e48ce61e1d1128b9d3a6dd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284976.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/list6.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284978.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/list6.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284978.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284980.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284980.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41450db5d70f6d10d6d7bf59daba33085c177e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284980.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284982.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284982.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284982.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284990.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284990.png new file mode 100644 index 0000000000000000000000000000000000000000..4c4c304b67c398f32c5fff516cdde377ca39c73d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284990.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284992.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284992.png new file mode 100644 index 0000000000000000000000000000000000000000..6dc88e656c293c2e65939e4a793684488dfc81be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284992.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284996.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284996.png new file mode 100644 index 0000000000000000000000000000000000000000..e72165fdf1b24d80f0abde742ad3d848497c6ea7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284996.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284998.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284998.png new file mode 100644 index 0000000000000000000000000000000000000000..57594c6855d4cdf1b37cc3e5354374c9dae0823b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284998.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285000.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285000.png new file mode 100644 index 0000000000000000000000000000000000000000..c89f746719790333bce2bde8c5b8d86102fdfc33 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285000.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285002.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285002.png new file mode 100644 index 0000000000000000000000000000000000000000..8bc3583f82d21c8bec0c70b2da36ed05723fd9a7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285002.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/animate-transform.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285004.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/animate-transform.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285004.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285006.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285006.png new file mode 100644 index 0000000000000000000000000000000000000000..891d52276622fd51893634ce26e08bd56f62b782 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285006.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part1.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285008.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part1.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285008.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285010.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285010.png new file mode 100644 index 0000000000000000000000000000000000000000..8b3eec4e46f6a29dc47694940ceaef1cfa1314af Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285010.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285012.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285012.png new file mode 100644 index 0000000000000000000000000000000000000000..45467f3e6fc0866b6da0521911bdb5e7d740df29 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285012.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285014.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285014.png new file mode 100644 index 0000000000000000000000000000000000000000..8e195633945b3387c46a7d295862351d4ff1fc64 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285014.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285016.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285016.png new file mode 100644 index 0000000000000000000000000000000000000000..cbc1d312680f479e8c443476ea39eaf1e8a16e55 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285016.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285018.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285018.png new file mode 100644 index 0000000000000000000000000000000000000000..1324b43b3f5b8dd0548cf2069c4c532c5284c445 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285018.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285020.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285020.png new file mode 100644 index 0000000000000000000000000000000000000000..481c833482d38c5f564127c8f412fe3c0275fd24 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285020.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285022.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285022.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285022.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285026.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285026.png new file mode 100644 index 0000000000000000000000000000000000000000..0d53a47b7eace81d5c7da88c59fee61e30c89681 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285026.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285028.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285028.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285028.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285030.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285030.png new file mode 100644 index 0000000000000000000000000000000000000000..64fdda07447707816e8a6238939169f58a4ce58f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285030.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285032.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285032.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41c2cd90ba17798448d70b493ccceb3ac960f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285032.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285038.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285038.png new file mode 100644 index 0000000000000000000000000000000000000000..6eb2d41877c85cccfb918b042bc13c81c58ec191 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285038.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285040.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285040.png new file mode 100644 index 0000000000000000000000000000000000000000..2e7cec00f9d186d76ff5cb12d47811084217cc1c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285040.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285042.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285042.png new file mode 100644 index 0000000000000000000000000000000000000000..daa035cea33b810571c18de67e4ac887eeb11850 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285042.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285044.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285044.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285044.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285046.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285046.png new file mode 100644 index 0000000000000000000000000000000000000000..ca1edf2219980ab9c8533b9fda3219521c50533d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285046.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285048.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285048.png new file mode 100644 index 0000000000000000000000000000000000000000..bf38fe45eaf254939b88b9d2a66635408060acf7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285048.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285050.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285050.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285050.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285052.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285052.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285052.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285054.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285054.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285054.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285056.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285056.png new file mode 100644 index 0000000000000000000000000000000000000000..9114031e04fc28be59e8c9567c0fcfe81a9cc5cb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285056.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285058.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285058.png new file mode 100644 index 0000000000000000000000000000000000000000..6f085565bd8c64d44bf58ce0969557515ec7ab97 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285058.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285060.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285060.png new file mode 100644 index 0000000000000000000000000000000000000000..93825b7fe53a0794751ee4aa3ca46300c404835e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285060.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285062.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285062.png new file mode 100644 index 0000000000000000000000000000000000000000..c0b21ed6b44c2f756458137f931873f540c16e5f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285062.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285064.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285064.png new file mode 100644 index 0000000000000000000000000000000000000000..b80a6c31cdb287c35965c7841aa97711d79b371c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285064.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285066.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285066.png new file mode 100644 index 0000000000000000000000000000000000000000..bca655617699ef8dc1265bf692a3170c7effe15b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285066.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285068.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285068.png new file mode 100644 index 0000000000000000000000000000000000000000..8a5c7039b580128e75299672dc5438151dcf3572 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285068.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285070.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285070.png new file mode 100644 index 0000000000000000000000000000000000000000..12085848c0f6472d53f7e6504c1924ea6f5a44c1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285070.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/000000.jpg b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285072.jpg similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/000000.jpg rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127285072.jpg diff --git a/zh-cn/application-dev/reference/arkui-js/figures/menu13.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001131795738.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/menu13.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001131795738.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/c3.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152773860.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/c3.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152773860.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/1-3.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167662852.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/1-3.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167662852.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/3.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823076.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/3.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823076.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/4-0.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823326.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/4-0.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823326.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/4.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167846062.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/4.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167846062.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/smoothOff.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167952236.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/smoothOff.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167952236.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/6.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001168005276.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/6.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001168005276.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/5.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001168440692.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/5.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001168440692.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textPath-part1.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164775.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textPath-part1.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164775.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textpath-animate3.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164779.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textpath-animate3.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164779.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/text-animate-part2.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164783.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/text-animate-part2.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164783.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/panel6.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164785.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/panel6.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164785.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/1.jpg b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164799.jpg similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/1.jpg rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164799.jpg diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164835.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164835.png new file mode 100644 index 0000000000000000000000000000000000000000..53081e06f458cfc1772de30f669180333b8d783d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164835.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164837.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164837.png new file mode 100644 index 0000000000000000000000000000000000000000..a33c4fce8448e2127b21e277437195ce0002766b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164837.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164841.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164841.png new file mode 100644 index 0000000000000000000000000000000000000000..b234a769d1a9f1f30c4d2127160cf067e9f71ad6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164841.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164843.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164843.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca3e045717379bb09fa8d13ea0d42019bf546f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164843.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164849.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164849.png new file mode 100644 index 0000000000000000000000000000000000000000..069f570291be858a1768b75719a4a6adbd1bdef8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164849.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164851.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164851.png new file mode 100644 index 0000000000000000000000000000000000000000..c33d763d18f5108bf0eedba19c662d05af397ee9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164851.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164855.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164855.png new file mode 100644 index 0000000000000000000000000000000000000000..fe422eecde9ec9f1fcac762bd81a23b3fa3abde7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164855.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164859.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164859.gif new file mode 100644 index 0000000000000000000000000000000000000000..2ec52b162dcfdd39c2d2f5a7be4106321935b010 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164859.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part3.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164863.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/tspan-animate-part3.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164863.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164865.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164865.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164865.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164875.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164875.png new file mode 100644 index 0000000000000000000000000000000000000000..9ed54c6c5c5186fb43f24dab24f7689ae0d14a12 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164875.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164877.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164877.png new file mode 100644 index 0000000000000000000000000000000000000000..8442c9b2258c79ee6b6a3d5963df5b792bbb1a16 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164877.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164879.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164879.png new file mode 100644 index 0000000000000000000000000000000000000000..d77ed21418dc3035feb9f9c8e15815e577d71a90 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164879.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164881.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164881.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc1eadbb05520daa6d79779683db96d0afe7cbdd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164881.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164883.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164883.gif new file mode 100644 index 0000000000000000000000000000000000000000..ba4751108ff3dbaf329d80859bd0a7d371edfb86 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164883.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164885.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164885.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164885.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164887.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164887.png new file mode 100644 index 0000000000000000000000000000000000000000..ff0aa71de78cb461a6602398ee915c677efdf3d4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164887.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164889.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164889.png new file mode 100644 index 0000000000000000000000000000000000000000..04bcf099edface801be6074a33ff33a980c9b606 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164889.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164893.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164893.png new file mode 100644 index 0000000000000000000000000000000000000000..00767e63c899eec52c2c732e834bca8d26d348ce Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164893.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164895.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164895.png new file mode 100644 index 0000000000000000000000000000000000000000..7983d590a2c617c6cad68c90af6b12aa17518810 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164895.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164897.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164897.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac129028e67b43fcae8e3d5c1a539cc45ba6d21 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164897.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164899.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164899.png new file mode 100644 index 0000000000000000000000000000000000000000..800bf296338fd01962f16a8863c37bfe515ce3be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164899.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164901.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164901.png new file mode 100644 index 0000000000000000000000000000000000000000..d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164901.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164905.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164905.png new file mode 100644 index 0000000000000000000000000000000000000000..c88212b6818d6d18c77ee497cfcafaf661a70d52 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164905.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164907.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164907.png new file mode 100644 index 0000000000000000000000000000000000000000..6a64534a0a867d44cf81c8a34c9981b5fbaf5faf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164907.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164909.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164909.png new file mode 100644 index 0000000000000000000000000000000000000000..6d795f1618b1546c94266548069eccf9e9af2e01 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164909.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164911.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164911.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164911.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164913.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164913.png new file mode 100644 index 0000000000000000000000000000000000000000..d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164913.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164915.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164915.png new file mode 100644 index 0000000000000000000000000000000000000000..87915df37741dacfe9448bfebccf5a88d3ca2a76 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164915.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164917.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164917.png new file mode 100644 index 0000000000000000000000000000000000000000..bdb02fdda28a155e2f622eeea2ff820144780e50 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164917.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164921.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164921.png new file mode 100644 index 0000000000000000000000000000000000000000..39cf9d01563cf63bee003a47cd88258e860a0757 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164921.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164923.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164923.png new file mode 100644 index 0000000000000000000000000000000000000000..f89e20a55ba1e81f2cbda2bd0241edefadbe7149 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164923.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164925.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164925.png new file mode 100644 index 0000000000000000000000000000000000000000..a68e61ab120651294310c5e3632ce22d71917a52 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164925.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/screenshot.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164927.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/screenshot.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164927.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/barchart.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164929.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/barchart.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164929.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textPath-part3.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324689.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textPath-part3.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324689.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textPath-part2.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324691.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textPath-part2.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324691.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/textpath-animate2.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324693.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/textpath-animate2.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324693.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/text-part1.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324697.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/text-part1.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324697.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/text-animate-part1.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324699.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/text-animate-part1.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324699.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/animate-1.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324703.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/animate-1.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324703.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/slider.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324709.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/slider.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324709.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324729.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324729.png new file mode 100644 index 0000000000000000000000000000000000000000..c25a692065d473ccf9f5b6d36254787e2497fad6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324729.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324731.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324731.png new file mode 100644 index 0000000000000000000000000000000000000000..283cf90b3828b36af6fb3a746e806f6715053310 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324731.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324733.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324733.png new file mode 100644 index 0000000000000000000000000000000000000000..858c4187d3a2874f651adc09dcae9a32f8407d86 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324733.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324735.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324735.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324735.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324737.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324737.png new file mode 100644 index 0000000000000000000000000000000000000000..e863d7a1c3b9c1ca08bd182dce43c55a4866d59b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324737.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324739.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324739.png new file mode 100644 index 0000000000000000000000000000000000000000..486baf6be50982404fd1c68a5bc51db45c62046a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324739.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324741.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324741.png new file mode 100644 index 0000000000000000000000000000000000000000..93299fc38d761e5251673210c364f6825e319153 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324741.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324743.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324743.png new file mode 100644 index 0000000000000000000000000000000000000000..0491d350277cd67d7774e3761164b9dd7038a117 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324743.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324745.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324745.png new file mode 100644 index 0000000000000000000000000000000000000000..b780eb08852e8916ec6ff1a401ea6946c8d727cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324745.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324747.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324747.png new file mode 100644 index 0000000000000000000000000000000000000000..b162dbf0a6c890a03ea1aa0b28bdb454651b697c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324747.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324755.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324755.png new file mode 100644 index 0000000000000000000000000000000000000000..454b1796715794d51e2a1a4649bfafa1bfde80f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324755.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324757.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324757.png new file mode 100644 index 0000000000000000000000000000000000000000..a618da21cf6c6d32066286e594921c0fc75b5dba Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324757.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324759.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324759.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324759.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324761.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324761.png new file mode 100644 index 0000000000000000000000000000000000000000..91a276a7dffb4d98c507e9af6afa1912cca1fed2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324761.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/animate-transform3.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324765.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/animate-transform3.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324765.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324767.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324767.png new file mode 100644 index 0000000000000000000000000000000000000000..6348bb2b6ee281976f7d58159e4c33db29f542ad Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324767.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324769.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324769.png new file mode 100644 index 0000000000000000000000000000000000000000..1821f9c40ad9d24dc10dc662ecbe7936c9e10633 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324769.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324771.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324771.png new file mode 100644 index 0000000000000000000000000000000000000000..5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324771.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324773.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324773.png new file mode 100644 index 0000000000000000000000000000000000000000..21f20a4220aabf9449c707291633e7b3723fe378 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324773.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324775.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324775.png new file mode 100644 index 0000000000000000000000000000000000000000..adca00e684afb79ff4f21313d0586025576a8be1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324775.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324777.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324777.png new file mode 100644 index 0000000000000000000000000000000000000000..c952585d8032733700b57ce1a919d71ce9a4b58b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324777.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324779.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324779.png new file mode 100644 index 0000000000000000000000000000000000000000..848454297b67eb73ab641424badc438433e24479 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324779.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324781.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324781.png new file mode 100644 index 0000000000000000000000000000000000000000..3621ef6876dbd1103487aed8ff190e6a0204ffde Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324781.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324785.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324785.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5fe69b5a5a62b2d2b719b2be0a17a501363918 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324785.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324789.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324789.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324789.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324793.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324793.png new file mode 100644 index 0000000000000000000000000000000000000000..56db1024a714f821528656c64e12520311bae8f5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324793.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324795.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324795.png new file mode 100644 index 0000000000000000000000000000000000000000..d87462d1cdc9410e91ee050a53d58e71d1c5f312 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324795.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324799.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324799.png new file mode 100644 index 0000000000000000000000000000000000000000..6f929d8ab35b708978d8053047cb56bec4fa83bc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324799.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324801.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324801.png new file mode 100644 index 0000000000000000000000000000000000000000..3fca22c329e9dc9ef73eee20757eac4ce7386842 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324801.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324803.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324803.png new file mode 100644 index 0000000000000000000000000000000000000000..378000d344e90ab4db41869a4612daf6b60d66ab Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324803.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324805.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324805.png new file mode 100644 index 0000000000000000000000000000000000000000..f89943fc98661a6d2b78b5659c41483308a0c54b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324805.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324807.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324807.png new file mode 100644 index 0000000000000000000000000000000000000000..d1ca7dd07fe7812ec1f87bf748595174569a5672 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324807.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324809.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324809.png new file mode 100644 index 0000000000000000000000000000000000000000..5b22707e37ec772dc08a961e557a937862210167 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324809.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324811.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324811.png new file mode 100644 index 0000000000000000000000000000000000000000..3026d3c195598159232b4b1f08e9f198f4b4fa2c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324811.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324813.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324813.png new file mode 100644 index 0000000000000000000000000000000000000000..51fb00e10bb5c167506ddfae1689b58e368df340 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324813.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324815.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324815.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324815.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324817.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324817.png new file mode 100644 index 0000000000000000000000000000000000000000..04ab7decab16cb7341665c2a67e8d5655a7eed6a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324817.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324821.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324821.png new file mode 100644 index 0000000000000000000000000000000000000000..db83d39f98583ee653ee39b0237eb55961e539c7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324821.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324823.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324823.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324823.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324825.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324825.png new file mode 100644 index 0000000000000000000000000000000000000000..7cfd4846ca697424582edbfed23ed93ef9e98138 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324825.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324829.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324829.png new file mode 100644 index 0000000000000000000000000000000000000000..6315d4654d04dd6b9b295fa1f8b37e8c550b17cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324829.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324831.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324831.png new file mode 100644 index 0000000000000000000000000000000000000000..1e0bad2b2bfed2559e53a8bc21162e6163ec8434 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324831.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324833.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324833.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324833.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324835.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324835.png new file mode 100644 index 0000000000000000000000000000000000000000..26f2f228b47b8acb8adcddc3abf9156d6c29364e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324835.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324837.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324837.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324837.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324839.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324839.png new file mode 100644 index 0000000000000000000000000000000000000000..639f16f8aaf261176b3bc760c2eb616ad2f4aa28 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324839.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/sssssss.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324845.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/sssssss.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324845.png diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\346\215\225\350\216\267.png" b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001177265268.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\346\215\225\350\216\267.png" rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001177265268.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/11-1.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001177428498.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/11-1.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001177428498.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179981036.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179981036.gif new file mode 100644 index 0000000000000000000000000000000000000000..53e718c2879554c82d4a3d9800507a00e37613dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179981036.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180134670.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180134670.gif new file mode 100644 index 0000000000000000000000000000000000000000..bd5fea51c64deb1268793f3a3f70a2c379aebfda Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180134670.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/progress.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180339632.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/progress.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180339632.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/001.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180658376.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/001.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001180658376.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/list.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001185033226.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/list.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001185033226.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001188551432.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001188551432.png new file mode 100644 index 0000000000000000000000000000000000000000..7933730b5753d05a6f5734cb3d7ebb39aeb5f173 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001188551432.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001188711340.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001188711340.png new file mode 100644 index 0000000000000000000000000000000000000000..994f8510b56d1f66d8a40dbd0349ca61baf242cb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001188711340.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/222.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001189854534.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/222.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001189854534.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/111.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001190934502.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/111.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001190934502.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mmmm.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001191939702.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/mmmm.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001191939702.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/grid.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001192960596.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/grid.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001192960596.gif diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001193544358.gif similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001193544358.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/1-2.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001198530395.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/1-2.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001198530395.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001198898293.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001207995958.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001198898293.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001207995958.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324749.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001208155956.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324749.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001208155956.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324751.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001208315918.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324751.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001208315918.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/0.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001212053183.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/0.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001212053183.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/2.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213103299.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/2.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213103299.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/11.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213276619.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/11.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213276619.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/9.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213284927.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/9.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213284927.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/2-4.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213381209.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/2-4.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213381209.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/22.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213396721.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/22.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213396721.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/ellipse.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214823665.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/ellipse.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214823665.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/12.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001222948301.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/12.gif rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001222948301.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224225943.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224225943.gif new file mode 100644 index 0000000000000000000000000000000000000000..e64a81a267d1cb0f6f216caa7cefe75020850e75 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224225943.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001225204601.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001225204601.gif new file mode 100644 index 0000000000000000000000000000000000000000..2215e5cfa56f533c6b4d1318b2fa1fb07093dfaa Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001225204601.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001225418523.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001225418523.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b6df4b26274fdf5c3e6e1fab2423400455b7050 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001225418523.gif differ diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/AnimationAPI\350\243\201\345\211\252.gif" b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001229677045.gif similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/AnimationAPI\350\243\201\345\211\252.gif" rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001229677045.gif diff --git a/zh-cn/application-dev/reference/arkui-js/figures/333.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001236694521.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/333.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001236694521.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/444.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001237134475.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/444.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001237134475.png diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\345\205\261\344\272\253\345\205\203\347\264\240\350\275\254\345\234\272\351\273\230\350\256\244\346\225\210\346\236\234.png" b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001238424309.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\345\205\261\344\272\253\345\205\203\347\264\240\350\275\254\345\234\272\351\273\230\350\256\244\346\225\210\346\236\234.png" rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001238424309.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284984.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001252835901.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284984.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001252835901.png diff --git a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md index 48589bfa9b3bf27a18c47763a4ca587f169ad670..eaec4b89c7e510cad40d6af970f59cbb0f051052 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md +++ b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md @@ -2,1094 +2,166 @@ ## 长度类型 - - - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

length

-

string | number

-

用于描述尺寸单位,输入为number类型时,使用px单位;输入为string类型时,需要显式指定像素单位,当前支持的像素单位有:

-
  • px:逻辑尺寸单位。
  • fp6+:字体尺寸单位,会随系统字体大小设置发生变化,仅支持文本类组件设置相应的字体大小。
-

percentage

-

string

-

百分比尺寸单位,如“50%”。

-
+| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| length | string \| number | 用于描述尺寸单位,输入为number类型时,使用px单位;输入为string类型时,需要显式指定像素单位,当前支持的像素单位有:
- px:逻辑尺寸单位。
- fp6+:字体尺寸单位,会随系统字体大小设置发生变化,仅支持文本类组件设置相应的字体大小。 | +| percentage | string | 百分比尺寸单位,如“50%”。 | + ## 颜色类型 - - - - - - - - - - -

名称

-

类型定义

-

描述

-

color

-

string | 颜色枚举字符串

-

用于描述颜色信息。

-
字符串格式如下:
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • HEX格式:'#rrggbb','#aarrggbb'
  • 枚举格式:'black','white'。
    说明:

    JS脚本中不支持颜色枚举格式。

    -
    -
-
-
+| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| color | string \|颜色枚举字符串 | 用于描述颜色信息。
字符串格式如下:
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- HEX格式:'\#rrggbb','\#aarrggbb'
- 枚举格式:'black','white'。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > JS脚本中不支持颜色枚举格式。 | -**表 1** 当前支持的颜色枚举 +**表1** 当前支持的颜色枚举 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

枚举名称

-

对应颜色

-

颜色

-

aliceblue

-

#f0f8ff

-

-

antiquewhite

-

#faebd7

-

-

aqua

-

#00ffff

-

-

aquamarine

-

#7fffd4

-

-

azure

-

#f0ffff

-

-

beige

-

#f5f5dc

-

-

bisque

-

#ffe4c4

-

-

black

-

#000000

-

-

blanchedalmond

-

#ffebcd

-

-

blue

-

#0000ff

-

-

blueviolet

-

#8a2be2

-

-

brown

-

#a52a2a

-

-

burlywood

-

#deB887

-

-

cadetblue

-

#5f9ea0

-

-

chartreuse

-

#7fff00

-

-

chocolate

-

#d2691e

-

-

coral

-

#ff7f50

-

-

cornflowerblue

-

#6495ed

-

-

cornsilk

-

#fff8dc

-

-

crimson

-

#dc143c

-

-

cyan

-

#00ffff

-

-

darkblue

-

#00008b

-

-

darkcyan

-

#008b8b

-

-

darkgoldenrod

-

#b8860b

-

-

darkgray

-

#a9a9a9

-

-

darkgreen

-

#006400

-

-

darkgrey

-

#a9a9a9

-

-

darkkhaki

-

#bdb76b

-

-

darkmagenta

-

#8b008b

-

-

darkolivegreen

-

#556b2f

-

-

darkorange

-

#ff8c00

-

-

darkorchid

-

#9932cc

-

-

darkred

-

#8b0000

-

-

darksalmon

-

#e9967a

-

-

darkseagreen

-

#8fbc8f

-

-

darkslateblue

-

#483d8b

-

-

darkslategray

-

#2f4f4f

-

-

darkslategrey

-

#2f4f4f

-

-

darkturquoise

-

#00ced1

-

-

darkviolet

-

#9400d3

-

-

deeppink

-

#ff1493

-

-

deepskyblue

-

#00bfff

-

-

dimgray

-

#696969

-

-

dimgrey

-

#696969

-

-

dodgerblue

-

#1e90ff

-

-

firebrick

-

#b22222

-

-

floralwhite

-

#fffaf0

-

-

forestgreen

-

#228b22

-

-

fuchsia

-

#ff00ff

-

-

gainsboro

-

#dcdcdc

-

-

ghostwhite

-

#f8f8ff

-

-

gold

-

#ffd700

-

-

goldenrod

-

#daa520

-

-

gray

-

#808080

-

-

green

-

#008000

-

-

greenyellow

-

#adff2f

-

-

grey

-

#808080

-

-

honeydew

-

#f0fff0

-

-

hotpink

-

#ff69b4

-

-

indianred

-

#cd5c5c

-

-

indigo

-

#4b0082

-

-

ivory

-

#fffff0

-

-

khaki

-

#f0e68c

-

-

lavender

-

#e6e6fa

-

-

lavenderblush

-

#fff0f5

-

-

lawngreen

-

#7cfc00

-

-

lemonchiffon

-

#fffacd

-

-

lightblue

-

#add8e6

-

-

lightcoral

-

#f08080

-

-

lightcyan

-

#e0ffff

-

-

lightgoldenrodyellow

-

#fafad2

-

-

lightgray

-

#d3d3d3

-

-

lightgreen

-

#90ee90

-

-

lightpink

-

#ffb6c1

-

-

lightsalmon

-

#ffa07a

-

-

lightseagreen

-

#20b2aa

-

-

lightskyblue

-

#87cefa

-

-

lightslategray

-

#778899

-

-

lightslategrey

-

#778899

-

-

lightsteelblue

-

#b0c4de

-

-

lightyellow

-

#ffffe0

-

-

lime

-

#00ff00

-

-

limegreen

-

#32cd32

-

-

linen

-

#faf0e6

-

-

magenta

-

#ff00ff

-

-

maroon

-

#800000

-

-

mediumaquamarine

-

#66cdaa

-

-

mediumblue

-

#0000cd

-

-

mediumorchid

-

#ba55d3

-

-

mediumpurple

-

#9370db

-

-

mediumseagreen

-

#3cb371

-

-

mediumslateblue

-

#7b68ee

-

-

mediumspringgreen

-

#00fa9a

-

-

mediumturquoise

-

#48d1cc

-

-

mediumvioletred

-

#c71585

-

-

midnightblue

-

#191970

-

-

mintcream

-

#f5fffa

-

-

mistyrose

-

#ffe4e1

-

-

moccasin

-

#ffe4b5

-

-

navajowhite

-

#ffdead

-

-

navy

-

#000080

-

-

oldlace

-

#fdf5e6

-

-

olive

-

#808000

-

-

olivedrab

-

#6b8e23

-

-

orange

-

#ffa500

-

-

orangered

-

#ff4500

-

-

orchid

-

#da70d6

-

-

palegoldenrod

-

#eee8aa

-

-

palegreen

-

#98fb98

-

-

paleturquoise

-

#afeeee

-

-

palevioletred

-

#db7093

-

-

papayawhip

-

#ffefd5

-

-

peachpuff

-

#ffdab9

-

-

peru

-

#cd853f

-

-

pink

-

#ffc0cb

-

-

plum

-

#dda0dd

-

-

powderblue

-

#b0e0e6

-

-

purple

-

#800080

-

-

rebeccapurple

-

#663399

-

-

red

-

#ff0000

-

-

rosybrown

-

#bc8f8f

-

-

royalblue

-

#4169e1

-

-

saddlebrown

-

#8b4513

-

-

salmon

-

#fa8072

-

-

sandybrown

-

#f4a460

-

-

seagreen

-

#2e8b57

-

-

seashell

-

#fff5ee

-

-

sienna

-

#a0522d

-

-

silver

-

#c0c0c0

-

-

skyblue

-

#87ceeb

-

-

slateblue

-

#6a5acd

-

-

slategray

-

#708090

-

-

slategrey

-

#708090

-

-

snow

-

#fffafa

-

-

springgreen

-

#00ff7f

-

-

steelblue

-

#4682b4

-

-

tan

-

#d2b48c

-

-

teal

-

#008080

-

-

thistle

-

#d8Bfd8

-

-

tomato

-

#ff6347

-

-

turquoise

-

#40e0d0

-

-

violet

-

#ee82ee

-

-

wheat

-

#f5deb3

-

-

white

-

#ffffff

-

-

whitesmoke

-

#f5f5f5

-

-

yellow

-

#ffff00

-

-

yellowgreen

-

#9acd32

-

-
+| 枚举名称 | 对应颜色 | 颜色 | +| -------- | -------- | -------- | +| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) | +| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) | +| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) | +| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) | +| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) | +| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) | +| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) | +| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) | +| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) | +| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) | +| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) | +| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) | +| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) | +| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) | +| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) | +| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) | +| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) | +| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) | +| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) | +| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) | +| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) | +| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) | +| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) | +| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) | +| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) | +| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) | +| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) | +| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) | +| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) | +| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) | +| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) | +| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) | +| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) | +| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) | +| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) | +| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) | +| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) | +| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) | +| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) | +| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) | +| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) | +| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) | +| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) | +| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) | +| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) | +| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) | +| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) | +| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) | +| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) | +| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) | +| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) | +| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) | +| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) | +| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) | +| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) | +| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) | +| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) | +| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) | +| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) | +| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) | +| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) | +| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) | +| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) | +| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) | +| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) | +| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) | +| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) | +| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) | +| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) | +| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) | +| lightgoldenrodyellow | \#fafad2 | ![zh-cn_image_0000001127125218](figures/zh-cn_image_0000001127125218.png) | +| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) | +| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) | +| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) | +| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) | +| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) | +| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) | +| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) | +| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) | +| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) | +| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) | +| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) | +| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) | +| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) | +| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) | +| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) | +| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) | +| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) | +| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) | +| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) | +| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) | +| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) | +| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) | +| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) | +| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) | +| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) | +| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) | +| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) | +| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) | +| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) | +| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) | +| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) | +| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) | +| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) | +| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) | +| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) | +| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) | +| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) | +| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) | +| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) | +| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) | +| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) | +| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) | +| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) | +| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) | +| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) | +| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) | +| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) | +| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) | +| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) | +| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) | +| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) | +| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) | +| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) | +| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) | +| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) | +| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) | +| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) | +| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) | +| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) | +| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) | +| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) | +| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) | +| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) | +| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) | +| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) | +| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) | +| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) | +| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) | +| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) | +| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) | +| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) | +| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) | +| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) | +| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) | +| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) | +| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) | diff --git a/zh-cn/application-dev/reference/arkui-js/js-appendix.md b/zh-cn/application-dev/reference/arkui-js/js-appendix.md index 3c0b115e1f6a55aefbb33006a93dd611e8ff3a34..064f8f5fd18317e708c5f5834ba3c79599707168 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-appendix.md +++ b/zh-cn/application-dev/reference/arkui-js/js-appendix.md @@ -1,4 +1,5 @@ # 附录 -- **[类型说明](js-appendix-types.md)** + +- **[类型说明](js-appendix-types.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md index d763b53429b03e67322337b3039ba60aa127da9b..2470492c22ed4bfcbf86f4011e230e13dd2dfa27 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md @@ -1,334 +1,86 @@ -# button +# button + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 提供按钮组件,包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

-

-

-

不支持动态修改。如果该属性缺省,展示类胶囊型按钮,不同于胶囊类型,四边圆角可以通过border-radius分别指定,如果需要设置该属性,则可选值包括如下:

-
  • capsule:胶囊型按钮,带圆角按钮,有背景色和文本;
  • circle:圆形按钮,支持放置图标;
  • text:文本按钮,仅包含文本显示;
  • arc:弧形按钮,仅支持智能穿戴;
  • download:下载按钮,额外增加下载进度条功能,仅支持手机和智慧屏。
-

value

-

string

-

-

-

-

button的文本值。

-

icon

-

string

-

-

-

-

button的图标路径,图标格式为jpg,png和svg。

-

placement5+

-

string

-

end

-

-

仅在type属性为缺省时生效,设置图标位于文本的位置,可选值为:

-
  • start:图标位于文本起始处;
  • end:图标位于文本结束处;
  • top:图标位于文本上方;
  • bottom:图标位于文本下方。
-

waiting

-

boolean

-

false

-

-

waiting状态,waiting为true时展现等待中转圈效果,位于文本左侧。类型为download时不生效,不支持智能穿戴。

-
- -## 样式 - -### type设置为非arc - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

#ff007dff

-

-

按钮的文本颜色。

-

font-size

-

<length>

-

16px

-

-

按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

-

按钮的字体样式。

-

font-weight

-

number | string

-

normal

-

-

按钮的字体粗细。见text组件font-weight的样式属性

-

font-family

-

<string>

-

sans-serif

-

-

按钮的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

icon-width

-

<length>

-

-

-

-

设置圆形按钮内部图标的宽,默认填满整个圆形按钮。

-
说明:

icon使用svg图源时必须设置该样式。

-
-

icon-height

-

<length>

-

-

-

-

设置圆形按钮内部图标的高,默认填满整个圆形按钮。

-
说明:

icon使用svg图源时必须设置该样式。

-
-

radius

-

<length>

-

-

-

-

按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 胶囊按钮(type=capsule)时,不支持border相关样式; ->- 圆形按钮(type=circle)时,不支持文本相关样式; ->- 文本按钮(type=text)时,自适应文本大小,不支持尺寸设置(radius,width,height),背景透明不支持background-color样式。 - -### type设置为arc - -除支持[通用样式](js-components-common-styles.md)中background-color、opacity、display、visibility、position、\[left|top|right|bottom外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

#de0000

-

-

弧形按钮的文本颜色。

-

font-size

-

<length>

-

37.5px

-

-

弧形按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-

font-style

-

string

-

normal

-

-

弧形按钮的字体样式。

-

font-weight

-

number | string

-

normal

-

-

弧形按钮的字体粗细。见text组件font-weight的样式属性

-

font-family

-

<string>

-

sans-serif

-

-

按钮的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- -## 事件 - -支持[通用事件](js-components-common-events.md)。 - -## 方法 - -支持[通用方法](js-components-common-methods.md)。 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | - | 否 | 不支持动态修改。如果该属性缺省,展示类胶囊型按钮,不同于胶囊类型,四边圆角可以通过border-radius分别指定,如果需要设置该属性,则可选值包括如下:
- capsule:胶囊型按钮,带圆角按钮,有背景色和文本;
- circle:圆形按钮,支持放置图标;
- text:文本按钮,仅包含文本显示;
- arc:弧形按钮,仅支持智能穿戴;
- download:下载按钮,额外增加下载进度条功能。 | +| value | string | - | 否 | button的文本值。 | +| icon | string | - | 否 | button的图标路径,图标格式为jpg,png和svg。 | +| placement5+ | string | end | 否 | 仅在type属性为缺省时生效,设置图标位于文本的位置,可选值为:
- start:图标位于文本起始处;
- end:图标位于文本结束处;
- top:图标位于文本上方;
- bottom:图标位于文本下方。 | +| waiting | boolean | false | 否 | waiting状态,waiting为true时展现等待中转圈效果,位于文本左侧。类型为download时不生效。 | + + +## 样式 + + +### type设置为非arc + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| text-color | <color> | \#ff007dff
| 否 | 按钮的文本颜色。 | +| font-size | <length> | 16px
| 否 | 按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| font-style | string | normal | 否 | 按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 按钮的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽,默认填满整个圆形按钮。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> icon使用svg图源时必须设置该样式。 | +| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高,默认填满整个圆形按钮。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> icon使用svg图源时必须设置该样式。 | +| radius | <length> | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 胶囊按钮(type=capsule)时,不支持border相关样式; +> +> - 圆形按钮(type=circle)时,不支持文本相关样式; +> +> - 文本按钮(type=text)时,自适应文本大小,不支持尺寸设置(radius,width,height),背景透明不支持background-color样式。 + + +### type设置为arc + +除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| text-color | <color> | \#de0000 | 否 | 弧形按钮的文本颜色。 | +| font-size | <length> | 37.5px | 否 | 弧形按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | +| font-style | string | normal | 否 | 弧形按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 按钮的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + + +## 事件 + +支持[通用事件](../arkui-js/js-components-common-events.md)。 + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 类型为download时,支持如下方法: - - - - - - - - - - -

名称

-

参数

-

描述

-

setProgress

-

{ progress:percent }

-

设定下载按钮进度条进度,取值位于0-100区间内,当设置的值大于0时,下载按钮展现进度条。当设置的值大于等于100时,取消进度条显示。

-
说明:

浮在进度条上的文字通过value值进行变更。

-
-
- -## 示例 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| setProgress | { progress:percent } | 设定下载按钮进度条进度,取值位于0-100区间内,当设置的值大于0时,下载按钮展现进度条。当设置的值大于等于100时,取消进度条显示。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 浮在进度条上的文字通过value值进行变更。 | + +## 示例 ``` @@ -403,5 +155,4 @@ export default { } ``` -![](figures/zh-cn_image_0000001127125132.png) - +![zh-cn_image_0000001127125132](figures/zh-cn_image_0000001127125132.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md index f9befe5cf7115b7226ca278d090f18009e0ccf25..dcde8ec5c94c414b88680deed4fda54ef7d0633f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -1,1150 +1,354 @@ -# chart +# chart + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 图表组件,用于呈现线形图、柱状图、量规图界面。 -## 权限列表 +## 权限列表 无 -## 子组件 - -不支持。 - -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

line

-

-

设置图表类型(不支持动态修改),可选项有:

-
  • bar:柱状图。
  • line:线形图。
  • gauge:量规图。
  • progress5+:进度类圆形图表。
  • loading5+:加载类圆形图表。
  • rainbow5+:占比类圆形图表。
-

options

-

ChartOptions

-

-

-

-

图表参数设置,柱状图和线形图必须设置参数设置,量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示,线条宽度、是否平滑等。(不支持动态修改)

-

datasets

-

Array<ChartDataset>

-

-

-

-

数据集合,柱状图和线形图必须设置数据集合,量规图不生效。可以设置多条数据集及其背景色。

-

segments5+

-

DataSegment | Array<DataSegment>

-

-

-

-

进度类、加载类和占比类圆形图表使用的数据结构。

-

DataSegment针对进度类和加载类圆形图表使用,

-

Array<DataSegment>针对占比类图标使用,DataSegment最多9个。

-
说明:

仅手机和平板设备支持。

-
-

effects5+

-

boolean

-

true

-

-

是否开启占比类、进度类圆形图表特效。

-
说明:

仅手机和平板设备支持。

-
-

animationduration6+

-

number

-

3000

-

-

设置占比类圆形图表展开动画时长,单位为ms。

-
说明:

仅手机和平板设备支持。

-
-
- -**表 1** ChartOptions - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

xAxis

-

ChartAxis

-

-

-

-

x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。

-

yAxis

-

ChartAxis

-

-

-

-

y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。

-

series

-

ChartSeries

-

-

-

-

数据序列参数设置。可以设置1)线的样式,如线宽、是否平滑;2)设置线最前端位置白点的样式和大小。

-
说明:

仅线形图支持。

-
-
- -**表 2** ChartDataset - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

strokeColor

-

<color>

-

#ff6384

-

-

线条颜色。

-
说明:

仅线形图支持。

-
-

fillColor

-

<color>

-

#ff6384

-

-

填充颜色。线形图表示填充的渐变颜色。

-

data

-

Array<number> | Array<Point>5+

-

-

-

-

设置绘制线或柱中的点集。

-

gradient

-

boolean

-

false

-

-

设置是否显示填充渐变颜色。

-
说明:

仅线形图支持。

-
-
- -**表 3** ChartAxis - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

min

-

number

-

0

-

-

轴的最小值。

-
说明:

仅线形图支持负数。

-
-

max

-

number

-

100

-

-

轴的最大值。

-
说明:

仅线形图支持负数。

-
-

axisTick

-

number

-

10

-

-

轴显示的刻度数量。

-
说明:

仅支持1~20,且具体显示的效果与如下计算值有关(图的宽度所占的像素/(max-min))。

-

在柱状图中,每组数据显示的柱子数量与刻度数量一致,且柱子显示在刻度处。

-
-

display

-

boolean

-

false

-

-

是否显示轴。

-

color

-

<color>

-

#c0c0c0

-

-

轴颜色。

-
-**表 4** ChartSeries +## 子组件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

lineStyle

-

ChartLineStyle

-

-

-

-

线样式设置,如线宽、是否平滑。

-

headPoint

-

PointStyle

-

-

-

-

线最前端位置白点的样式和大小。

-

topPoint

-

PointStyle

-

-

-

-

最高点的样式和大小。

-

bottomPoint

-

PointStyle

-

-

-

-

最低点的样式和大小。

-

loop

-

ChartLoop

-

-

-

-

设置屏幕显示满时,是否需要重头开始绘制。

-
- -**表 5** ChartLineStyle - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length>

-

1px

-

-

线宽设置。

-

smooth

-

boolean

-

false

-

-

是否平滑。

-
- -**表 6** PointStyle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

shape

-

string

-

circle

-

-

高亮点的形状。可选值为:

-
  • circle:圆形。
  • square:方形。
  • triangle:三角形。
-

size

-

<length>

-

5px

-

-

高亮点的大小。

-

strokeWidth

-

<length>

-

1px

-

-

边框宽度

-

strokeColor

-

<color>

-

#ff0000

-

-

边框颜色。

-

fillColor

-

<color>

-

#ff0000

-

-

填充颜色。

-
- -**表 7** ChartLoop - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

margin

-

<length>

-

1

-

-

擦除点的个数(最新绘制的点与最老的点之间的横向距离)。注意:轻量设备margin和topPoint/bottomPoint/headPoint同时使用时,有概率出现point正好位于擦除区域的情况,导致point不可见,因此不建议同时使用。

-

gradient

-

boolean

-

false

-

-

是否需要渐变擦除。

-
- -**表 8** Point5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

number

-

0

-

-

表示绘制点的Y轴坐标。

-

pointStyle

-

PointStyle

-

-

-

-

表示当前数据点的绘制样式。

-

description

-

string

-

-

-

-

表示当前点的注释内容。

-

textLocation

-

string

-

-

-

-

可选值为top,bottom,none。分别表示注释的绘制位置位于点的上方,下方,以及不绘制。

-

textColor

-

<color>

-

#000000

-

-

表示注释文字的颜色。

-

lineDash

-

string

-

solid

-

-

表示绘制当前线段虚线的样式。“dashed, 5, 5”表示纯虚线,绘制5px的实线后留5px的空白。“solid”表示绘制实线。

-

lineColor

-

<color>

-

#000000

-

-

表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。

-
- -**表 9** DataSegment5+ +不支持。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

startColor

-

Color

-

-

-

-

起始位置的颜色,设置startColor必须设置endColor。不设置startColor时,会使用系统默认预置的颜色数组,具体颜色值见下表。

-

endColor

-

Color

-

-

-

-

终止位置的颜色,设置endColor必须设置startColor。

-

不设置startColor时,会使用系统默认预置的颜色数组。

-

value

-

number

-

0

-

-

占比数据的所占份额,最大100。

-

name

-

string

-

-

-

-

此类数据的名称。

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

数据组

-

浅色主题

-

深色主题

-

0

-

起始颜色:#f7ce00,结束颜色:#f99b11

-

起始颜色:#d1a738,结束颜色:#eb933d

-

1

-

起始颜色:#f76223,结束颜色:#f2400a

-

起始颜色:#e67d50,结束颜色:#d9542b

-

2

-

起始颜色:#f772ac,结束颜色:#e65392

-

起始颜色:#d5749e,结束颜色:#d6568d

-

3

-

起始颜色:#a575eb,结束颜色:#a12df7

-

起始颜色:#9973d1,结束颜色:#5552d9

-

4

-

起始颜色:#7b79f7,结束颜色:#4b48f7

-

起始颜色:#7977d9,结束颜色:#f99b11

-

5

-

起始颜色:#4b8af3,结束颜色:#007dff

-

起始颜色:#4c81d9,结束颜色:#217bd9

-

6

-

起始颜色:#73c1e6,结束颜色:#4fb4e3

-

起始颜色:#5ea6d1,结束颜色:#4895c2

-

7

-

起始颜色:#a5d61d,结束颜色:#69d14f

-

起始颜色:#91c23a,结束颜色:#70ba5d

-

8

-

起始颜色:#a2a2b0,结束颜色:#8e8e93

-

起始颜色:#8c8c99,结束颜色:#6b6b76

-
+## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | line | 否 | 设置图表类型(不支持动态修改),可选项有:
- bar:柱状图。
- line:线形图。
- gauge:量规图。
- progress5+:进度类圆形图表。
- loading5+:加载类圆形图表。
- rainbow5+:占比类圆形图表。 | +| options | ChartOptions | - | 否 | 图表参数设置,柱状图和线形图必须设置参数设置,量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示,线条宽度、是否平滑等。(不支持动态修改) | +| datasets | Array<ChartDataset> | - | 否 | 数据集合,柱状图和线形图必须设置数据集合,量规图不生效。可以设置多条数据集及其背景色。 | +| segments5+ | DataSegment \| Array<DataSegment> | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用,
Array<DataSegment>针对占比类图标使用,DataSegment最多9个。 | +| effects5+ | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | +| animationduration6+ | number | 3000 | 否 | 设置占比类圆形图表展开动画时长,单位为ms。 | + +**表1** ChartOptions + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | +| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | +| series | ChartSeries | - | 否 | 数据序列参数设置。可以设置1)线的样式,如线宽、是否平滑;2)设置线最前端位置白点的样式和大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅线形图支持。 | + +**表2** ChartDataset + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| strokeColor | <color> | \#ff6384 | 否 | 线条颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅线形图支持。 | +| fillColor | <color> | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 | +| data | Array<number> \| Array<Point>5+ | - | 是 | 设置绘制线或柱中的点集。 | +| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅线形图支持。 | + +**表3** ChartAxis + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| min | number | 0 | 否 | 轴的最小值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅线形图支持负数。 | +| max | number | 100 | 否 | 轴的最大值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅线形图支持负数。 | +| axisTick | number | 10 | 否 | 轴显示的刻度数量。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅支持1~20,且具体显示的效果与如下计算值有关(图的宽度所占的像素/(max-min))。
> 在柱状图中,每组数据显示的柱子数量与刻度数量一致,且柱子显示在刻度处。 | +| display | boolean | false | 否 | 是否显示轴。 | +| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | + +**表4** ChartSeries + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| lineStyle | ChartLineStyle | - | 否 | 线样式设置,如线宽、是否平滑。 | +| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | +| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | +| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | +| loop | ChartLoop | - | 否 | 设置屏幕显示满时,是否需要重头开始绘制。 | + +**表5** ChartLineStyle + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> | 1px | 否 | 线宽设置。 | +| smooth | boolean | false | 否 | 是否平滑。 | + +**表6** PointStyle + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| shape | string | circle | 否 | 高亮点的形状。可选值为:
- circle:圆形。
- square:方形。
- triangle:三角形。 | +| size | <length> | 5px | 否 | 高亮点的大小。 | +| strokeWidth | <length> | 1px | 否 | 边框宽度 | +| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | +| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | + +**表7** ChartLoop + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| margin | <length> | 1 | 否 | 擦除点的个数(最新绘制的点与最老的点之间的横向距离)。注意:轻量设备margin和topPoint/bottomPoint/headPoint同时使用时,有概率出现point正好位于擦除区域的情况,导致point不可见,因此不建议同时使用。 | +| gradient | boolean | false | 否 | 是否需要渐变擦除。 | + +**表8** Point5+ + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | +| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | +| description | string | - | 否 | 表示当前点的注释内容。 | +| textLocation | string | - | 否 | 可选值为top,bottom,none。分别表示注释的绘制位置位于点的上方,下方,以及不绘制。 | +| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | +| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed, 5, 5”表示纯虚线,绘制5px的实线后留5px的空白。“solid”表示绘制实线。 | +| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | + +**表9** DataSegment5+ + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| startColor | Color | - | 否 | 起始位置的颜色,设置startColor必须设置endColor。不设置startColor时,会使用系统默认预置的颜色数组,具体颜色值见下表。 | +| endColor | Color | - | 否 | 终止位置的颜色,设置endColor必须设置startColor。
不设置startColor时,会使用系统默认预置的颜色数组。 | +| value | number | 0 | 是 | 占比数据的所占份额,最大100。 | +| name | string | - | 否 | 此类数据的名称。 | + +| 数据组 | 浅色主题 | 深色主题 | +| -------- | -------- | -------- | +| 0 | 起始颜色:\#f7ce00,结束颜色:\#f99b11 | 起始颜色:\#d1a738,结束颜色:\#eb933d | +| 1 | 起始颜色:\#f76223,结束颜色:\#f2400a | 起始颜色:\#e67d50,结束颜色:\#d9542b | +| 2 | 起始颜色:\#f772ac,结束颜色:\#e65392 | 起始颜色:\#d5749e,结束颜色:\#d6568d | +| 3 | 起始颜色:\#a575eb,结束颜色:\#a12df7 | 起始颜色:\#9973d1,结束颜色:\#5552d9 | +| 4 | 起始颜色:\#7b79f7,结束颜色:\#4b48f7 | 起始颜色:\#7977d9,结束颜色:\#f99b11 | +| 5 | 起始颜色:\#4b8af3,结束颜色:\#007dff | 起始颜色:\#4c81d9,结束颜色:\#217bd9 | +| 6 | 起始颜色:\#73c1e6,结束颜色:\#4fb4e3 | 起始颜色:\#5ea6d1,结束颜色:\#4895c2 | +| 7 | 起始颜色:\#a5d61d,结束颜色:\#69d14f | 起始颜色:\#91c23a,结束颜色:\#70ba5d | +| 8 | 起始颜色:\#a2a2b0,结束颜色:\#8e8e93 | 起始颜色:\#8c8c99,结束颜色:\#6b6b76 | 当类型为量规图时,还支持如下属性: - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

percent

-

number

-

0

-

-

当前值占整体的百分比,取值范围为0-100。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

stroke-width

-

<length>

-

32px(量规)

-

24px(占比类圆形图表)

-

-

量规、占比类圆形图表组件刻度条的宽度。

-

start-angle

-

<deg>

-

240(量规)

-

0(占比类圆形图表)

-

-

量规、占比类圆形图表组件刻度条起始角度,以时钟0点为基线。范围为0到360。

-

total-angle

-

<deg>

-

240(量规)

-

360(占比类圆形图表)

-

-

量规、占比类圆形图表组件刻度条总长度,范围为-360到360,负数标识起点到终点为逆时针。

-

center-x

-

<length>

-

-

-

-

量规组件刻度条中心位置,该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。(仅量规图支持)

-

center-y

-

<length>

-

-

-

-

量规组件刻度条中心位置,该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。(仅量规图支持)

-

radius

-

<length>

-

-

-

-

量规组件刻度条半径,该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。(仅量规图支持)

-

colors

-

Array

-

-

-

-

量规组件刻度条每一个区段的颜色。

-

如:colors: #ff0000, #00ff00。(仅量规图支持)

-

weights

-

Array

-

-

-

-

量规组件刻度条每一个区段的权重。

-

如:weights: 2, 2。(仅量规图支持)

-

font-family5+

-

Array

-

-

-

-

表示绘制注释的字体样式,支持自定义字体

-

font-size5+

-

<length>

-

-

-

-

表示绘制注释的字体的大小。

-
- -## 事件 - -支持[通用事件](js-components-common-events.md)。 - -## 方法 - -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: - - - - - - - - - - - -

方法

-

参数

-

描述

-

append

-

{

-

serial: number, // 设置要更新的线形图数据下标

-

data: Array<number>, // 设置新增的数据

-

}

-

往已有的数据序列中动态添加数据,根据serial指定目标序列,serial为datasets数组的下标,从0开始。注意:不会更新datasets[index].data。仅线形图支持,按横坐标加1递增(与xAxis min/max设置相关)。

-
- -## 示例 - -1. 线形图 - - ``` - -
- - - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .chart-region { - height: 400px; - width: 700px; - } - .chart-background { - object-fit: fill; - } - .chart-data { - width: 700px; - height: 600px; - } - button { - width: 100%; - height: 50px; - background-color: #F4F2F1; - text-color: #0C81F3; - } - ``` - - ``` - // xxx.js - export default { - data: { - lineData: [ - { - strokeColor: '#0081ff', - fillColor: '#cce5ff', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], - gradient: true, - } - ], - lineOps: { - xAxis: { - min: 0, - max: 20, - display: false, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - series: { - lineStyle: { - width: "5px", - smooth: true, - }, - headPoint: { - shape: "circle", - size: 20, - strokeWidth: 5, - fillColor: '#ffffff', - strokeColor: '#007aff', - display: true, - }, - loop: { - margin: 2, - gradient: true, - } - } - }, - }, - addData() { - this.$refs.linechart.append({ - serial: 0, - data: [Math.floor(Math.random() * 400) + 400] - }) - } - } - ``` - - ![](figures/zh-cn_image_0000001173324843.png) - -2. 柱状图 - - ``` - -
- - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .data-region { - height: 400px; - width: 700px; - } - .data-background { - object-fit: fill; - } - .data-bar { - width: 700px; - height: 400px; - } - ``` - - ``` - // xxx.js - export default { - data: { - barData: [ - { - fillColor: '#f07826', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], - }, - { - fillColor: '#cce5ff', - data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], - }, - { - fillColor: '#ff88bb', - data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], - }, - ], - barOps: { - xAxis: { - min: 0, - max: 20, - display: false, - axisTick: 10, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - }, - } - } - ``` - - ![](figures/barchart.png) - -3. 量规图 - - ``` - -
-
- -
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .gauge-region { - height: 400px; - width: 400px; - } - .data-gauge { - colors: #83f115, #fd3636, #3bf8ff; - weights: 4, 2, 1; - } - ``` - - ![](figures/gauge.png) - - +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| percent | number | 0 | 否 | 当前值占整体的百分比,取值范围为0-100。 | + + +## 样式 + + + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| stroke-width | <length> | 32px(量规)
24px(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | +| start-angle | <deg> | 240(量规)
0(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条起始角度,以时钟0点为基线。范围为0到360。 | +| total-angle | <deg> | 240(量规)
360(占比类圆形图表) | 否 | 量规、占比类圆形图表组件刻度条总长度,范围为-360到360,负数标识起点到终点为逆时针。 | +| center-x | <length> | - | 否 | 量规组件刻度条中心位置,该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。(仅量规图支持) | +| center-y | <length> | - | 否 | 量规组件刻度条中心位置,该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。(仅量规图支持) | +| radius | <length> | - | 否 | 量规组件刻度条半径,该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。(仅量规图支持) | +| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。
如:colors: \#ff0000, \#00ff00。(仅量规图支持) | +| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。
如:weights: 2, 2。(仅量规图支持) | +| font-family5+ | Array | - | 否 | 表示绘制注释的字体样式,支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 | +| font-size5+ | <length> | - | 否 | 表示绘制注释的字体的大小。 | + + +## 事件 + +支持[通用事件](../arkui-js/js-components-common-events.md)。 + + +## 方法 + +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: + +| 方法 | 参数 | 描述 | +| -------- | -------- | -------- | +| append | {
serial: number, // 设置要更新的线形图数据下标
data: Array<number>, // 设置新增的数据
} | 往已有的数据序列中动态添加数据,根据serial指定目标序列,serial为datasets数组的下标,从0开始。注意:不会更新datasets[index].data。仅线形图支持,按横坐标加1递增(与xAxis min/max设置相关)。 | + +## 示例 + +1. 线形图 + ``` + +
+ + + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .chart-region { + height: 400px; + width: 700px; + } + .chart-background { + object-fit: fill; + } + .chart-data { + width: 700px; + height: 600px; + } + button { + width: 100%; + height: 50px; + background-color: #F4F2F1; + text-color: #0C81F3; + } + ``` + + ``` + // xxx.js + export default { + data: { + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + }, + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 400] + }) + } + } + ``` + + ![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png) + +2. 柱状图 + ``` + +
+ + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .data-region { + height: 400px; + width: 700px; + } + .data-background { + object-fit: fill; + } + .data-bar { + width: 700px; + height: 400px; + } + ``` + + ``` + // xxx.js + export default { + data: { + barData: [ + { + fillColor: '#f07826', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], + }, + { + fillColor: '#cce5ff', + data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], + }, + { + fillColor: '#ff88bb', + data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], + }, + ], + barOps: { + xAxis: { + min: 0, + max: 20, + display: false, + axisTick: 10, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + }, + } + } + ``` + + ![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png) + +3. 量规图 + ``` + +
+
+ +
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .gauge-region { + height: 400px; + width: 400px; + } + .data-gauge { + colors: #83f115, #fd3636, #3bf8ff; + weights: 4, 2, 1; + } + ``` + + ![zh-cn_image_0000001127125264](figures/zh-cn_image_0000001127125264.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md index 0fa9d6c594146179d6d468e93368c3c8cb533481..84fa5f4274f1abd90b87dc5d0c2f785cdfa8bd65 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md @@ -1,210 +1,62 @@ -# divider +# divider + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 提供分隔器组件,分隔不同内容块/内容元素。可用于列表或界面布局。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

vertical

-

boolean

-

false

-

-

使用水平分割线还是垂直分割线,默认水平。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->不支持focusable、disabled属性。 - -## 样式 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线,默认水平。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 不支持focusable、disabled属性。 + + +## 样式 仅支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

margin

-

<length>

-

0

-

-

使用简写属性设置所有的外边距属性,该属性可以有1到4个值。

-

margin-[left|top|right|bottom]

-

<length>

-

0

-

-

使用简写属性设置左、上、右、下外边距属性,类型length,单位px,默认值0。

-

color

-

<color>

-

#08000000

-

-

设置分割线颜色。

-

stroke-width

-

<length>

-

1

-

-

设置分割线宽度。

-

display

-

string

-

flex

-

-

确定分割线所产生的框的类型。值flex/none,默认值flex。

-

visibility

-

string

-

visible

-

-

是否显示分割线。不可见的框会占用布局。visible代表显示元素,hidden代表不显示元素。

-

line-cap

-

string

-

butt

-

-

设置分割线条的端点样式,默认为butt,可选值为:

-
  • butt:分割线两端为平行线;
  • round:分割线两端额外添加半圆;
  • square:分割线两端额外添加半方形;
-
说明:

round和square会额外增加一个线宽的分割线长度。

-
-

flex

-

number

-

-

-

-

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。

-
说明:

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

-

设置分割线的伸展因子,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex项加起来的大小)的分配系数。0为不伸展。

-
说明:

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

-

flex-shrink

-

number

-

1

-

-

设置分割线的收缩因子,flex元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。

-
说明:

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

-

设置分割线在主轴方向上的初始大小。

-
说明:

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-
- -## 事件 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| margin | <length> | 0 | 否 | 使用简写属性设置所有的外边距属性,该属性可以有1到4个值。 | +| margin-[left\|top\|right\|bottom] | <length> | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性,类型length,单位px,默认值0。 | +| color | <color> | \#08000000 | 否 | 设置分割线颜色。 | +| stroke-width | <length> | 1 | 否 | 设置分割线宽度。 | +| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none,默认值flex。 | +| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素,hidden代表不显示元素。 | +| line-cap | string | butt | 否 | 设置分割线条的端点样式,默认为butt,可选值为:
- butt:分割线两端为平行线;
- round:分割线两端额外添加半圆;
- square:分割线两端额外添加半方形;
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> round和square会额外增加一个线宽的分割线长度。 | +| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | +| flex-grow | number | 0 | 否 | 设置分割线的伸展因子,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex项加起来的大小)的分配系数。0为不伸展。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | +| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子,flex元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | +| flex-basis | <length> | - | 否 | 设置分割线在主轴方向上的初始大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | + + +## 事件 不支持。 -## 方法 + +## 方法 不支持。 -## 示例 + +## 示例 ``` @@ -240,5 +92,4 @@ } ``` -![](figures/1.jpg) - +![zh-cn_image_0000001173164799](figures/zh-cn_image_0000001173164799.jpg) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md index dff6cc80512cc66d65017fdeff34d09a528fd6e1..114a6713ed84dcfec61d14ce2152ecb4266d147e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md @@ -1,294 +1,73 @@ -# image-animator +# image-animator + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 图片帧动画播放器。 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式:png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用时需要使用数据绑定的方式,如images = {{images}},js中声明相应变量:images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

> js中声明相应变量:images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长,单位毫秒。6+ | +| predecode6+ | number | 0 | 否 | 是否启用预解码,默认值为0,即不启用预解码,如该值设为2,则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | +| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数,infinite枚举表示无限次数播放。 | +| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片; true表示从最后1张图片播放到第1张图片。 | +| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致,此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | +| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)],默认单位为ms。 duration为0时,不播放图片。 值改变只会在下一次循环开始时生效,当images中设置了单独的duration后,该属性设置无效。 | +| fillmode5+ | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有:
- none:恢复初始状态。
- forwards:保持帧动画结束时的状态(在最后一个关键帧中定义)。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

images

-

Array<ImageFrame>

-

-

-

-

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式:png、jpg。ImageFrame的详细说明请见表1

-
说明:

使用时需要使用数据绑定的方式,如images = {{images}},js中声明相应变量:images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

-

js中声明相应变量:images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长,单位毫秒。6+

-
-

predecode6+

-

number

-

0

-

-

是否启用预解码,默认值为0,即不启用预解码,如该值设为2,则播放当前页时会提前加载后面两张图片至缓存以提升性能。

-

iteration

-

number | string

-

infinite

-

-

设置帧动画播放次数。number表示固定次数,infinite枚举表示无限次数播放。

-

reverse

-

boolean

-

false

-

-

设置播放顺序。false表示从第1张图片播放到最后1张图片; true表示从最后1张图片播放到第1张图片。

-

fixedsize

-

boolean

-

true

-

-

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致,此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

-

duration

-

string

-

-

-

-

设置单次播放时长。单位支持[s(秒)|ms(毫秒)],默认单位为ms。 duration为0时,不播放图片。 值改变只会在下一次循环开始时生效,当images中设置了单独的duration后,该属性设置无效。

-

fillmode5+

-

string

-

forwards

-

-

指定帧动画执行结束后的状态。可选项有:

-
  • none:恢复初始状态。
  • forwards:保持帧动画结束时的状态(在最后一个关键帧中定义)。
-
+**表1** ImageFrame说明 -**表 1** ImageFrame说明 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| src | <uri> | - | 是 | 图片路径,图片格式为svg,png和jpg。 | +| width | <length> | 0 | 否 | 图片宽度。 | +| height | <length> | 0 | 否 | 图片高度。 | +| top | <length> | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | +| left | <length> | 0 | 否 | 图片相对于组件左上角的横向坐标。 | +| duration6+ | number | - | 否 | 每一帧图片的播放时长,单位毫秒。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

src

-

<uri>

-

-

-

-

图片路径,图片格式为svg,png和jpg

-

width

-

<length>

-

0

-

-

图片宽度。

-

height

-

<length>

-

0

-

-

图片高度。

-

top

-

<length>

-

0

-

-

图片相对于组件左上角的纵向坐标。

-

left

-

<length>

-

0

-

-

图片相对于组件左上角的横向坐标。

-

duration6+

-

number

-

-

-

-

每一帧图片的播放时长,单位毫秒。

-
-## 样式 +## 样式 -支持[通用样式](js-components-common-styles.md)。 +支持[通用样式](../arkui-js/js-components-common-styles.md)。 -## 事件 -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +## 事件 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

帧动画启动时触发。

-

pause

-

-

-

帧动画暂停时触发。

-

stop

-

-

-

帧动画结束时触发。

-

resume

-

-

-

帧动画恢复时触发。

-
+除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -## 方法 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| start | - | 帧动画启动时触发。 | +| pause | - | 帧动画暂停时触发。 | +| stop | - | 帧动画结束时触发。 | +| resume | - | 帧动画恢复时触发。 | -支持[通用方法](js-components-common-methods.md)外,还支持如下方法: - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

开始播放图片帧动画。再次调用,重新从第1帧开始播放。

-

pause

-

-

-

暂停播放图片帧动画。

-

stop

-

-

-

停止播放图片帧动画。

-

resume

-

-

-

继续播放图片帧。

-

getState

-

-

-

获取播放状态。可能值有:

-
  • playing:播放中
  • paused:已暂停
  • stopped:已停止。
-
+## 方法 -## 示例 +支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| start | - | 开始播放图片帧动画。再次调用,重新从第1帧开始播放。 | +| pause | - | 暂停播放图片帧动画。 | +| stop | - | 停止播放图片帧动画。 | +| resume | - | 继续播放图片帧。 | +| getState | - | 获取播放状态。可能值有:
- playing:播放中
- paused:已暂停
- stopped:已停止。 | + + +## 示例 ``` @@ -411,5 +190,4 @@ export default { }; ``` -![](figures/image-animator.gif) - +![zh-cn_image_0000001127284946](figures/zh-cn_image_0000001127284946.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md index 0983d9d761542fcffb8b8708607af958007b1dc1..c6551400e9cd3f1f99f2489a9c36ac9dbbdc0029 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md @@ -1,209 +1,83 @@ -# image +# image + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 图片组件,用来渲染展示图片。 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

src

-

string

-

-

-

-

图片的路径,支持本地路径,图片格式包括png、jpg、bmp、svg和gif。

-

支持Base64字符串6+。格式为data:image/[png | jpeg | bmp | webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。

-

支持dataability://的路径前缀,用于访问通过data ability提供的图片路径6+

-

alt

-

string

-

-

-

-

占位图,当指定图片在加载中时显示。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

object-fit

-

string

-

cover

-

-

设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。(不支持svg格式)

-

match-text-direction

-

boolean

-

false

-

-

图片是否跟随文字方向。(不支持svg格式)

-

fit-original-size

-

boolean

-

false

-

-

image组件在未设置宽高的情况下是否适应图源尺寸(该属性为true时object-fit属性不生效),svg类型图源不支持该属性。

-

object-position7+

-

string

-

0px 0px

-

-

设置图片在组件内展示的位置。

-

设置类型有两种:

-

1. 像素,单位px,示例 15px 15px 代表X轴或者Y轴移动的位置

-

2. 字符,可选值:

-
  • left 图片显示在组件左侧;
  • top 图片显示在组件顶部位置;
  • right 图片显示在组件右侧位置;
  • bottom图片显示在组件底部位置。
-
- -**表 1** object-fit 类型说明 - - - - - - - - - - - - - - - - - - - - - - -

类型

-

描述

-

cover

-

保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界,居中显示。

-

contain

-

保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内,居中显示。

-

fill

-

不保持宽高比进行放大缩小,使得图片填充满显示边界。

-

none

-

保持原有尺寸进行居中显示。

-

scale-down

-

保持宽高比居中显示,图片缩小或者保持不变。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->使用svg图片资源时: ->- 建议设置image组件的长宽,否则在父组件的长或宽为无穷大的场景下,svg资源将不会绘制; ->- 如果svg描述中未指定相应的长宽,则svg将会填满image组件区域; ->- 如果svg描述中指定了相应的长宽,和image组件本身的长宽效果如下: ->1. 如果image组件本身的长宽小于svg中的长宽,svg会被裁切,仅显示左上角部分; ->2. 如果image组件本身的长宽大于svg中的长宽,svg会被放置在image组件的左上角,image组件其他部分显示空白。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

complete(Rich)

-

{ width:width, height:height }

-

图片成功加载时触发该回调,返回成功加载的图源尺寸。

-

error(Rich)

-

{ width:width, height:height }

-

图片加载出现异常时触发该回调,异常时长宽为零。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| src | string | - | 否 | 图片的路径,支持本地路径,图片格式包括png、jpg、bmp、svg和gif。
支持Base64字符串6+。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
支持dataability://的路径前缀,用于访问通过data ability提供的图片路径6+。 | +| alt | string | - | 否 | 占位图,当指定图片在加载中时显示。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。(不支持svg格式) | +| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。(不支持svg格式) | +| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸(该属性为true时object-fit属性不生效),svg类型图源不支持该属性。 | +| object-position7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种:
1. 像素,单位px,示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符,可选值:
- left 图片显示在组件左侧;
- top 图片显示在组件顶部位置;
- right 图片显示在组件右侧位置;
- bottom 图片显示在组件底部位置。 | + +**表1** object-fit 类型说明 + +| 类型 | 描述 | +| -------- | -------- | +| cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界,居中显示。 | +| contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内,居中显示。 | +| fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 | +| none | 保持原有尺寸进行居中显示。 | +| scale-down | 保持宽高比居中显示,图片缩小或者保持不变。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 使用svg图片资源时: +> +> - 建议设置image组件的长宽,否则在父组件的长或宽为无穷大的场景下,svg资源将不会绘制; +> +> - 如果svg描述中未指定相应的长宽,则svg将会填满image组件区域; +> +> - 如果svg描述中指定了相应的长宽,和image组件本身的长宽效果如下: +> +> 1. 如果image组件本身的长宽小于svg中的长宽,svg会被裁切,仅显示左上角部分; +> +> 2. 如果image组件本身的长宽大于svg中的长宽,svg会被放置在image组件的左上角,image组件其他部分显示空白。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| complete(Rich) | { width:width, height:height } | 图片成功加载时触发该回调,返回成功加载的图源尺寸。 | +| error(Rich) | { width:width, height:height } | 图片加载出现异常时触发该回调,异常时长宽为零。 | + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ```
- + - + <select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select>
``` @@ -214,12 +88,11 @@ align-items: center; flex-direction: column; - } .selects{ margin-top: 20px; width:300px; - border:1px solid #808080; + border:1px solid \#808080; border-radius: 10px; } ``` @@ -237,5 +110,6 @@ export default { } ``` -![](figures/GIF.gif) +![zh-cn_image_0000001127284936](figures/zh-cn_image_0000001127284936.gif) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md index 7cb6905561198191831c3b84c26304be98116871..215d9960e367614c4b9dbc571a28f9992b964088 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md @@ -1,606 +1,238 @@ -# input +# input + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 交互式组件,包括单选框,多选框,按钮和单行文本输入框。 -## 权限列表 +## 权限列表 无 -## 子组件 -不支持。 +## 子组件 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

text

-

-

input组件类型,可选值为text,email,date,time,number,password,button,checkbox,radio。

-

其中text,email,date,time,number,password这六种类型之间支持动态切换修改。

-

button,checkbox,radio不支持动态修改。可选值定义如下:

-
  • button:定义可点击的按钮;
  • checkbox:定义多选框;
  • radio:定义单选按钮,允许在多个拥有相同name值的选项中选中其中一个;
  • text:定义一个单行的文本字段
  • email:定义用于e-mail地址的字段;
  • date:定义 date 控件(包括年、月、日,不包括时间);
  • time:定义用于输入时间的控件(不带时区);
  • number:定义用于输入数字的字段;
  • password:定义密码字段(字段中的字符会被遮蔽)。
    说明:

    智能穿戴仅支持button、radio、checkbox类型。

    -
    -
-

checked

-

boolean

-

false

-

-

当前组件是否选中,仅type为checkbox和radio生效。

-

name

-

string

-

-

-

-

input组件的名称。

-

value

-

string

-

-

-

-

input组件的value值,当类型为radio时必填且相同name值的选项该值唯一。

-

placeholder

-

string

-

-

-

-

设置提示文本的内容,仅在type为text|email|date|time|number|password时生效。

-

maxlength

-

number

-

-

-

-

输入框可输入的最多字符数量,不填表示不限制输入框中字符数量。

-

enterkeytype

-

string

-

default

-

-

不支持动态修改。

-

设置软键盘Enter按钮的类型,可选值为:

-
  • default:默认
  • next:下一项
  • go:前往
  • done:完成
  • send:发送
  • search:搜索
-
说明:

除“next”外,点击后会自动收起软键盘。

-
-

headericon

-

string

-

-

-

-

在文本输入前的图标资源路径,该图标不支持点击事件(button,checkbox和radio不生效),图标格式为jpg,png和svg。

-

showcounter5+

-

boolean

-

false

-

-

文本输入框是否显示计数下标,需要配合maxlength一起使用。

-

menuoptions5+

-

Array<MenuOption>

-

-

-

-

设置文本选择弹框点击更多按钮之后显示的菜单项。

-

autofocus6+

-

boolean

-

false

-

-

是否自动获焦。

-
说明:

应用首页中设置不生效,可在onActive中延迟(100-500ms左右)调用focus方法实现输入框在首页中自动获焦。

-
-

selectedstart6+

-

number

-

-1

-

-

开始选择文本时初始选择位置。

-

selectedend6+

-

number

-

-1

-

-

开始选择文本时结尾选择位置。

-

softkeyboardenabled6+

-

boolean

-

true

-

-

编辑时是否弹出系统软键盘。

-

showpasswordicon6+

-

boolean

-

true

-

-

是否显示密码框末尾的图标(仅type为password时生效)。

-
- -**表 1** MenuOption5+ - - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

icon

-

string

-

菜单选项中的图标路径。

-

content

-

string

-

菜单选项中的文本内容。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

-

单行输入框或者按钮的文本颜色。

-

font-size

-

<length>

-

16px

-

-

单行输入框或者按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

placeholder-color

-

<color>

-

#99000000

-

-

单行输入框的提示文本的颜色,type为text|email|date|time|number|password时生效。

-

font-weight

-

number | string

-

normal

-

-

单行输入框或者按钮的字体粗细,见text组件font-weight的样式属性

-

caret-color6+

-

<color>

-

-

-

-

设置输入光标的颜色。

-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - -- 当input类型为text、email、date、time、number、password时,支持如下事件: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ value:inputValue }

-

输入框输入内容发生变化时触发该事件,返回用户当前输入值。

-
说明:

改变value属性值不会触发该回调。

-
-

enterkeyclick

-

{ value:enterKey }

-

软键盘enter键点击后触发该事件,返回enter按钮的类型,enterKey类型为number,可选值为:

-
  • 2:设置enterkeytype属性为go时生效。
  • 3:设置enterkeytype属性为search时生效。
  • 4:设置enterkeytype属性为send时生效。
  • 5:设置enterkeytype属性为next时生效。
  • 6:不设置enterkeytype或者设置enterkeytype属性为default、done时生效。
-

translate5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。

-

share5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。

-

search5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。

-

optionselect5+

-

{ index:optionIndex, value: selectedText }

-

文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。

-

selectchange6+

-

{ start: number,end: number }

-

文本选择变化时触发事件。

-
- -- 当input类型为checkbox、radio时,支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ checked:true | false }

-

checkbox多选框或radio单选框的checked状态发生变化时触发该事件。

-
- - -## 方法 - -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

focus

-

{ focus: true|false },focus不传默认为true。

-

使组件获得或者失去焦点,type为text|email|date|time|number|password时,可弹出或收起输入法。

-

showError

-

{ error: string }

-

展示输入错误提示,type为text|email|date|time|number|password时生效。

-

delete6+

-

-

-

type为text|email|date|time|number|password时,根据当前光标位置删除文本内容,如果当前输入组件没有光标,默认删除最后一个字符并展示光标。

-
- -## 示例 - -1. type为text - - ``` - -
- - - -
- ``` - - ``` - /* xxx.css */ - .content { - width: 60%; - flex-direction: column; - align-items: center; - } - .input { - placeholder-color: gray; - } - .button { - background-color: gray; - margin-top: 20px; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt' - export default { - change(e){ - prompt.showToast({ - message: "value: " + e.value, - duration: 3000, - }); - }, - enterkeyClick(e){ - prompt.showToast({ - message: "enterkey clicked", - duration: 3000, - }); - }, - buttonClick(e){ - this.$element("input").showError({ - error: 'error text' - }); - }, - } - ``` - - ![](figures/zh-cn_image_0000001127284984.png) - -2. type为button - - ``` - -
- -
- ``` - - ``` - /* xxx.css */ - .div-button { - flex-direction: column; - align-items: center; - - - } - .button { - margin-top: 30px; - width: 280px; - } - ``` - - ![](figures/zh-cn_image_0000001198898293.png) - -3. type为checkbox - - ``` - -
- - -
- ``` - - ``` - /* xxx.css */ - .content{ - width: 100%; - height: 200px; - - - align-items: center; - justify-content: center; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt' - export default { - checkboxOnChange(e) { - prompt.showToast({ - message:'checked: ' + e.checked, - duration: 3000, - }); - } - } - ``` - - ![](figures/zh-cn_image_0000001173324749.png) - -4. type为radio - - ``` - -
- - - -
- ``` - - ``` - /* xxx.css */ - .content{ - width: 100%; - height: 200px; - justify-content: center; - align-items: center; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt' - export default { - onRadioChange(inputValue, e) { - if (inputValue === e.value) { - prompt.showToast({ - message: 'The chosen radio is ' + e.value, - duration: 3000, - }); - } - } - } - ``` - - ![](figures/zh-cn_image_0000001173324751.png) +不支持。 +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | text
| 否 | input组件类型,可选值为text,email,date,time,number,password,button,checkbox,radio。
其中text,email,date,time,number,password这六种类型之间支持动态切换修改。
button,checkbox,radio不支持动态修改。可选值定义如下:
- button:定义可点击的按钮;
- checkbox:定义多选框;
- radio:定义单选按钮,允许在多个拥有相同name值的选项中选中其中一个;
- text:定义一个单行的文本字段;
- email:定义用于e-mail地址的字段;
- date:定义 date 控件(包括年、月、日,不包括时间);
- time:定义用于输入时间的控件(不带时区);
- number:定义用于输入数字的字段;
- password:定义密码字段(字段中的字符会被遮蔽)。 | +| checked | boolean | false | 否 | 当前组件是否选中,仅type为checkbox和radio生效。 | +| name | string | - | 否 | input组件的名称。 | +| value | string | - | 否 | input组件的value值,当类型为radio时必填且相同name值的选项该值唯一。 | +| placeholder | string | - | 否 | 设置提示文本的内容,仅在type为text\|email\|date\|time\|number\|password时生效。 | +| maxlength | number | - | 否 | 输入框可输入的最多字符数量,不填表示不限制输入框中字符数量。 | +| enterkeytype | string | default | 否 | 不支持动态修改。
设置软键盘Enter按钮的类型,可选值为:
- default:默认
- next:下一项
- go:前往
- done:完成
- send:发送
- search:搜索
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 除“next”外,点击后会自动收起软键盘。 | +| headericon | string | - | 否 | 在文本输入前的图标资源路径,该图标不支持点击事件(button,checkbox和radio不生效),图标格式为jpg,png和svg。 | +| showcounter5+ | boolean | false | 否 | 文本输入框是否显示计数下标,需要配合maxlength一起使用。 | +| menuoptions5+ | Array<MeunOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | +| autofocus6+ | boolean | false | 否 | 是否自动获焦。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 应用首页中设置不生效,可在onActive中延迟(100-500ms左右)调用focus方法实现输入框在首页中自动获焦。 | +| selectedstart6+ | number | -1 | 否 | 开始选择文本时初始选择位置。 | +| selectedend6+ | number | -1 | 否 | 开始选择文本时结尾选择位置。 | +| softkeyboardenabled6+ | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | +| showpasswordicon6+ | boolean | true | 否 | 是否显示密码框末尾的图标(仅type为password时生效)。 | + +**表1** MenuOption5+ + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| icon | string | 菜单选项中的图标路径。 | +| content | string | 菜单选项中的文本内容。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | +| font-size | <length> | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| placeholder-color | <color> | \#99000000 | 否 | 单行输入框的提示文本的颜色,type为text\|email\|date\|time\|number\|password时生效。 | +| font-weight | number \| string | normal | 否 | 单行输入框或者按钮的字体粗细,见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +- 当input类型为text、email、date、time、number、password时,支持如下事件: + | 名称 | 参数 | 描述 | + | -------- | -------- | -------- | + | change | { value:inputValue } | 输入框输入内容发生变化时触发该事件,返回用户当前输入值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 改变value属性值不会触发该回调。 | + | enterkeyclick | { value:enterKey } | 软键盘enter键点击后触发该事件,返回enter按钮的类型,enterKey类型为number,可选值为:
- 2:设置enterkeytype属性为go时生效。
- 3:设置enterkeytype属性为search时生效。
- 4:设置enterkeytype属性为send时生效。
- 5:设置enterkeytype属性为next时生效。
- 6:不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 | + | translate5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。 | + | share5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。 | + | search5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。 | + | optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。 | + | selectchange6+ | { start: number,end: number } | 文本选择变化时触发事件。 | + +- 当input类型为checkbox、radio时,支持如下事件: + | 名称 | 参数 | 描述 | + | -------- | -------- | -------- | + | change | { checked:true \| false } | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | + +## 方法 + +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| focus | { focus: true\|false },focus不传默认为true。 | 使组件获得或者失去焦点,type为text\|email\|date\|time\|number\|password时,可弹出或收起输入法。 | +| showError | { error: string } | 展示输入错误提示,type为text\|email\|date\|time\|number\|password时生效。 | +| delete6+ | - | type为text\|email\|date\|time\|number\|password时,根据当前光标位置删除文本内容,如果当前输入组件没有光标,默认删除最后一个字符并展示光标。 | + +## 示例 + +1. type为text + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content { + width: 60%; + flex-direction: column; + align-items: center; + } + .input { + placeholder-color: gray; + } + .button { + background-color: gray; + margin-top: 20px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + change(e){ + prompt.showToast({ + message: "value: " + e.value, + duration: 3000, + }); + }, + enterkeyClick(e){ + prompt.showToast({ + message: "enterkey clicked", + duration: 3000, + }); + }, + buttonClick(e){ + this.$element("input").showError({ + error: 'error text' + }); + }, + } + ``` + + ![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png) + +2. type为button + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .div-button { + flex-direction: column; + align-items: center; + } + .button { + margin-top: 30px; + width: 280px; + } + ``` + + ![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png) + +3. type为checkbox + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + align-items: center; + justify-content: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + checkboxOnChange(e) { + prompt.showToast({ + message:'checked: ' + e.checked, + duration: 3000, + }); + } + } + ``` + + ![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png) + +4. type为radio + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + justify-content: center; + align-items: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + onRadioChange(inputValue, e) { + if (inputValue === e.value) { + prompt.showToast({ + message: 'The chosen radio is ' + e.value, + duration: 3000, + }); + } + } + } + ``` + + ![zh-cn_image_0000001208315918](figures/zh-cn_image_0000001208315918.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md index b411b26956eea31e47a1e07117fee3bbb552794f..cfa7a4a4389ecea266e06c90d32fb400c793a98f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md @@ -1,261 +1,64 @@ -# label +# label + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 为input、button、textarea组件定义相应的标注,点击该标注时会触发绑定组件的点击效果。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| target | string | - | 否 | 目标组件的属性id值。 | - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

target

-

string

-

-

-

-

目标组件的属性id值。

-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e5000000

-

-

设置文本的颜色。

-

font-size

-

<length>

-

30px

-

-

设置文本的尺寸。

-

allow-scale

-

boolean

-

true

-

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果需要支持动态生效,请参看config描述文件中config-changes标签。

-
-

letter-spacing

-

<length>

-

0px

-

-

设置文本的字符间距。

-

font-style

-

string

-

normal

-

-

设置文本的字体样式,可选值为:

-
  • normal:标准的字体样式;
  • italic:斜体的字体样式。
-

font-weight

-

number | string

-

normal

-

-

设置文本的字体粗细,number类型取值[100, 900],默认为400,取值越大,字体越粗。

-
说明:

number取值必须为100的整数倍。

-
-

string类型取值支持如下四个值:lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

-

设置文本的文本修饰,可选值为:

-
  • underline:文字下划线修饰;
  • line-through:穿过文本的修饰线n
  • none:标准文本。
-

text-align

-

string

-

start

-

-

设置文本的文本对齐方式,可选值为:

-
  • left:文本左对齐;
  • center:文本居中对齐;
  • right:文本右对齐;
  • start:根据文字书写相同的方向对齐;
  • end:根据文字书写相反的方向对齐。
-
说明:

如文本宽度未指定大小,文本的宽度和父容器的宽度大小相等的情况下,对齐效果可能会不明显。

-
-

line-height

-

<length>

-

0px

-

-

设置文本的文本行高,设置为0px时,不限制文本行高,自适应字体大小。

-

text-overflow

-

string

-

clip

-

-

在设置了最大行数的情况下生效,可选值为:

-
  • clip:将文本根据父容器大小进行裁剪显示;
  • ellipsis:根据父容器大小显示,显示不下的文本用省略号代替。需配合max-lines使用。
-

font-family

-

string

-

sans-serif

-

-

设置文本的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

max-lines

-

number

-

-

-

-

设置文本的最大行数。

-

min-font-size

-

<length>

-

-

-

-

文本最小字号,需要和文本最大字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。

-

max-font-size

-

<length>

-

-

-

-

文本最大字号,需要和文本最小字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。

-

font-size-step

-

<length>

-

1px

-

-

文本动态调整字号时的步长,需要设置最小,最大字号样式生效。

-

prefer-font-sizes

-

<array>

-

-

-

-

预设的字号集合,在动态尺寸调整时,优先使用预设字号集合中的字号匹配设置的最大行数,如果预设字号集合未设置,则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况,使用text-overflow设置项进行截断,设置预设尺寸集后,font-size、max-font-size、min-font-size和font-size-step不生效。

-

如:prefer-font-sizes: 12px,14px,16px

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果需要支持动态生效,请参看config描述文件中config-changes标签。 | +| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | +| font-style | string | normal | 否 | 设置文本的字体样式,可选值为:
- normal:标准的字体样式;
- italic:斜体的字体样式。 | +| font-weight | number \| string | normal | 否 | 设置文本的字体粗细,number类型取值[100, 900],默认为400,取值越大,字体越粗。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> number取值必须为100的整数倍。
string类型取值支持如下四个值:lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 设置文本的文本修饰,可选值为:
- underline:文字下划线修饰;
- line-through:穿过文本的修饰线n
- none:标准文本。 | +| text-align | string | start
| 否 | 设置文本的文本对齐方式,可选值为:
- left:文本左对齐;
- center:文本居中对齐;
- right:文本右对齐;
- start:根据文字书写相同的方向对齐;
- end:根据文字书写相反的方向对齐。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如文本宽度未指定大小,文本的宽度和父容器的宽度大小相等的情况下,对齐效果可能会不明显。 | +| line-height | <length> | 0px | 否 | 设置文本的文本行高,设置为0px时,不限制文本行高,自适应字体大小。 | +| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效,可选值为:
- clip:将文本根据父容器大小进行裁剪显示;
- ellipsis:根据父容器大小显示,显示不下的文本用省略号代替。需配合max-lines使用。 | +| font-family | string | sans-serif | 否 | 设置文本的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| max-lines | number | - | 否 | 设置文本的最大行数。 | +| min-font-size | <length> | - | 否 | 文本最小字号,需要和文本最大字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。 | +| max-font-size | <length> | - | 否 | 文本最大字号,需要和文本最小字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。 | +| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长,需要设置最小,最大字号样式生效。 | +| prefer-font-sizes | <array> | - | 否 | 预设的字号集合,在动态尺寸调整时,优先使用预设字号集合中的字号匹配设置的最大行数,如果预设字号集合未设置,则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况,使用text-overflow设置项进行截断,设置预设尺寸集后,font-size、max-font-size、min-font-size和font-size-step不生效。
如:prefer-font-sizes: 12px,14px,16px | -## 事件 + +## 事件 不支持。 -## 方法 + +## 方法 不支持。 -## 示例 + +## 示例 ``` @@ -294,5 +97,4 @@ } ``` -![](figures/zh-cn_image_0000001152834002.png) - +![zh-cn_image_0000001152834002](figures/zh-cn_image_0000001152834002.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md index efc07b40de3c548bc983bed6829d57a5781fbd6a..94d3f55c402e7f2ac49015b1b9b895b694005189 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -1,209 +1,65 @@ -# marquee +# marquee + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 跑马灯组件,用于展示一段单行滚动的文字。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 | +| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定,则默认值为-1,当该值小于等于零时表示marquee将连续滚动。 | +| direction | string | left | 否 | 设置跑马灯的文字滚动方向,可选值为left和right。 | - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

scrollamount

-

number

-

6

-

-

跑马灯每次滚动时移动的最大长度。

-

loop

-

number

-

-1

-

-

跑马灯滚动的次数。如果未指定,则默认值为-1,当该值小于等于零时表示marquee将连续滚动。

-

direction

-

string

-

left

-

-

设置跑马灯的文字滚动方向,可选值为left和right。

-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e5000000

-

-

设置跑马灯中文字的文本颜色。

-

font-size

-

<length>

-

37.5

-

-

设置跑马灯中文字的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

font-weight

-

number | string

-

normal

-

-

设置跑马灯中文字的字体的粗细,见text组件font-weight的样式属性

-

font-family

-

string

-

sans-serif

-

-

设置跑马灯中文字的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 | +| font-size | <length> | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 | +| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| font-weight | number \| string | normal | 否 | 设置跑马灯中文字的字体的粗细,见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | -## 事件 -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +## 事件 - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

bounce(Rich)

-

-

-

当文本滚动到末尾时触发该事件。

-

finish(Rich)

-

-

-

当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。

-

start(Rich)

-

-

-

当文本滚动开始时触发该事件。

-
+除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -## 方法 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 | +| finish(Rich) | - | 当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。 | +| start(Rich) | - | 当文本滚动开始时触发该事件。 | -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: +## 方法 - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

开始滚动。

-

stop

-

-

-

停止滚动。

-
+除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: -## 示例 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| start | - | 开始滚动。 | +| stop | - | 停止滚动。 | + + +## 示例 ``` @@ -275,5 +131,6 @@ export default { } ``` -![](figures/sample1.gif) +![zh-cn_image_0000001127284934](figures/zh-cn_image_0000001127284934.gif) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md index 4e65ea084a69caa4c7fcf8e3e5e792273c020055..bdb2d032b1f8dd2a8acd3976ae63839971f13a27 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md @@ -1,221 +1,68 @@ -# menu +# menu + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 提供菜单组件,作为临时性弹出窗口,用于展示用户可执行的操作。 -## 权限列表 +## 权限列表 无 -## 子组件 -<[option](js-components-basic-option.md)\>子组件。 +## 子组件 + +<[option](../arkui-js/js-components-basic-option.md)>子组件。 + + +## 属性 -## 属性 +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性:↵ -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性:↵ +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后,点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角,当右边可视空间不足时会适当左移,当下方空间不足时会适当上移。 | +| type | string | click | 否 | 目标元素触发弹窗的方式,可选值有:
- click:点击弹窗。
- longpress:长按弹窗。 | +| title | string | - | 否 | 菜单标题内容。 | - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

target

-

string

-

-

-

-

目标元素选择器。当使用目标元素选择器后,点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角,当右边可视空间不足时会适当左移,当下方空间不足时会适当上移。

-

type

-

string

-

click

-

-

目标元素触发弹窗的方式,可选值有:

-
  • click:点击弹窗。
  • longpress:长按弹窗。
-

title

-

string

-

-

-

-

菜单标题内容。

-
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 不支持focusable、disabled属性。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->不支持focusable、disabled属性。 -## 样式 +## 样式 仅支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

-

-

-

设置菜单的文本颜色。

-

font-size

-

<length>

-

30px

-

-

设置菜单的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

letter-spacing

-

<length>

-

0

-

-

设置菜单的字符间距。

-

font-style

-

string

-

normal

-

-

设置菜单的字体样式。见text组件font-style的样式属性

-

font-weight

-

number | string

-

normal

-

-

设置菜单的字体粗细。见text组件font-weight的样式属性

-

font-family

-

string

-

sans-serif

-

-

设置菜单的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| text-color | <color> | - | 否 | 设置菜单的文本颜色。 | +| font-size | <length> | 30px | 否 | 设置菜单的文本尺寸。 | +| allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| letter-spacing | <length> | 0 | 否 | 设置菜单的字符间距。 | +| font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight | number \| string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 设置菜单的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | -## 事件 + +## 事件 仅支持如下事件: - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

selected

-

{ value:value }

-

菜单中某个值被点击选中时触发,返回的value值为option组件的value属性。

-

cancel

-

-

-

用户取消。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| selected | { value:value } | 菜单中某个值被点击选中时触发,返回的value值为option组件的value属性。 | +| cancel | - | 用户取消。 | + -## 方法 +## 方法 仅支持如下方法。 - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

{ x:x, y:y }

-

显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标,不包含任何滚动偏移,y表示距离可见区域上边沿的 Y 轴坐标,不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角,当右边可视空间不足时会适当左移,当下方空间不足时会适当上移。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| show | { x:x,  y:y } | 显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标,不包含任何滚动偏移,y表示距离可见区域上边沿的 Y 轴坐标,不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角,当右边可视空间不足时会适当左移,当下方空间不足时会适当上移。 | -## 示例 +## 示例 ``` @@ -256,5 +103,4 @@ export default { } ``` -![](figures/menu13.gif) - +![zh-cn_image_0000001131795738](figures/zh-cn_image_0000001131795738.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md index 9106a3e8cad1847499654c5918964344f732d872..3e64a270020e709963c3dc6bcf2015c228eded5f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md @@ -1,167 +1,59 @@ -# option +# option -当作为<[select](js-components-basic-select.md)\>的子组件时用来展示下拉选择的具体项目。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -当作为<[menu](js-components-basic-menu.md)\>的子组件时用来展示弹出菜单的具体项目。 +当作为<[select](../arkui-js/js-components-basic-select.md)>的子组件时用来展示下拉选择的具体项目。 -## 权限列表 + +当作为<[menu](../arkui-js/js-components-basic-menu.md)>的子组件时用来展示弹出菜单的具体项目。 + + +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性:↵ - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

selected

-

boolean

-

-

-

-

选择项是否为下拉列表的默认项,仅在父组件是select时生效。

-

value

-

string

-

-

-

-

选择项的值,作为select、menu父组件的selected事件中的返回值。

-
说明:

option选项的UI展示值需要放在标签内,如<option value="10">十月</option>

-
-

icon

-

string

-

-

-

-

图标资源路径,该图标展示在选项文本前,图标格式为jpg,png和svg。

-
- -## 样式 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性:↵ + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| selected | boolean | - | 否 | 选择项是否为下拉列表的默认项,仅在父组件是select时生效。 | +| value | string | - | 是 | 选择项的值,作为select、menu父组件的selected事件中的返回值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> option选项的UI展示值需要放在标签内,如<option value="10">十月</option> | +| icon | string | - | 否 | 图标资源路径,该图标展示在选项文本前,图标格式为jpg,png和svg。 | + + +## 样式 支持如下样式。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

-

选择项的文本颜色。

-

font-size

-

<length>

-

16px

-

-

选择项的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

font-weight

-

number | string

-

normal

-

-

选择项的字体粗细,见text组件font-weight的样式属性

-

text-decoration

-

string

-

none

-

-

选择项的文本修饰,见text组件text-decoration的样式属性

-

font-family

-

string

-

sans-serif

-

-

选择项的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- -## 事件 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#e6000000 | 否 | 选择项的文本颜色。 | +| font-size | <length> | 16px | 否 | 选择项的文本尺寸。 | +| allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| font-weight | number \| string | normal | 否 | 选择项的字体粗细,见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| text-decoration | string | none | 否 | 选择项的文本修饰,见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 选择项的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + + +## 事件 不支持。 -## 方法 + +## 方法 不支持。 -## 示例 -详见[menu示例](js-components-basic-menu.md#section54636714136)。 +## 示例 +详见[menu示例](../arkui-js/js-components-basic-menu.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 665604b18b775f0a181febfe2599e31f151c6798..0d9575bb3f714aed9f084bc3ae2f8a6e74bb7d16 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -1,563 +1,125 @@ -# picker-view +# picker-view + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 嵌入页面的滑动选择器。 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

text

-

-

设置滑动选择器的类型,该属性不支持动态修改,可选项有:

-
  • text:文本选择器。
  • time:时间选择器。
  • date:日期选择器。
  • datetime:日期时间选择器。
  • multi-text:多列文本选择器。
-
+ +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | text | 否 | 设置滑动选择器的类型,该属性不支持动态修改,可选项有:
- text:文本选择器。
- time:时间选择器。
- date:日期选择器。
- datetime:日期时间选择器。
- multi-text:多列文本选择器。 | 文本选择器:type=text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

range

-

Array

-

-

-

-

设置文本选择器的取值范围。

-
说明:

使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:["15", "20", "25"]。

-
-

selected

-

string

-

0

-

-

设置文本选择器的默认选择值,该值需要为range的索引。

-

indicatorprefix

-

string

-

-

-

-

文本选择器选定值增加的前缀字段。

-

indicatorsuffix

-

string

-

-

-

-

文本选择器选定值增加的后缀字段。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| range | Array | - | 否 | 设置文本选择器的取值范围。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:["15", "20", "25"]。 | +| selected | string | 0 | 否 | 设置文本选择器的默认选择值,该值需要为range的索引。 | +| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 | +| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 | 时间选择器:type=time - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

containsecond

-

boolean

-

false

-

-

时间选择器是否包含秒。

-

selected

-

string

-

当前时间

-

-

设置时间选择器的默认取值,格式为 HH:mm;

-

当包含秒时,格式为HH:mm:ss。

-

hours

-

number

-

241-4

-

-5+

-

-

设置时间选择器采用的时间格式,可选值:

-
  • 12:按照12小时制显示,用上午和下午进行区分;
  • 24:按照24小时制显示。
    说明:

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 | +| selected | string | 当前时间 | 否 | 设置时间选择器的默认取值,格式为 HH:mm;
当包含秒时,格式为HH:mm:ss。 | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式,可选值:
- 12:按照12小时制显示,用上午和下午进行区分;
- 24:按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | 日期选择器:type=date - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

start

-

<time>

-

1970-1-1

-

-

设置日期选择器的起始时间,格式为 YYYY-MM-DD。

-

end

-

<time>

-

2100-12-31

-

-

设置日期选择器的结束时间,格式为 YYYY-MM-DD。

-

selected

-

string

-

当前日期

-

-

设置日期选择器的默认选择值,格式为 YYYY-MM-DD。

-

lunar5+

-

boolean

-

false

-

-

设置日期选择器弹窗界面是否为农历展示。

-

lunarswitch

-

boolean

-

false

-

-

设置日期选择器是否显示农历开关,显示农历开关时,可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时,开关状态为开,当设置不显示农历时,开关状态为关。手机生效。

-
说明:

仅手机和平板设备支持。

-
-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| start | <time> | 1970-1-1 | 否 | 设置日期选择器的起始时间,格式为 YYYY-MM-DD。 | +| end | <time> | 2100-12-31 | 否 | 设置日期选择器的结束时间,格式为 YYYY-MM-DD。 | +| selected | string | 当前日期 | 否 | 设置日期选择器的默认选择值,格式为 YYYY-MM-DD。 | +| lunar5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关,显示农历开关时,可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时,开关状态为开,当设置不显示农历时,开关状态为关。手机生效。 | 日期时间选择器:type=datetime,日期的选择范围为本年的日月。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

selected

-

string

-

当前日期时间

-

-

设置日期时间选择器的默认取值,格式有两种,为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm,不设置年时,默认使用当前年,该取值表示选择器弹窗时弹窗界面的默认选择值。

-

hours

-

number

-

241-4

-

-5+

-

-

设置日期时间选择器采用的时间格式,可选值:

-
  • 12:按照12小时制显示,用上午和下午进行区分;
  • 24:按照24小时制显示。
    说明:

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-

lunar5+

-

boolean

-

false

-

-

设置日期时间选择器弹窗界面是否为农历展示。

-

lunarswitch

-

boolean

-

false

-

-

设置日期时间选择器是否显示农历开关,显示农历开关时,可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时,开关状态为开,当设置不显示农历时,开关状态为关。手机生效。

-
说明:

仅手机和平板设备支持。

-
-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值,格式有两种,为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm,不设置年时,默认使用当前年,该取值表示选择器弹窗时弹窗界面的默认选择值。 | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式,可选值:
- 12:按照12小时制显示,用上午和下午进行区分;
- 24:按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | +| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关,显示农历开关时,可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时,开关状态为开,当设置不显示农历时,开关状态为关。手机生效。 | 多列文本选择器:type=multi-text - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

columns

-

number

-

-

-

-

设置多列文本选择器的列数。

-

range

-

二维Array

-

-

-

-

设置多列文本选择器的选择值,该值为二维数组。长度表示多少列,数组的每项表示每列的数据,如 [["a","b"], ["c","d"]]。

-
说明:

使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:[["a","b"], ["c","d"]]。

-
-

selected

-

Array

-

[0,0,0,…]

-

-

设置多列文本选择器的默认值,每一列被选中项对应的索引构成的数组,该取值表示选择器弹窗时弹窗界面的默认选择值。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#ffffff

-

-

候选项字体颜色。

-

font-size

-

<length>

-

16px

-

-

候选项字体尺寸,类型length,单位px。

-

selected-color

-

<color>

-

#ff0a69f7

-

-

选中项字体颜色。

-

selected-font-size

-

<length>

-

20px

-

-

选中项字体尺寸,类型length,单位px。

-

disappear-color5+

-

<color>

-

#ffffff

-

-

渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。

-
说明:

仅手机和平板设备支持。

-
-

disappear-font-size5+

-

<length>

-

14px

-

-

渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。

-
说明:

仅手机和平板设备支持。

-
-

font-family

-

string

-

sans-serif

-

-

选项字体类型。字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- -## 事件 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| columns | number | - | 是 | 设置多列文本选择器的列数。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择值,该值为二维数组。长度表示多少列,数组的每项表示每列的数据,如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:[["a","b"], ["c","d"]]。 | +| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值,每一列被选中项对应的索引构成的数组,该取值表示选择器弹窗时弹窗界面的默认选择值。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff | 否 | 候选项字体颜色。 | +| font-size | <length> | 16px | 否 | 候选项字体尺寸,类型length,单位px。 | +| selected-color | <color> | #ff0a69f7 | 否 | 选中项字体颜色。 | +| selected-font-size | <length> | 20px | 否 | 选中项字体尺寸,类型length,单位px。 | +| disappear-color5+ | <color> | \#ffffff | 否 | 渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。 | +| disappear-font-size5+ | <length> | 14px | 否 | 渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。 | +| font-family | string | sans-serif | 否 | 选项字体类型。字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + + +## 事件 仅支持如下事件: type=text: - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ newValue: newValue, newSelected: newSelected }

-

文本选择器选定值后触发该事件。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { newValue: newValue, newSelected: newSelected } | 文本选择器选定值后触发该事件。 | type=time: - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ hour: hour, minute: minute, [second:second] }

-

时间选择器选定值后触发该事件。

-

包含秒时,返回时分秒。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { hour: hour, minute: minute, [second:second]} | 时间选择器选定值后触发该事件。
包含秒时,返回时分秒。 | type=date: - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year:year, month:month, day:day }

-

日期选择器选择值后触发该事件。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { year:year, month:month, day:day } | 日期选择器选择值后触发该事件。 | type=datetime: - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year:year, month:month, day:day, hour:hour, minute:minute }

-

日期时间选择器选择值后触发该事件。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { year:year, month:month, day:day,  hour:hour, minute:minute } | 日期时间选择器选择值后触发该事件。 | type=multi-text: - - - - - - - - - - -

名称

-

参数

-

描述

-

columnchange

-

{ column:column, newValue:newValue, newSelected:newSelected }

-

多列文本选择器某一列的值改变时触发该事件,column:第几列修改,newValue:选中的值,newSelected:选中值对应的索引。

-
- -## 方法 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| columnchange | { column:column, newValue:newValue, newSelected:newSelected } | 多列文本选择器某一列的值改变时触发该事件,column:第几列修改,newValue:选中的值,newSelected:选中值对应的索引。 | + + +## 方法 不支持。 -## 示例 + +## 示例 ``` @@ -621,5 +183,4 @@ export default { } ``` -![](figures/sssssss.png) - +![zh-cn_image_0000001173324845](figures/zh-cn_image_0000001173324845.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md index c49072a3cf378833f26a6bd6b6850ced66798034..aae0f7e0c51f613d8f0bc597b4c68e1eb525e717 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -1,708 +1,166 @@ -# picker +# picker + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 滑动选择器组件,类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性:↵ - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

-

-

-

该属性值不支持动态修改。可选择项有:

-
  • text:文本选择器。
  • date:日期选择器。
  • time:时间选择器。
  • datetime:日期时间选择器。
  • multi-text:多列文本选择器。
-
- -### 普通选择器 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性:↵ + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | - | 否 | 该属性值不支持动态修改。可选择项有:
- text:文本选择器。
- date:日期选择器。
- time:时间选择器。
- datetime:日期时间选择器。
- multi-text:多列文本选择器。 | + + +### 普通选择器 滑动选择器类型设置为text时表示普通选择器。 - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

range

-

Array

-

-

-

-

设置普通选择器的取值范围,如["15", "20", "25"]。

-
说明:

使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:["15", "20", "25"]。

-
-

selected

-

string

-

0

-

-

设置普通选择器弹窗的默认取值,取值需要是 range 的索引值,该取值表示选择器弹窗界面的默认选择值。

-

value

-

string

-

-

-

-

设置普通选择器的值。

-
- -### 日期选择器 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| range | Array | - | 否 | 设置普通选择器的取值范围,如["15", "20", "25"]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:["15", "20", "25"]。 | +| selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值,取值需要是 range 的索引值,该取值表示选择器弹窗界面的默认选择值。 | +| value | string | - | 否 | 设置普通选择器的值。 | + + +### 日期选择器 滑动选择器类型设置为date时表示日期选择器。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

start

-

<time>

-

1970-1-1

-

-

设置日期选择器的起始时间,格式为 YYYY-MM-DD。

-

end

-

<time>

-

2100-12-31

-

-

设置日期选择器的结束时间,格式为 YYYY-MM-DD。

-

selected

-

string

-

当前日期

-

-

设置日期选择器弹窗的默认取值,格式为 YYYY-MM-DD,该取值表示选择器弹窗界面的默认选择值。

-

value

-

string

-

-

-

-

设置日期选择器的值。

-

lunar5+

-

boolean

-

false

-

-

设置日期选择器弹窗界面是否为农历展示。

-

lunarswitch

-

boolean

-

false

-

-

设置日期选择器是否显示农历开关。当值为true时,显示农历开关,点击农历开关可切换公历和农历。当值为false时,不显示农历开关。

-
说明:

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时,开关按钮处于被选中状态。

-
-
- -### 时间选择器 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| start | <time> | 1970-1-1 | 否 | 设置日期选择器的起始时间,格式为 YYYY-MM-DD。 | +| end | <time> | 2100-12-31 | 否 | 设置日期选择器的结束时间,格式为 YYYY-MM-DD。 | +| selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值,格式为 YYYY-MM-DD,该取值表示选择器弹窗界面的默认选择值。 | +| value | string | - | 是 | 设置日期选择器的值。 | +| lunar5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时,显示农历开关,点击农历开关可切换公历和农历。当值为false时,不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅手机和平板设备支持。 当lunarswitch=true且lunar=true时,开关按钮处于被选中状态。 | + + +### 时间选择器 滑动选择器类型设置为time时表示时间选择器。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

containsecond

-

boolean

-

false

-

-

设置时间选择器是否包含秒。

-

selected

-

string

-

当前时间

-

-

设置时间选择器弹窗的默认取值,格式为 HH:mm;当包含秒时,格式为HH:mm:ss,

-

该取值表示选择器弹窗界面的默认选择值。

-

value

-

string

-

-

-

-

设置时间选择器的值。

-

hours

-

number

-

241-4

-

-5+

-

-

设置时间选择器采用的时间格式,可选值:

-
  • 12:按照12小时制显示,用上午和下午进行区分;
  • 24:按照24小时制显示。
    说明:

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-
- -### 日期时间选择器 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 | +| selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值,格式为 HH:mm;当包含秒时,格式为HH:mm:ss,
该取值表示选择器弹窗界面的默认选择值。 | +| value | string | - | 否 | 设置时间选择器的值。 | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式,可选值:
- 12:按照12小时制显示,用上午和下午进行区分;
- 24:按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | + + +### 日期时间选择器 滑动选择器类型设置为datetime时表示日期时间选择器,日期的选择范围为本年的日月。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

selected

-

string

-

当前日期时间

-

-

设置日期时间选择器弹窗的默认取值,有两种可选格式。

-
  • 月日时分:MM-DD-HH-mm
  • 年月日时分:YYYY-MM-DD-HH-mm
-

不设置年时,默认使用当前年,该取值表示选择器弹窗界面的默认选择值。

-

value

-

string

-

-

-

-

设置日期时间选择器的值。

-

hours

-

number

-

241-4

-

-5+

-

-

设置日期时间选择器采用的时间格式,可选值:

-
  • 12:按照12小时制显示,用上午和下午进行区分;
  • 24:按照24小时制显示。
    说明:

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-

lunar5+

-

boolean

-

false

-

-

设置日期时间选择器弹窗界面是否为农历展示。

-

lunarswitch

-

boolean

-

false

-

-

设置日期选择器是否显示农历开关。当值为true时,显示农历开关,点击农历开关可切换公历和农历。当值为false时,不显示农历开关。

-
说明:

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时,开关按钮处于被选中状态。

-
-
- -### 多列文本选择器 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值,有两种可选格式。
- 月日时分:MM-DD-HH-mm
- 年月日时分:YYYY-MM-DD-HH-mm
不设置年时,默认使用当前年,该取值表示选择器弹窗界面的默认选择值。 | +| value | string | - | 是 | 设置日期时间选择器的值。 | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式,可选值:
- 12:按照12小时制显示,用上午和下午进行区分;
- 24:按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时,显示农历开关,点击农历开关可切换公历和农历。当值为false时,不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅手机和平板设备支持。 当lunarswitch=true且lunar=true时,开关按钮处于被选中状态。 | + + +### 多列文本选择器 滑动选择器类型设置为multi-text时表示多列文本选择器。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

columns

-

number

-

-

-

-

设置多列文本选择器的列数。

-

range

-

二维Array

-

-

-

-

设置多列文本选择器的选择项,其中range 为二维数组。长度表示多少列,数组的每项表示每列的数据,如 [["a","b"], ["c","d"]]。

-
说明:

使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:[["a","b"], ["c","d"]]。

-
-

selected

-

Array

-

[0,0,0,…]

-

-

设置多列文本选择器弹窗的默认值,每一列被选中项对应的索引构成的数组,该取值表示选择器弹窗界面的默认选择值。

-

value

-

Array

-

-

-

-

设置多列文本选择器的值,每一列被选中项对应的值构成的数组。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

-

-

-

选择器的文本颜色。

-

font-size

-

<length>

-

-

-

-

选择器的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

letter-spacing

-

<length>

-

0

-

-

选择器的字符间距。见text组件的letter-spacing样式属性

-

text-decoration

-

string

-

-

-

-

选择器的文本修饰。见text组件的text-decoration样式属性

-

font-style

-

string

-

normal

-

-

选择器的字体样式。见text组件的font-style样式属性

-

font-weight

-

number | string

-

normal

-

-

选择器的字体粗细。见text组件的font-weight样式属性

-

font-family

-

string

-

sans-serif

-

-

选择器的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

line-height

-

<length>

-

0px

-

-

选择器的文本行高。

-

column-height5+

-

<length>

-

-

-

-

选择器的选择项列表高度。

-
说明:

仅手机和平板设备支持。

-
-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - -### 普通选择器 - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ newValue: newValue, newSelected: newSelected }

-

普通选择器选择值后点击弹窗中的确定按钮时触发该事件(newSelected为索引)。

-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -### 日期选择器 - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year: year, month: month, day: day }

-

日期选择器选择值后点击弹窗中的确认按钮时触发该事件。

-
说明:

month值范围为: 0(1月)~11(12月)。5+

-
-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -### 日期时间选择器 - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year: year, month: month, day: day, hour: hour, minute: minute}

-

日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。

-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -### 时间选择器 - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ hour: hour, minute: minute, [second: second] }

-

时间选择器选择值后点击弹窗中的确认按钮时触发该事件,当使用时分秒时,还包含秒数据。

-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -### 多列文本选择器 - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }

-

多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件,其中:

-
  • newValue:被选中项对应的值构成的数组。
  • newSelected:被选中项对应的索引构成的数组,两者的长度和range的长度一致。
-

columnchange

-

{ column: column, newValue: newValue, newSelected: newSelected }

-

多列文本选择器中某一列的值改变时触发该事件,其中:

-
  • column:第几列修改。
  • newValue:选中的值。
  • newSelected:选中值对应的索引。
-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -## 方法 - -除支持[通用方法](js-components-common-methods.md)外,支持如下方法: - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

-

-

显示 picker。

-
- -## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| columns | number | - | 是 | 设置多列文本选择器的列数。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择项,其中range 为二维数组。长度表示多少列,数组的每项表示每列的数据,如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:data:[["a","b"], ["c","d"]]。 | +| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值,每一列被选中项对应的索引构成的数组,该取值表示选择器弹窗界面的默认选择值。 | +| value | Array | - | 否 | 设置多列文本选择器的值,每一列被选中项对应的值构成的数组。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| text-color | <color> | - | 否 | 选择器的文本颜色。 | +| font-size | <length> | - | 否 | 选择器的文本尺寸。 | +| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| letter-spacing | <length> | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight | number \| string | normal | 否 | 选择器的字体粗细。见[text组件的font-weight样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 选择器的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| line-height | <length> | 0px | 否 | 选择器的文本行高。 | +| column-height5+ | <length> | - | 否 | 选择器的选择项列表高度。 | + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + + +### 普通选择器 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { newValue: newValue, newSelected: newSelected } | 普通选择器选择值后点击弹窗中的确定按钮时触发该事件(newSelected为索引)。 | +| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | + + +### 日期选择器 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> month值范围为: 0(1月)~11(12月)。5+ | +| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | + + +### 日期时间选择器 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { year: year, month: month, day: day,  hour: hour, minute: minute} | 日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。 | +| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | + + +### 时间选择器 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { hour: hour, minute: minute, [second: second] } | 时间选择器选择值后点击弹窗中的确认按钮时触发该事件,当使用时分秒时,还包含秒数据。 | +| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | + + +### 多列文本选择器 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] } | 多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件,其中:
- newValue:被选中项对应的值构成的数组。
- newSelected:被选中项对应的索引构成的数组,两者的长度和range的长度一致。 | +| columnchange | { column: column, newValue: newValue, newSelected: newSelected } | 多列文本选择器中某一列的值改变时触发该事件,其中:
- column:第几列修改。
- newValue:选中的值。
- newSelected:选中值对应的索引。 | +| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | + + +## 方法 + +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,支持如下方法: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| show | - | 显示 picker。 | + + +## 示例 ``` @@ -829,5 +287,4 @@ export default { } ``` -![](figures/mmmm.gif) - +![zh-cn_image_0000001191939702](figures/zh-cn_image_0000001191939702.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md index 7cab19b45c3046537b850656563fdc81f09238f5..6052a8fea067fd39a6870faad84d93c0f80546f1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md @@ -1,97 +1,49 @@ -# piece +# piece + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 一种块状的入口,可包含图片和文本。常用于展示收件人,例如:邮件收件人或信息收件人。 -## 子组件 + +## 子组件 无 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

content

-

string

-

-

-

-

操作块文本内容。

-

closable

-

boolean

-

false

-

-

设置当前操作块是否显示删除图标,当显示删除图标时,点击删除图标会触发close事件。

-

icon

-

string

-

-

-

-

操作块删除图标的url,支持本地。

-
- -## 样式 - -支持[通用样式](js-components-common-styles.md)。 - ->![](../../public_sys-resources/icon-note.gif) **说明:** ->文本和图片默认在整个piece组件中居中。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

close

-

-

-

当piece组件点击删除图标触发,此时可以通过渲染属性if删除该组件。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| content | string | - | 是 | 操作块文本内容。 | +| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标,当显示删除图标时,点击删除图标会触发close事件。 | +| icon | string | - | 否 | 操作块删除图标的url,支持本地路径。 | + + +## 样式 + +支持[通用样式](../arkui-js/js-components-common-styles.md)。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 文本和图片默认在整个piece组件中居中。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| close | - | 当piece组件点击删除图标触发,此时可以通过渲染属性if删除该组件。 | + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -124,5 +76,4 @@ export default { } ``` -![](figures/11-1.gif) - +![zh-cn_image_0000001177428498](figures/zh-cn_image_0000001177428498.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md index 9be9c6722894dceabb7714da9fb126ef503369b7..9eaac1397d576e2515afc0e1f2970762deb05c9e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md @@ -1,480 +1,108 @@ -# progress +# progress + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 进度条,用于显示内容加载或操作处理进度。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

horizontal

-

-

设置进度条的类型,该属性不支持动态修改,可选值为:

-
  • horizontal:线性进度条;
  • circular:loading样式进度条;
  • ring:圆环形进度条;
  • scale-ring:带刻度圆环形进度条
  • arc:弧形进度条。
  • eclipse5+:圆形进度条,展现类似月圆月缺的进度展示效果。
-
+ +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | horizontal | 否 | 设置进度条的类型,该属性不支持动态修改,可选值为:
- horizontal:线性进度条;
- circular:loading样式进度条;
- ring:圆环形进度条;
- scale-ring:带刻度圆环形进度条
- arc:弧形进度条。
- eclipse5+:圆形进度条,展现类似月圆月缺的进度展示效果。 | 不同类型的进度条还支持不同的属性: -- 类型为horizontal、ring、scale-ring时,支持如下属性: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

percent

-

number

-

0

-

-

当前进度。取值范围为0-100。

-

secondarypercent

-

number

-

0

-

-

次级进度。取值范围为0-100。

-
- -- 类型为ring、scale-ring时,支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

clockwise

-

boolean

-

true

-

-

圆环形进度条是否采用顺时针。

-
- -- 类型为arc、eclipse5+时,支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

percent

-

number

-

0

-

-

当前进度。取值范围为0-100。

-
- - -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +- 类型为horizontal、ring、scale-ring时,支持如下属性: + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | + | secondarypercent | number | 0 | 否 | 次级进度。取值范围为0-100。 | + +- 类型为ring、scale-ring时,支持如下属性: + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | clockwise | boolean | true | 否 | 圆环形进度条是否采用顺时针。 | + +- 类型为arc、eclipse5+时,支持如下属性: + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: type=horizontal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#ff007dff

-

-

设置进度条的颜色。

-

stroke-width

-

<length>

-

4px

-

-

-

设置进度条的宽度。

-

background-color

-

<color>

-

-

-

-

设置进度条的背景色。

-

secondary-color

-

<color>

-

-

-

-

设置次级进度条的颜色。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ff007dff | 否 | 设置进度条的颜色。 | +| stroke-width | <length> | 4px | 否 | 设置进度条的宽度。 | +| background-color | <color> | - | 否 | 设置进度条的背景色。 | +| secondary-color | <color> | - | 否 | 设置次级进度条的颜色。 | type=circular - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

-

loading进度条上的圆点颜色。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | - | 否 | loading进度条上的圆点颜色。 | type=ring, scale-ring - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color> | <linear-gradient>

-

-

-

-

环形进度条的颜色,ring类型支持线性渐变色设置。

-
说明:

线性渐变色仅支持两个颜色参数设置格式,如color = linear-gradient(#ff0000, #00ff00)。

-
-

background-color

-

<color>

-

-

-

-

环形进度条的背景色。

-

secondary-color

-

<color>

-

-

-

-

环形次级进度条的颜色。

-

stroke-width

-

<length>

-

10px

-

-

环形进度条的宽度。

-

scale-width

-

<length>

-

-

-

-

带刻度的环形进度条的刻度粗细,类型为scale-ring生效。

-

scale-number

-

number

-

120

-

-

带刻度的环形进度条的刻度数量,类型为scale-ring生效。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> \| <linear-gradient> | - | 否 | 环形进度条的颜色,ring类型支持线性渐变色设置。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 线性渐变色仅支持两个颜色参数设置格式,如color = linear-gradient(\#ff0000, \#00ff00)。 | +| background-color | <color> | - | 否 | 环形进度条的背景色。 | +| secondary-color | <color> | - | 否 | 环形次级进度条的颜色。 | +| stroke-width | <length> | 10px | 否 | 环形进度条的宽度。 | +| scale-width | <length> | - | 否 | 带刻度的环形进度条的刻度粗细,类型为scale-ring生效。 | +| scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量,类型为scale-ring生效。 | type=arc - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

-

-

弧形进度条的颜色。

-

background-color

-

<color>

-

-

-

-

-

弧形进度条的背景色。

-

stroke-width

-

<length>

-

4px

-

-

弧形进度条的宽度。

-
说明:

进度条宽度越大,进度条越靠近圆心,进度条始终在半径区域内。

-
-

start-angle

-

<deg>

-

240

-

-

弧形进度条起始角度,以时钟0点为基线,取值范围为0到360(顺时针)。

-

total-angle

-

<deg>

-

240

-

-

弧形进度条总长度,范围为-360到360,负数标识起点到终点为逆时针。

-

center-x

-

<length>

-

弧形进度条宽度的一半

-

-

弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-y和radius一起使用。

-

center-y

-

<length>

-

弧形进度条高度的一半

-

-

弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-x和radius一起使用。

-

radius

-

<length>

-

弧形进度条宽高最小值的一半

-

-

弧形进度条半径,该样式需要和center-x和center-y一起使用。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | - | 否 | 弧形进度条的颜色。 | +| background-color | <color> | - | 否 | 弧形进度条的背景色。 | +| stroke-width | <length> | 4px | 否 | 弧形进度条的宽度。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 进度条宽度越大,进度条越靠近圆心,进度条始终在半径区域内。 | +| start-angle | <deg> | 240 | 否 | 弧形进度条起始角度,以时钟0点为基线,取值范围为0到360(顺时针)。 | +| total-angle | <deg> | 240 | 否 | 弧形进度条总长度,范围为-360到360,负数标识起点到终点为逆时针。 | +| center-x | <length> | 弧形进度条宽度的一半 | 否 | 弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-y和radius一起使用。 | +| center-y | <length> | 弧形进度条高度的一半 | 否 | 弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-x和radius一起使用。 | +| radius | <length> | 弧形进度条宽高最小值的一半 | 否 | 弧形进度条半径,该样式需要和center-x和center-y一起使用。 | type=eclipse5+ - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

-

圆形进度条的颜色。

-

background-color

-

<color>

-

-

-

-

弧形进度条的背景色。

-
- -## 事件 - -支持[通用事件](js-components-common-events.md)。 - -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | - | 否 | 圆形进度条的颜色。 | +| background-color | <color> | - | 否 | 弧形进度条的背景色。 | + + +## 事件 + +支持[通用事件](../arkui-js/js-components-common-events.md)。 + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -500,5 +128,6 @@ type=eclipse5+ } ``` -![](figures/progress.png) +![zh-cn_image_0000001180339632](figures/zh-cn_image_0000001180339632.png) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md index d1149797eb3119b84e75a83ac0fd36388c5185b0..b0c73ee2aedfc933b78457fa0dbf535b6dbcd41f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md @@ -1,111 +1,57 @@ -# qrcode +# qrcode + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 生成并显示二维码。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

string

-

-

-

-

用来生成二维码的内容。

-

type

-

string

-

rect

-

-

二维码类型。可能选项有:

-
  • rect:矩形二维码。
  • circle:圆形二维码。
-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#000000

-

-

二维码颜色。

-

background-color

-

<color>

-

#ffffff

-

-

二维码背景颜色。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- width和height不一致时,取二者较小值作为二维码的边长。且最终生成的二维码居中显示。 ->- width和height只设置一个时,取设置的值作为二维码的边长。都不设置时,使用200px作为默认边长。 - -## 事件 - -支持[通用事件](js-components-common-events.md)。 - -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | string | - | 是 | 用来生成二维码的内容。 | +| type | string | rect | 否 | 二维码类型。可能选项有:
- rect:矩形二维码。
- circle:圆形二维码。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#000000 | 否 | 二维码颜色。 | +| background-color | <color> | \#ffffff | 否 | 二维码背景颜色。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - width和height不一致时,取二者较小值作为二维码的边长。且最终生成的二维码居中显示。 +> +> +> - width和height只设置一个时,取设置的值作为二维码的边长。都不设置时,使用200px作为默认边长。 +> + + +## 事件 + +支持[通用事件](../arkui-js/js-components-common-events.md)。 + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -174,5 +120,6 @@ export default { } ``` -![](figures/12.gif) +![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md index 40811a1e11b65bcddeea2c38c74af62550327e78..dbd604a380dd9c8f5b589b19bd8428ec5f9351ec 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md @@ -1,197 +1,65 @@ -# rating +# rating + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 评分条,表示用户使用感受的衡量标准条。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

numstars

-

number

-

5

-

-

设置评分条的星级总数。

-

rating

-

number

-

0

-

-

设置评分条当前评星数。

-

stepsize

-

number

-

0.5

-

-

设置评分条的评星步长。

-
说明:

仅手机和平板设备支持

-
-

indicator

-

boolean

-

false

-

-

设置评分条是否作为一个指示器,此时用户不可操作。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

star-background

-

string

-

-

-

-

设置单个星级未选中的背景图片,只支持本地路径图片,图片格式为png和jpg。

-

star-foreground

-

string

-

-

-

-

设置单个星级选中的前景图片,只支持本地路径图片,图片格式为png和jpg。

-

star-secondary

-

string

-

-

-

-

设置单个星级部分选中的次级背景图片,该图片会覆盖背景图片,只支持本地路径图片,图片格式为png和jpg。

-

width

-

<length>|<percentage>

-

120px

-

60px(不可操作)

-

-

默认值是在未设置自定义资源和评分星数时,使用5个星和默认资源下的宽度值。

-

height

-

<length>|<percentage>

-

24px

-

12px(不可操作)

-

-

默认值是在未设置自定义资源和评分星数时,使用5个星和默认资源下的高度值。

-

rtl-flip

-

boolean

-

true

-

-

在RTL文字方向下是否自动翻转图源。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->star-background,star-secondary,star-foreground三个星级图源必须全部设置,否则默认的星级颜色为灰色,以此提示图源设置错误。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ rating: number }

-

评分条的评星发生改变时触发该回调。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| numstars | number | 5 | 否 | 设置评分条的星级总数。 | +| rating | number | 0 | 否 | 设置评分条当前评星数。 | +| stepsize | number | 0.5 | 否 | 设置评分条的评星步长。 | +| indicator | boolean | false | 否 | 设置评分条是否作为一个指示器,此时用户不可操作。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| star-background | string | - | 否 | 设置单个星级未选中的背景图片,只支持本地路径图片,图片格式为png和jpg。 | +| star-foreground | string | - | 否 | 设置单个星级选中的前景图片,只支持本地路径图片,图片格式为png和jpg。 | +| star-secondary | string | - | 否 | 设置单个星级部分选中的次级背景图片,该图片会覆盖背景图片,只支持本地路径图片,图片格式为png和jpg。 | +| width | <length>\|<percentage> | 120px
60px(不可操作) | 否 | 默认值是在未设置自定义资源和评分星数时,使用5个星和默认资源下的宽度值。 | +| height | <length>\|<percentage> | 24px
12px(不可操作) | 否 | 默认值是在未设置自定义资源和评分星数时,使用5个星和默认资源下的高度值。 | +| rtl-flip | boolean | true | 否 | 在RTL文字方向下是否自动翻转图源。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> star-background,star-secondary,star-foreground三个星级图源必须全部设置,否则默认的星级颜色为灰色,以此提示图源设置错误。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { rating:  number } | 评分条的评星发生改变时触发该回调。 | + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -225,5 +93,4 @@ export default { } ``` -![](figures/zh-cn_image_0000001198670487.png) - +![zh-cn_image_0000001198670487](figures/zh-cn_image_0000001198670487.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md index 3886b92819dff6fc9bd9b1689b4dd2da39ff98e0..0cf2771909362ece954b1c4f55a9562ad0a7fc03 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md @@ -1,60 +1,56 @@ -# richtext +# richtext -富文本组件,用于展示富文本信息,内容需要写在元素标签内。 -## 权限列表 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 该组件从API version 6开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 富文本内容需要写在元素标签内。 + +富文本组件,用于展示富文本信息。 + +## 权限列表 无 -## 子组件 -不包含子组件。 +## 属性 + +仅支持[通用属性](../arkui-js/js-components-common-attributes.md)中的id、style和class属性。 + -## 属性 +## 样式 -仅支持[通用属性](js-components-common-attributes.md)中的id、style和class属性。 +仅支持[通用样式](../arkui-js/js-components-common-styles.md)中的display和visibility样式。 -## 样式 -仅支持[通用样式](js-components-common-styles.md)中的display和visibility样式。 +## 事件 -## 事件 +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| start | - | 开始加载时触发。 | +| complete | - | 加载完成时触发。 | - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

开始加载时触发。

-

complete

-

-

-

加载完成时触发。

-
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 不支持focus、blur、key事件。 +> +> - 不支持无障碍事件。 +> +> - 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。 +> +> - richtext内容不建议超过一个屏幕高度,超出部分不会显示。 +> +> - 不支持设置宽度,默认撑开全屏。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 不支持focus、blur、key事件。 ->- 不支持无障碍事件。 ->- 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。 ->- richtext内容不建议超过一个屏幕高度,超出部分不会显示。 ->- 不支持设置宽度,默认撑开全屏。 -## 示例 +## 方法 + +不支持。 + + +## 示例 ``` @@ -68,26 +64,20 @@ export default { data: { content: ` -

h1标题

-

h1斜体

-

h1下划线

-

h2标题

-

h3标题

-

p常规


-
-

字体大小35px,行高45px

-

- 这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字 - 这是一段文字

-
+
+ +

h1

+

文本测试(h1测试)

+

h2

+

文本测试(h2测试)

+
`, }, onLoadStart() { - console.error("start load rich text.") + console.error("start load rich text:" + JSON.stringify()) }, onLoadEnd() { - console.error("end load rich text.") + console.error("end load rich text:" + JSON.stringify()) } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md index 4f36d73e57139c86f4ead73dfd50111dba71c524..7e8e09b155d0c3d1b8d0e60682bf07c3bc3e9164 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md @@ -1,275 +1,71 @@ -# search +# search + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 提供搜索框组件,用于提供用户搜索内容的输入区域。 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| icon | string | - | 否 | 搜索图标,默认使用系统搜索图标,图标格式为svg,jpg和png。 | +| hint | string | - | 否 | 搜索提示文字。 | +| value | string | - | 否 | 搜索框搜索文本值。 | +| searchbutton5+ | string | - | 否 | 搜索框末尾搜索按钮文本值。 | +| menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

icon

-

string

-

-

-

-

搜索图标,默认使用系统搜索图标,图标格式为svg,jpg和png。

-

hint

-

string

-

-

-

-

搜索提示文字。

-

value

-

string

-

-

-

-

搜索框搜索文本值。

-

searchbutton5+

-

string

-

-

-

-

搜索框末尾搜索按钮文本值。

-

menuoptions5+

-

Array<MenuOption>

-

-

-

-

设置文本选择弹框点击更多按钮之后显示的菜单项。

-
+**表1** MenuOption5+ -**表 1** MenuOption5+ +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| icon | string | 菜单选项中的图标路径。 | +| content | string | 菜单选项中的文本内容。 | - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

icon

-

string

-

菜单选项中的图标路径。

-

content

-

string

-

菜单选项中的文本内容。

-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

-

搜索框的文本颜色。

-

font-size

-

<length>

-

16px

-

-

搜索框的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

placeholder-color

-

<color>

-

#99000000

-

-

搜索框的提示文本颜色。

-

font-weight

-

number | string

-

normal

-

-

搜索框的字体粗细,见text组件font-weight的样式属性

-

font-family

-

string

-

sans-serif

-

-

搜索框的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

caret-color6+

-

<color>

-

-

-

-

设置输入光标的颜色。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#e6000000 | 否 | 搜索框的文本颜色。 | +| font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 | +| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| placeholder-color | <color> | \#99000000
| 否 | 搜索框的提示文本颜色。 | +| font-weight | number \| string | normal | 否 | 搜索框的字体粗细,见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 搜索框的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | -## 事件 -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ text:newText }

-

输入内容发生变化时触发。

-
说明:

改变value属性值不会触发该回调。

-
-

submit

-

{ text:submitText }

-

点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。

-

translate5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。

-

share5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。

-

search5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。

-

optionselect5+

-

{ index:optionIndex, value: selectedText }

-

文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。

-
+除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -## 方法 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { text:newText } | 输入内容发生变化时触发。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 改变value属性值不会触发该回调。 | +| submit | { text:submitText } | 点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。 | +| translate5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。 | +| share5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。 | +| search5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。 | +| optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。 | -支持[通用方法](js-components-common-methods.md)。 -## 示例 +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -288,5 +84,4 @@ } ``` -![](figures/zh-cn_image_0000001153427082.png) - +![zh-cn_image_0000001153427082](figures/zh-cn_image_0000001153427082.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md index 54127fa0ecf141ba15cdcbd11388063fe042e691..8ddc87c5f32a728d67cf5a3ff700fb652b8d14e1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md @@ -1,79 +1,53 @@ -# select +# select + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 下拉选择按钮,可让用户在多个选项之间选择。 -## 权限列表 +## 权限列表 无 -## 子组件 - -支持<[option](js-components-basic-option.md)\>。 - -## 属性 - -支持[通用属性](js-components-common-attributes.md)。 - -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

font-family

-

string

-

sans-serif

-

-

字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{newValue: newValue}

-

下拉选择新值后触发该事件,newValue的值为子组件option的value属性值。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- select组件不支持click事件。 - -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 子组件 + +支持<[option](../arkui-js/js-components-basic-option.md)>。 + + +## 属性 + +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| font-family | string | sans-serif | 否 | 字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | {newValue: newValue} | 下拉选择新值后触发该事件,newValue的值为子组件option的value属性值。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - select组件不支持click事件。 + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -101,5 +75,4 @@ } ``` -![](figures/zh-cn_image_0000001152588538.png) - +![zh-cn_image_0000001152588538](figures/zh-cn_image_0000001152588538.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md index 19644290837f2f68c82b738f63ba592a6fe76404..fec6983512032ad84693f293302f85ed66430b3c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md @@ -1,235 +1,59 @@ -# slider +# slider + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 滑动条组件,用来快速调节设置值,如音量、亮度等。 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| min | number | 0 | 否 | 滑动选择器的最小值。 | +| max | number | 100 | 否 | 滑动选择器的最大值。 | +| step | number | 1 | 否 | 每次滑动的步长。 | +| value | number | 0 | 否 | 滑动选择器的初始值。 | +| mode5+ | string | outset | 否 | 滑动条样式:
- outset:滑块在滑杆上;
- inset:滑块在滑杆内。 | +| showsteps5+ | boolean | false | 否 | 是否显示步长标识。 | +| showtips5+ | boolean | false | 否 | 滑动时是否有气泡提示百分比。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

min

-

number

-

0

-

-

滑动选择器的最小值。

-

max

-

number

-

100

-

-

滑动选择器的最大值。

-

step

-

number

-

1

-

-

每次滑动的步长。

-

value

-

number

-

0

-

-

滑动选择器的初始值。

-

mode5+

-

string

-

outset

-

-

滑动条样式:

-
  • outset:滑块在滑杆上;
  • inset:滑块在滑杆内。
    说明:

    仅手机和平板设备支持。

    -
    -
-

showsteps5+

-

boolean

-

false

-

-

是否显示步长标识;

-
说明:

仅手机和平板设备支持。

-
-

showtips5+

-

boolean

-

false

-

-

滑动时是否有气泡提示百分比;

-
说明:

仅手机和平板设备支持。

-
-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#19000000

-

-

滑动条的背景颜色。

-

selected-color

-

<color>

-

#ff007dff

-

-

滑动条的已选择颜色。

-

block-color

-

<color>

-

#ffffff

-

-

滑动条的滑块颜色。

-
说明:

仅手机、平板和智慧屏设备支持。

-
-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | #19000000 | 否 | 滑动条的背景颜色。 | +| selected-color | <color> | #ff007dff | 否 | 滑动条的已选择颜色。 | +| block-color | <color> | \#ffffff | 否 | 滑动条的滑块颜色。 | -## 事件 -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +## 事件 - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

ChangeEvent

-

选择值发生变化时触发该事件。

-
+除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -**表 1** ChangeEvent +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | ChangeEvent | 选择值发生变化时触发该事件。 | - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

progress(deprecated5+)

-

string

-

当前slider的进度值。

-

isEnd(deprecated5+)

-

string

-

当前slider是否拖拽结束,可选值为:

-
  • true:slider拖拽结束。
  • false:slider拖拽中。
-

value5+

-

number

-

当前slider的进度值。

-

mode5+

-

string

-

当前change事件的类型,可选值为:

-
  • start:slider的值开始改变。
  • move:slider的值跟随手指拖动中。
  • end:slider的值结束改变。
-
+**表1** ChangeEvent -## 示例 +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| value5+ | number | 当前slider的进度值。 | +| mode5+ | string | 当前change事件的类型,可选值为:
- start:slider的值开始改变。
- move:slider的值跟随手指拖动中。
- end:slider的值结束改变。 | + + +## 示例 ``` @@ -248,7 +72,6 @@ justify-content: center; align-items: center; - } ``` @@ -276,5 +99,6 @@ export default { } ``` -![](figures/slider.png) +![zh-cn_image_0000001173324709](figures/zh-cn_image_0000001173324709.png) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md index 657a0bbd8a917bb6316c5d2a1e91280679de808d..1c8e3af694f3bbe4bbad43fb87d29072efd44cc2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md @@ -1,129 +1,54 @@ -# span +# span -作为<[text](js-components-basic-text.md)\>子组件提供文本修饰能力。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -## 权限列表 +作为<[text](../arkui-js/js-components-basic-text.md)>子组件提供文本修饰能力。 + +## 权限列表 无 -## 子组件 -支持子组件。 +## 子组件 + +支持子组件<span>。 + -## 属性 +## 属性 -支持[通用属性](js-components-common-attributes.md)。 +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->不支持focusable和disabled属性。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 不支持focusable和disabled属性。 -## 样式 + +## 样式 仅支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

-

设置文本段落的文本颜色。

-

font-size

-

<length>

-

30px

-

-

设置文本段落的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

-

设置文本段落的字体样式,见text组件font-style的样式属性

-

font-weight

-

number | string

-

normal

-

-

设置文本段落的字体粗细,见text组件font-weight的样式属性

-

text-decoration

-

string

-

none

-

-

设置文本段落的文本修饰,见text组件text-decoration样式属性

-

font-family

-

string

-

sans-serif

-

-

设置文本段落的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- -## 事件 - -仅支持[通用事件](js-components-common-events.md)中的click事件。 - -## 方法 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | - | 否 | 设置文本段落的文本颜色。 | +| font-size | <length> | 30px | 否 | 设置文本段落的文本尺寸。 | +| allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| font-style | string | normal | 否 | 设置文本段落的字体样式,见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight | number \| string | normal | 否 | 设置文本段落的字体粗细,见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| text-decoration | string | none | 否 | 设置文本段落的文本修饰,见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 设置文本段落的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + + +## 事件 + +仅支持[通用事件](../arkui-js/js-components-common-events.md)中的click事件。 + + +## 方法 不支持。 -## 示例 + +## 示例 ``` @@ -153,5 +78,4 @@ } ``` -![](figures/zh-cn_image_0000001152588626.png) - +![zh-cn_image_0000001152588626](figures/zh-cn_image_0000001152588626.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md index 95d5c8319bc71ac78ac0127e31aaecd63f476f35..9d8e6bfc8079d0aaeec0129c13ce97a55b366449 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md @@ -1,214 +1,63 @@ -# switch +# switch + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 开关选择器,通过开关,开启或关闭某个功能。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| checked | boolean | false | 否 | 是否选中。 | +| showtext | boolean | false | 否 | 是否显示文本。 | +| texton | string | "On" | 否 | 选中时显示的文本。 | +| textoff | string | "Off" | 否 | 未选中时显示的文本。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

checked

-

boolean

-

false

-

-

是否选中。

-

showtext

-

boolean

-

false

-

-

是否显示文本。

-

texton

-

string

-

"On"

-

-

选中时显示的文本。

-

textoff

-

string

-

"Off"

-

-

未选中时显示的文本。

-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

texton-color(Rich)

-

<color>

-

#000000

-

-

选中时显示的文本颜色。

-

textoff-color(Rich)

-

<color>

-

#000000

-

-

未选中时显示的文本颜色。

-

text-padding(Rich)

-

number

-

0px

-

-

texton/textoff中最长文本两侧距离滑块边界的距离。

-

font-size(Rich)

-

<length>

-

-

-

-

文本尺寸,仅设置texton和textoff生效。

-

allow-scale(Rich)

-

boolean

-

true

-

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

font-style(Rich)

-

string

-

normal

-

-

字体样式,仅设置texton和textoff生效。见text组件font-style的样式属性

-

font-weight(Rich)

-

number | string

-

normal

-

-

字体粗细,仅设置texton和textoff生效。见text组件的font-weight的样式属性

-

font-family(Rich)

-

string

-

sans-serif

-

-

字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。仅设置texton和textoff生效。

-
-## 事件 +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色。 | +| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色。 | +| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | +| font-size(Rich) | <length> | - | 否 | 文本尺寸,仅设置texton和textoff生效。 | +| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| font-style(Rich) | string | normal | 否 | 字体样式,仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight(Rich) | number \| string | normal | 否 | 字体粗细,仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family(Rich) | string | sans-serif | 否 | 字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。仅设置texton和textoff生效。 | - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ checked: checkedValue }

-

选中状态改变时触发该事件。

-
-## 方法 +## 事件 -支持[通用方法](js-components-common-methods.md)。 +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -## 示例 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { checked: checkedValue } | 选中状态改变时触发该事件。 | + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + +## 示例 ``` @@ -254,5 +103,4 @@ export default { } ``` -![](figures/zh-cn_image_0000001152862510.gif) - +![zh-cn_image_0000001152862510](figures/zh-cn_image_0000001152862510.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md index ffb96e5c30d14007417d421e196ab8e9458c6d25..d2975d0745deaf8be7f5e632ceaff68b80b410fd 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md @@ -1,320 +1,81 @@ -# text +# text -文本,用于呈现一段信息。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 该组件从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 文本的展示内容需要写在元素标签内。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 文本的展示内容需要写在元素标签内。 +文本,用于呈现一段信息。 -## 权限列表 +## 权限列表 无 -## 子组件 -支持<[span](js-components-basic-span.md)\>。 +## 子组件 + +支持<[span](../arkui-js/js-components-basic-span.md)>。 + -## 属性 +## 属性 -支持[通用属性](js-components-common-attributes.md)。 +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 -## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e5000000

-

-

设置文本的颜色。

-

font-size

-

<length>

-

30px

-

-

设置文本的尺寸。

-

allow-scale

-

boolean

-

true

-

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果需要支持动态生效,请参看config描述文件中config-changes标签。

-
-

letter-spacing

-

<length>

-

0px

-

-

设置文本的字符间距。

-

word-spacing7+

-

<length> | <percentage> | string

-

normal

-

-

设置文本之间的间距,string可选值为:

-

normal:默认的字间距。

-

font-style

-

string

-

normal

-

-

设置文本的字体样式,可选值为:

-
  • normal:标准的字体样式;
  • italic:斜体的字体样式。
-

font-weight

-

number | string

-

normal

-

-

设置文本的字体粗细,number类型取值[100, 900],默认为400,取值越大,字体越粗。

-
说明:

number取值必须为100的整数倍。

-
-

string类型取值支持如下四个值:lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

-

设置文本的文本修饰,可选值为:

-
  • underline:文字下划线修饰;
  • line-through:穿过文本的修饰线n
  • none:标准文本。
-

text-decoration-color7+

-

<color>

-

-

-

-

设置文本修饰线的颜色。

-

text-align

-

string

-

start

-

-

设置文本的文本对齐方式,可选值为:

-
  • left:文本左对齐;
  • center:文本居中对齐;
  • right:文本右对齐;
  • start:根据文字书写相同的方向对齐;
  • end:根据文字书写相反的方向对齐。
-
说明:

如文本宽度未指定大小,文本的宽度和父容器的宽度大小相等的情况下,对齐效果可能会不明显。

-
-

line-height

-

<length> | <percentage>7+ | string7+

-

0px1-6

-

normal7+

-

-

设置文本的文本行高,设置为0px时,不限制文本行高,自适应字体大小。string可选值为:

-

normal7+:默认的行高。

-

text-overflow

-

string

-

clip

-

-

在设置了最大行数的情况下生效,可选值为:

-
  • clip:将文本根据父容器大小进行裁剪显示;
  • ellipsis:根据父容器大小显示,显示不下的文本用省略号代替。需配合max-lines使用。
-

font-family

-

string

-

sans-serif

-

-

设置文本的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

max-lines

-

number | string7+

-

-

-

-

设置文本的最大行数,string类型可选值为:

-
  • auto7+:文本行数自适应容器高度。
-

min-font-size

-

<length>

-

-

-

-

文本最小字号,需要和文本最大字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。

-

max-font-size

-

<length>

-

-

-

-

文本最大字号,需要和文本最小字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。

-

font-size-step

-

<length>

-

1px

-

-

文本动态调整字号时的步长,需要设置最小,最大字号样式生效。

-

prefer-font-sizes

-

<array>

-

-

-

-

预设的字号集合,在动态尺寸调整时,优先使用预设字号集合中的字号匹配设置的最大行数,如果预设字号集合未设置,则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况,使用text-overflow设置项进行截断,设置预设尺寸集后,font-size、max-font-size、min-font-size和font-size-step不生效。

-

如:prefer-font-sizes: 12px,14px,16px

-

word-break6+

-

string

-

normal

-

-

设置文本折行模式,可选值为:

-
  • normal:默认换行规则,依据各自语言的规则,允许在字间发生换行。
  • break-all:对于非中文/日文/韩文的文本,可在任意字符间断行。
  • break-word:与break-all相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。
-

text-indent7+

-

<length>

-

-

-

-

设置首行缩进量。

-

white-space7+

-

string

-

pre

-

-

设置处理元素中空白的模式,可选值为:

-
  • normal:所有空格、回车、制表符都合并成一个空格,文本自动换行;
  • nowrap:所有空格、回车、制表符都合并成一个空格,文本不换行;
  • pre:所有东西原样输出;
  • pre-wrap:所有东西原样输出,文本换行;
  • pre-line:所有空格、制表符合并成一个空格,回车不变,文本换行。
-

adapt-height7+

-

boolean

-

false

-

-

文本大小是否自适应容器高度。

-
说明:

设置字体大小自适应相关样式后生效。

-
-
+除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 字体动态缩放:预设尺寸集合和最小最大字号调节基于是否满足最大行数要求,预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求,最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 ->- 文本换行:文本可以通过转义字符\\r\\n进行换行。 ->- 文本标签内支持以下转义字符:\\a,\\b,\\f,\\n,\\r,\\t,\\v,\\',\\",\\0。 ->- 当使用子组件span组成文本段落时,如果span属性样式异常,将导致text段落无法显示。 ->- letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件(span)组成的文本内容。 ->- text组件说明:不支持text内同时存在文本内容和span子组件。(如果同时存在,只显示span内的内容\) +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果需要支持动态生效,请参看config描述文件中config-changes标签。 | +| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | +| word-spacing7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距,string可选值为:
normal:默认的字间距。 | +| font-style | string | normal | 否 | 设置文本的字体样式,可选值为:
- normal:标准的字体样式;
- italic:斜体的字体样式。 | +| font-weight | number \| string | normal | 否 | 设置文本的字体粗细,number类型取值[100, 900],默认为400,取值越大,字体越粗。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> number取值必须为100的整数倍。
string类型取值支持如下四个值:lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 设置文本的文本修饰,可选值为:
- underline:文字下划线修饰;
- line-through:穿过文本的修饰线n
- none:标准文本。 | +| text-decoration-color7+ | <color> | - | 否 | 设置文本修饰线的颜色。 | +| text-align | string | start
| 否 | 设置文本的文本对齐方式,可选值为:
- left:文本左对齐;
- center:文本居中对齐;
- right:文本右对齐;
- start:根据文字书写相同的方向对齐;
- end:根据文字书写相反的方向对齐。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如文本宽度未指定大小,文本的宽度和父容器的宽度大小相等的情况下,对齐效果可能会不明显。 | +| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 否 | 设置文本的文本行高,设置为0px时,不限制文本行高,自适应字体大小。string可选值为:
normal7+:默认的行高。 | +| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效,可选值为:
- clip:将文本根据父容器大小进行裁剪显示;
- ellipsis:根据父容器大小显示,显示不下的文本用省略号代替。需配合max-lines使用。 | +| font-family | string | sans-serif | 否 | 设置文本的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| max-lines | number \| string7+ | - | 否 | 设置文本的最大行数,string类型可选值为:
- auto7+:文本行数自适应容器高度。 | +| min-font-size | <length> | - | 否 | 文本最小字号,需要和文本最大字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。 | +| max-font-size | <length> | - | 否 | 文本最大字号,需要和文本最小字号同时设置,支持文本字号动态变化。设置最大最小字体样式后,font-size不生效。 | +| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长,需要设置最小,最大字号样式生效。 | +| prefer-font-sizes | <array> | - | 否 | 预设的字号集合,在动态尺寸调整时,优先使用预设字号集合中的字号匹配设置的最大行数,如果预设字号集合未设置,则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况,使用text-overflow设置项进行截断,设置预设尺寸集后,font-size、max-font-size、min-font-size和font-size-step不生效。
如:prefer-font-sizes: 12px,14px,16px | +| word-break6+ | string | normal | 否 | 设置文本折行模式,可选值为:
- normal:默认换行规则,依据各自语言的规则,允许在字间发生换行。
- break-all:对于非中文/日文/韩文的文本,可在任意字符间断行。
- break-word:与break-all相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | +| text-indent7+ | <length> | - | 否 | 设置首行缩进量。 | +| white-space7+ | string | pre | 否 | 设置处理元素中空白的模式,可选值为:
- normal:所有空格、回车、制表符都合并成一个空格,文本自动换行;
- nowrap:所有空格、回车、制表符都合并成一个空格,文本不换行;
- pre:所有东西原样输出;
- pre-wrap:所有东西原样输出,文本换行;
- pre-line:所有空格、制表符合并成一个空格,回车不变,文本换行。 | +| adapt-height7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 设置字体大小自适应相关样式后生效。 | -## 事件 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 字体动态缩放:预设尺寸集合和最小最大字号调节基于是否满足最大行数要求,预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求,最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 +> +> - 文本换行:文本可以通过转义字符\r\n进行换行。 +> +> - 文本标签内支持以下转义字符:\a,\b,\f,\n,\r,\t,\v,\',\",\0。 +> +> - 当使用子组件span组成文本段落时,如果span属性样式异常,将导致text段落无法显示。 +> +> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件(span)组成的文本内容。 +> +> - text组件说明:不支持text内同时存在文本内容和span子组件。(如果同时存在,只显示span内的内容) -支持[通用事件](js-components-common-events.md)。 -## 方法 +## 事件 -支持[通用方法](js-components-common-methods.md)。 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -## 示例 +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -361,7 +122,7 @@ export default { } ``` -![](figures/3.png) +![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png) ``` @@ -400,5 +161,4 @@ export default { } ``` -![](figures/2.png) - +![zh-cn_image_0000001213103299](figures/zh-cn_image_0000001213103299.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md index 0d9ee4508e1055600a489648c8642b4801bb0309..37c5ca2da80d15ab8ac54d66b56c74d22b8e68a6 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md @@ -1,345 +1,82 @@ -# textarea +# textarea + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 多行文本输入的文本框。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| placeholder | string | - | 否 | 多行文本框的提示文本内容。 | +| maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 | +| headericon | string | - | 否 | 在文本输入前的图标展示,该图标不支持点击事件,图标格式为jpg,png和svg。 | +| extend | boolean | false | 否 | 文本框是否支持可扩展,设置可扩展属性后文本框高度可以跟随文字自适应。 | +| value5+ | string | - | 否 | 多行文本框的内容。 | +| showcounter5+ | boolean | false | 否 | 文本框是否需要开启计数下标功能,需要配合maxlength一起使用。 | +| menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | +| autofocus6+ | boolean | false | 否 | 是否自动获焦。 | +| selectedstart6+ | number | -1 | 否 | 开始选择文本时初始选择位置。 | +| selectedend6+ | number | -1 | 否 | 开始选择文本时结尾选择位置。 | +| softkeyboardenabled6+ | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

placeholder

-

string

-

-

-

-

多行文本框的提示文本内容。

-

maxlength

-

number

-

-

-

-

多行文本框可输入的最多字符数量。

-

headericon

-

string

-

-

-

-

在文本输入前的图标展示,该图标不支持点击事件,图标格式为jpg,png和svg。

-

extend

-

boolean

-

false

-

-

文本框是否支持可扩展,设置可扩展属性后文本框高度可以跟随文字自适应。

-

value5+

-

string

-

-

-

-

多行文本框的内容。

-

showcounter5+

-

boolean

-

false

-

-

文本框是否需要开启计数下标功能,需要配合maxlength一起使用。

-

menuoptions5+

-

Array<MenuOption>

-

-

-

-

设置文本选择弹框点击更多按钮之后显示的菜单项。

-

autofocus6+

-

boolean

-

false

-

-

是否自动获焦。

-

selectedstart6+

-

number

-

-1

-

-

开始选择文本时初始选择位置。

-

selectedend6+

-

number

-

-1

-

-

开始选择文本时结尾选择位置。

-

softkeyboardenabled6+

-

boolean

-

true

-

-

编辑时是否弹出系统软键盘。

-
+**表1** MenuOption5+ -**表 1** MenuOption5+ +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| icon | string | 菜单选项中的图标路径。 | +| content | string | 菜单选项中的文本内容。 | - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

icon

-

string

-

菜单选项中的图标路径。

-

content

-

string

-

菜单选项中的文本内容。

-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

-

多行文本框的文本颜色。

-

font-size

-

<length>

-

16px

-

-

多行文本框的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

placeholder-color

-

<color>

-

#99000000

-

-

多行文本框的提示文本颜色,type为text|email|date|time|number|password时生效。

-

font-weight

-

number | string

-

normal

-

-

多行文本框的字体粗细,见text组件font-weight的样式属性

-

font-family

-

string

-

sans-serif

-

-

多行文本框的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

caret-color6+

-

<color>

-

-

-

-

设置输入光标的颜色。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#e6000000 | 否 | 多行文本框的文本颜色。 | +| font-size | <length> | 16px | 否 | 多行文本框的文本尺寸。 | +| allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| placeholder-color | <color> | \#99000000 | 否 | 多行文本框的提示文本颜色,type为text\|email\|date\|time\|number\|password时生效。 | +| font-weight | number \| string | normal | 否 | 多行文本框的字体粗细,见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 多行文本框的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | -## 事件 -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ text: newText, lines: textLines, height: textHeight }

-

输入内容发生变化时触发该事件,通过参数获取输入内容、行数和行高。

-
说明:

改变value属性值不会触发该回调。5+

-
-

translate5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。

-

share5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。

-

search5+

-

{ value: selectedText }

-

设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。

-

optionselect5+

-

{ index:optionIndex, value: selectedText }

-

文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。

-

selectchange6+

-

{ start: number,end: number }

-

文本选择变化时触发事件。

-
+除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -## 方法 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { text: newText, lines: textLines, height: textHeight } | 输入内容发生变化时触发该事件,通过参数获取输入内容、行数和行高。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 改变value属性值不会触发该回调。5+ | +| translate5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。 | +| share5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。 | +| search5+ | { value: selectedText } | 设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。 | +| optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。 | +| selectchange6+ | { start: number,end: number } | 文本选择变化时触发事件。 | -支持[通用方法](js-components-common-methods.md)。 -## 示例 +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -369,5 +106,4 @@ change(e){ } ``` -![](figures/zh-cn_image_0000001127125124.png) - +![zh-cn_image_0000001127125124](figures/zh-cn_image_0000001127125124.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md index 300959e89d4aa8d5d816479a9353580b4efd0fa1..a4693c14a7e68d09d545dc88d3bdebcedf20cc15 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md @@ -1,170 +1,60 @@ -# toggle +# toggle + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 状态按钮用于从一组选项中进行选择,并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

string

-

-

-

-

状态按钮的文本值。

-

checked

-

boolean

-

false

-

-

状态按钮是否被选中。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

#E5000000

-

-

状态按钮的文本颜色。

-

font-size

-

<length>

-

16px

-

-

状态按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

-

状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明:

如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

-

状态按钮的字体样式。

-

font-weight

-

number | string

-

normal

-

-

状态按钮的字体粗细。见text组件font-weight的样式属性

-

font-family

-

<string>

-

sans-serif

-

-

状态按钮的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ checked:isChecked }

-

组件选中状态发生变化时触发。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | string | - | 是 | 状态按钮的文本值。 | +| checked | boolean | false | 否 | 状态按钮是否被选中。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| text-color | <color> | \#E5000000 | 否 | 状态按钮的文本颜色。 | +| font-size | <length> | 16px | 否 | 状态按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 | +| font-style | string | normal | 否 | 状态按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 状态按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 状态按钮的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { checked:isChecked } | 组件选中状态发生变化时触发。 | + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -222,5 +112,4 @@ export default { } ``` -![](figures/screenshot.png) - +![zh-cn_image_0000001173164927](figures/zh-cn_image_0000001173164927.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md index a67f201a7272846c658cdaf283e99aadda90d370..21e0b16883e8065fa81dc2473a4382d8f9a956d4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md @@ -1,271 +1,61 @@ -# toolbar-item +# toolbar-item + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 工具栏子组件。作为工具栏组件的子组件,用于展示工具栏上的一个操作选项。 -## 子组件 + +## 子组件 无 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | string | - | 是 | 该操作项文本内容。 | +| icon | string | - | 是 | 该操作项图标资源路径,该图标展示在选项文本上,支持本地路径,格式为png,jpg和svg。 | - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

string

-

-

-

-

该操作项文本内容。

-

icon

-

string

-

-

-

-

该操作项图标资源路径,该图标展示在选项文本上,支持本地路径,格式为png,jpg和svg。

-
-## 样式 +## 样式 仅支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

-

文本颜色。

-

font-size

-

<length>

-

16px

-

-

文本大小。

-

allow-scale

-

boolean

-

true

-

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-

font-style

-

string

-

normal

-

-

文本字体样式,可选值为:

-
  1. normal: 标准的字体样式;
  2. italic: 斜体的字体样式。
-

font-weight

-

number|string

-

normal

-

-

文本字体粗细,number类型取值[100, 900]的整数(被100整除),默认为400,取值越大,字体越粗。string类型取值为:lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

-

文本修饰,可选值为:

-
  1. underline: 文本下划线修饰;
  2. line-through: 穿过文本的修饰线;
  3. none: 标准文本。
-

font-family

-

string

-

sans-serif

-

-

字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-

background

-

<linear-gradient>

-

-

-

-

仅支持设置渐变样式,与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

-

设置背景颜色。

-

background-image

-

string

-

-

-

-

设置背景图片。与background-color、background不兼容;支持网络图片资源和本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

-

设置背景图片的大小。

-
  • string可选值:
    • contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
    • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
    • auto:保持原图的比例不变。
    -
  • length值参数方式:

    设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式:

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

-

针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。

-
  • repeat:在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x:只在水平轴上重复绘制图片。
  • repeat-y:只在竖直轴上重复绘制图片。
  • no-repeat:不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

-
  • 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left:水平方向上最左侧。
    • right:水平方向上最右侧。
    • top:竖直方向上最顶部。
    • bottom:竖直方向上最底部。
    • center:水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。
  • 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
  • 可以混合使用<percentage>和<length>。
-

opacity

-

number

-

1

-

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。

-

display

-

string

-

-

flex

-

-

确定一个元素所产生的框的类型,可选值为:

-
  • flex:弹性布局。
  • none:不渲染此元素。
-

visibility

-

string

-

-

visible

-

-

是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:

-
  • visible:元素正常显示。
  • hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
-
说明:

visibility和display样式都设置时,仅display生效。

-
-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#e6000000 | 否 | 文本颜色。 | +| font-size | <length> | 16px | 否 | 文本大小。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | +| font-style | string | normal | 否 | 文本字体样式,可选值为:
1. normal: 标准的字体样式;
2. italic: 斜体的字体样式。 | +| font-weight | number\|string | normal | 否 | 文本字体粗细,number类型取值[100, 900]的整数(被100整除),默认为400,取值越大,字体越粗。string类型取值为:lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 文本修饰,可选值为:
1. underline: 文本下划线修饰;
2. line-through: 穿过文本的修饰线;
3. none: 标准文本。 | +| font-family | string | sans-serif | 否 | 字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | +| background | <linear-gradient> | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md),与background-color、background-image不兼容。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容;支持网络图片资源和本地图片资源地址。 | +| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | 否 | 设置背景图片的大小。
- string可选值:
  - contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
  - cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
  - auto:保持原图的比例不变。
- length值参数方式:
  设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
- 百分比参数方式:
  以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 | +| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。
- repeat:在水平轴和竖直轴上同时重复绘制图片。
- repeat-x:只在水平轴上重复绘制图片。
- repeat-y:只在竖直轴上重复绘制图片。
- no-repeat:不会重复绘制图片。 | +| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | 否 | - 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
  - left:水平方向上最左侧。
  - right:水平方向上最右侧。
  - top:竖直方向上最顶部。
  - bottom:竖直方向上最底部。
  - center:水平方向或竖直方向上中间位置。
- length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)  。如果仅规定了一个值,另外一个值将是50%。
- 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
- 可以混合使用<percentage>和<length>。 | +| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型,可选值为:
- flex:弹性布局。
- none:不渲染此元素。 | +| visibility | string | visible | 否 | 是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:
- visible:元素正常显示。
- hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> visibility和display样式都设置时,仅display生效。 | -## 事件 -支持[通用事件](js-components-common-events.md)。 +## 事件 -## 方法 +支持[通用事件](../arkui-js/js-components-common-events.md)。 + + +## 方法 不支持。 -## 示例 + +## 示例 ``` @@ -279,5 +69,4 @@ ``` -![](figures/000000.jpg) - +![zh-cn_image_0000001127285072](figures/zh-cn_image_0000001127285072.jpg) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md index f2c03a3ac53bd29a4ce661314ebf2d73f981b6bb..c0338b3f7c3296c37bf94cbb4741450e3a39629d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md @@ -1,38 +1,47 @@ -# toolbar +# toolbar + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 工具栏。放在界面底部,用于展示针对当前界面的操作选项。 -## 权限列表 + +## 权限列表 无 -## 子组件 -支持子组件。 +## 子组件 + +支持<toolbar-item>子组件。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 工具栏最多可以展示5个toolbar-item子组件,如果存在6个及以上toolbar-item子组件,则保留前面4个子组件,后续的子组件收纳到工具栏上的更多项中,通过点击更多项弹窗展示剩下的子组件,更多项展示的组件样式采用系统默认样式,toolbar-item上设置的自定义样式不生效。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->工具栏最多可以展示5个toolbar-item子组件,如果存在6个及以上toolbar-item子组件,则保留前面4个子组件,后续的子组件收纳到工具栏上的更多项中,通过点击更多项弹窗展示剩下的子组件,更多项展示的组件样式采用系统默认样式,toolbar-item上设置的自定义样式不生效。 -## 属性 +## 属性 -支持[通用属性](js-components-common-attributes.md)。 +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 -## 样式 -支持[通用样式](js-components-common-styles.md)。 +## 样式 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->不支持height样式,高度固定为56px。 +支持[通用样式](../arkui-js/js-components-common-styles.md)。 -## 事件 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 不支持height样式,高度固定为56px。 + + +## 事件 不支持。 -## 方法 + +## 方法 不支持。 -## 示例 -详见[toolbar-item示例](js-components-basic-toolbar-item.md)。 +## 示例 +详见[toolbar-item示例](../arkui-js/js-components-basic-toolbar-item.md)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic.md index e03bcd63f036b44469709a344c7cb80b43b91422..6c21e41f39d1a72b9f4fc9e507f9c169da761339 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic.md @@ -1,57 +1,57 @@ -# 基础组件 +# 基础组件 -- **[button](js-components-basic-button.md)** -- **[chart](js-components-basic-chart.md)** -- **[divider](js-components-basic-divider.md)** +- **[button](js-components-basic-button.md)** -- **[image](js-components-basic-image.md)** +- **[chart](js-components-basic-chart.md)** -- **[image-animator](js-components-basic-image-animator.md)** +- **[divider](js-components-basic-divider.md)** -- **[input](js-components-basic-input.md)** +- **[image](js-components-basic-image.md)** -- **[label](js-components-basic-label.md)** +- **[image-animator](js-components-basic-image-animator.md)** -- **[marquee](js-components-basic-marquee.md)** +- **[input](js-components-basic-input.md)** -- **[menu](js-components-basic-menu.md)** +- **[label](js-components-basic-label.md)** -- **[option](js-components-basic-option.md)** +- **[marquee](js-components-basic-marquee.md)** -- **[picker](js-components-basic-picker.md)** +- **[menu](js-components-basic-menu.md)** -- **[picker-view](js-components-basic-picker-view.md)** +- **[option](js-components-basic-option.md)** -- **[piece](js-components-basic-piece.md)** +- **[picker](js-components-basic-picker.md)** -- **[progress](js-components-basic-progress.md)** +- **[picker-view](js-components-basic-picker-view.md)** -- **[qrcode](js-components-basic-qrcode.md)** +- **[piece](js-components-basic-piece.md)** -- **[rating](js-components-basic-rating.md)** +- **[progress](js-components-basic-progress.md)** -- **[richtext](js-components-basic-richtext.md)** +- **[qrcode](js-components-basic-qrcode.md)** -- **[search](js-components-basic-search.md)** +- **[rating](js-components-basic-rating.md)** -- **[select](js-components-basic-select.md)** +- **[richtext](js-components-basic-richtext.md)** -- **[slider](js-components-basic-slider.md)** +- **[search](js-components-basic-search.md)** -- **[span](js-components-basic-span.md)** +- **[select](js-components-basic-select.md)** -- **[switch](js-components-basic-switch.md)** +- **[slider](js-components-basic-slider.md)** -- **[text](js-components-basic-text.md)** +- **[span](js-components-basic-span.md)** -- **[textarea](js-components-basic-textarea.md)** +- **[switch](js-components-basic-switch.md)** -- **[toolbar](js-components-basic-toolbar.md)** +- **[text](js-components-basic-text.md)** -- **[toolbar-item](js-components-basic-toolbar-item.md)** +- **[textarea](js-components-basic-textarea.md)** -- **[toggle](js-components-basic-toggle.md)** +- **[toolbar](js-components-basic-toolbar.md)** +- **[toolbar-item](js-components-basic-toolbar-item.md)** +- **[toggle](js-components-basic-toggle.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md index 2282db3ba563c2f0f6605a8e32f2fd7b09989579..ffd3d1426f89de720ddf2cbb5263baf1bcea481e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md @@ -1,165 +1,81 @@ -# canvas组件 +# canvas组件 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 提供画布组件。用于自定义绘制图形。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 -支持[通用属性](js-components-common-attributes.md)。 +## 属性 + +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 + + +## 样式 + +支持[通用样式](../arkui-js/js-components-common-styles.md)。 + -## 样式 +## 事件 -支持[通用样式](js-components-common-styles.md)。 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -## 事件 -支持[通用事件](js-components-common-events.md)。 +## 方法 -## 方法 +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: -### getContext +### getContext -getContext\(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dContext +getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

type

-

string

-

-

设置为'2d',返回值为2D绘制对象,该对象可用于在画布组件上绘制矩形、文本、图片等。

-

options6+

-

ContextAttrOptions

-

-

当前仅支持配置是否开启抗锯齿功能,默认为关闭。

-
- - **表 1** ContextAttrOptions - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

antialias

-

boolean

-

是否开启抗锯齿功能,默认为false。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

CanvasRenderingContext2D

-

用于在画布组件上绘制矩形、文本、图片等

-
- - -### toDataURL6+ - -toDataURL\(type?: string, quality?: number\): string +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 设置为'2d',返回值为2D绘制对象,该对象可用于在画布组件上绘制矩形、文本、图片等。 | + | options6+ | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能,默认为关闭。 | + + **表1** ContextAttrOptions + + | 参数名 | 类型 | 说明 | + | -------- | -------- | -------- | + | antialias | boolean | 是否开启抗锯齿功能,默认为false。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 | + +### toDataURL6+ + +toDataURL(type?: string, quality?: number): string 生成一个包含图片展示的URL。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

type

-

string

-

-

可选参数,用于指定图像格式,默认格式为image/png。

-

quality

-

number

-

-

在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

string

-

图像的URL地址。

-
- - -## 示例 +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 | + | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | string | 图像的URL地址。 | + +## 示例 ``` @@ -180,4 +96,3 @@ export default { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md index 11b339ea2de42b9b26fa00dfdce4fff2144f088f..376fcb47b32908a11a0953f76ae26a70279d2399 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md @@ -1,63 +1,43 @@ -# CanvasGradient对象 +# CanvasGradient对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 渐变对象。 -## addColorStop -addColorStop\(offset: number, color: string\): void +## addColorStop + +addColorStop(offset: number, color: string): void 设置渐变断点值,包括偏移和颜色。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

offset

-

number

-

设置渐变点距离起点的位置占总体长度的比例,范围为0到1。

-

color

-

string

-

设置渐变的颜色。

-
- -- 示例 - - ``` - -
- - -
- ``` - - ``` - // xxx.js - export default { - handleClick() { - const el =this.$refs.canvas; - const ctx =el.getContext('2d'); - const gradient = ctx.createLinearGradient(0,0,100,0); - gradient.addColorStop(0,'#00ffff'); - gradient.addColorStop(1,'#ffff00'); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | offset | number | 设置渐变点距离起点的位置占总体长度的比例,范围为0到1。 | + | color | string | 设置渐变的颜色。 | + +- 示例 + ``` + +
+ + +
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + const gradient = ctx.createLinearGradient(0,0,100,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); } - ``` - - ![](figures/zh-cn_image_0000001152610806.png) - + } + ``` + ![zh-cn_image_0000001152610806](figures/zh-cn_image_0000001152610806.png) 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 0a80d1c92e4c2ebc2f9ecc1c056f861ba375746a..91ae2975bd8a4e0195b309283d91add3dffc9307 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 @@ -1,227 +1,66 @@ -# CanvasRenderingContext2D对象 +# CanvasRenderingContext2D对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 使用CanvasRenderingContext2D在canvas画布组件上进行绘制,绘制对象可以是矩形、文本、图片等。 -- 示例 - - ``` - -
- - - -
- ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas1; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); - }, - antialias() { - const el = this.$refs.canvas1; - const ctx = el.getContext('2d', { antialias: true }); - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); - } - } - ``` - - -- 示意图(关闭抗锯齿) - - ![](figures/zh-cn_image_0000001214837333.png) - -- 示意图(开启抗锯齿) - - ![](figures/zh-cn_image_0000001127125162.png) - - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

fillStyle

-

<color> | CanvasGradient | CanvasPattern

-

-

-

指定绘制的填充色。

-
  • 类型为<color>时,表示设置填充区域的颜色。
  • 类型为CanvasGradient时,表示渐变对象,使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时,使用 createPattern()方法创建。
-

lineWidth

-

number

-

-

-

设置绘制线条的宽度。

-

strokeStyle

-

<color> | CanvasGradient | CanvasPattern

-

-

-

设置描边的颜色。

-
  • 类型为<color>时,表示设置描边使用的颜色。
  • 类型为CanvasGradient时,表示渐变对象,使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时,使用 createPattern()方法创建。
-

lineCap

-

string

-

butt

-

指定线端点的样式,可选值为:

-
  • butt:线端点以方形结束。
  • round:线端点以圆形结束。
  • square:线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。
-

lineJoin

-

string

-

miter

-

指定线段间相交的交点样式,可选值为:

-
  • round:在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。
  • bevel:在线段相连处使用三角形为底填充, 每个部分矩形拐角独立。
  • miter:在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。
-

miterLimit

-

number

-

10

-

设置斜接面限制值,该值指定了线条相交处内角和外角的距离。

-

font

-

string

-

"normal normal 14px sans-serif"

-

设置文本绘制中的字体样式。

-

语法:ctx.font="font-style font-weight font-size font-family"5+

-
  • font-style(可选),用于指定字体样式,支持如下几种样式:normal, italic。
  • font-weight(可选),用于指定字体的粗细,支持如下几种类型:normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选),指定字号和行高,单位只支持px。
  • font-family(可选),指定字体系列,支持如下几种类型:sans-serif, serif, monospace。
-

textAlign

-

string

-

left

-

设置文本绘制中的文本对齐方式,可选值为:

-
  • left:文本左对齐。
  • right:文本右对齐。
  • center:文本居中对齐。
  • start:文本对齐界线开始的地方。
  • end:文本对齐界线结束的地方。
-
说明:

ltr布局模式下start和left一致,rtl布局模式下start和right一致·。

-
-

textBaseline

-

string

-

alphabetic

-

设置文本绘制中的水平对齐方式,可选值为:

-
  • alphabetic:文本基线是标准的字母基线。
  • top:文本基线在文本块的顶部。
  • hanging:文本基线是悬挂基线。
  • middle:文本基线在文本块的中间。
  • ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic 基线,那么ideographic基线位置在字符本身的底部。
  • bottom:文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
-

globalAlpha

-

number

-

-

-

设置透明度,0.0为完全透明,1.0为完全不透明。

-

lineDashOffset

-

number

-

0.0

-

设置画布的虚线偏移量,精度为float。

-

globalCompositeOperation

-

string

-

source-over

-

设置合成操作的方式。类型字段可选值有source-over,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,lighter,copy,xor。具体请参考类型字段说明

-

shadowBlur

-

number

-

0.0

-

设置绘制阴影时的模糊级别,值越大越模糊,精度为float。

-

shadowColor

-

<color>

-

-

-

设置绘制阴影时的阴影颜色。

-

shadowOffsetX

-

number

-

-

-

设置绘制阴影时和原有对象的水平偏移值。

-

shadowOffsetY

-

number

-

-

-

设置绘制阴影时和原有对象的垂直偏移值。

-

imageSmoothingEnabled6+

-

boolean

-

true

-

用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。

-
- -### fillStyle + +- 示例 + ``` + +
+ + + <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + }, + antialias() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d', { antialias: true }); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }} + ``` + +- 示意图(关闭抗锯齿) + ![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png) + +- 示意图(开启抗锯齿) + ![zh-cn_image_0000001127125162](figures/zh-cn_image_0000001127125162.png) + + +## 属性 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md) \| CanvasPattern | - | 指定绘制的填充色。
- 类型为<color>时,表示设置填充区域的颜色。
- 类型为CanvasGradient时,表示渐变对象,使用 createLinearGradient()方法创建。
- 类型为CanvasPattern时,使用 createPattern()方法创建。 | +| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | +| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md) \| CanvasPattern | - | 设置描边的颜色。
- 类型为<color>时,表示设置描边使用的颜色。
- 类型为CanvasGradient时,表示渐变对象,使用 createLinearGradient()方法创建。
- 类型为CanvasPattern时,使用 createPattern()方法创建。 | +| [lineCap](#linecap) | string | butt | 指定线端点的样式,可选值为:
- butt:线端点以方形结束。
- round:线端点以圆形结束。
- square:线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。 | +| [lineJoin](#linejoin) | string | miter | 指定线段间相交的交点样式,可选值为:
- round:在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。
- bevel:在线段相连处使用三角形为底填充, 每个部分矩形拐角独立。
- miter:在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。 | +| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值,该值指定了线条相交处内角和外角的距离。 | +| [font](#font) | string | "normal normal 14px sans-serif" | 设置文本绘制中的字体样式。
语法:ctx.font="font-style font-weight font-size font-family"5+
- font-style(可选),用于指定字体样式,支持如下几种样式:normal, italic。
- font-weight(可选),用于指定字体的粗细,支持如下几种类型:normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选),指定字号和行高,单位只支持px。
- font-family(可选),指定字体系列,支持如下几种类型:sans-serif, serif, monospace。 | +| [textAlign](#textalign) | string | left | 设置文本绘制中的文本对齐方式,可选值为:
- left:文本左对齐。
- right:文本右对齐。
- center:文本居中对齐。
- start:文本对齐界线开始的地方。
- end:文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> ltr布局模式下start和left一致,rtl布局模式下start和right一致·。 | +| [textBaseline](#textbaseline) | string | alphabetic | 设置文本绘制中的水平对齐方式,可选值为:
- alphabetic:文本基线是标准的字母基线。
- top:文本基线在文本块的顶部。
- hanging:文本基线是悬挂基线。
- middle:文本基线在文本块的中间。
- ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic 基线,那么ideographic基线位置在字符本身的底部。
- bottom:文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。 | +| [globalAlpha](#globalalpha) | number | - | 设置透明度,0.0为完全透明,1.0为完全不透明。 | +| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量,精度为float。 | +| [globalCompositeOperation](#globalcompositeoperation) | string | source-over | 设置合成操作的方式。类型字段可选值有source-over,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,lighter,copy,xor。具体请参考[表 类型字段说明](#globalcompositeoperation)。 | +| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别,值越大越模糊,精度为float。 | +| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | +| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | +| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | +| [imageSmoothingEnabled](#imagesmoothingenabled6-)6+ | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。 | + + +### fillStyle ``` @@ -242,9 +81,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001166962736.png) +![zh-cn_image_0000001166962736](figures/zh-cn_image_0000001166962736.png) -### lineWidth + +### lineWidth ``` @@ -265,9 +105,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001166484430.png) +![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png) + -### strokeStyle +### strokeStyle ``` @@ -289,9 +130,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001212124299.png) -### lineCap +![zh-cn_image_0000001212124299](figures/zh-cn_image_0000001212124299.png) + +### lineCap ``` @@ -316,9 +158,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001214837127.png) +![zh-cn_image_0000001214837127](figures/zh-cn_image_0000001214837127.png) -### lineJoin +### lineJoin ``` @@ -344,9 +186,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001214717247.png) +![zh-cn_image_0000001214717247](figures/zh-cn_image_0000001214717247.png) -### miterLimit +### miterLimit ``` @@ -372,9 +214,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001167001464.png) +![zh-cn_image_0000001167001464](figures/zh-cn_image_0000001167001464.png) -### font + +### font ``` @@ -395,9 +238,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001167046832.png) +![zh-cn_image_0000001167046832](figures/zh-cn_image_0000001167046832.png) + -### textAlign +### textAlign ``` @@ -434,9 +278,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001167472798.png) -### textBaseline +![zh-cn_image_0000001167472798](figures/zh-cn_image_0000001167472798.png) + +### textBaseline ``` @@ -472,9 +317,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001169315920.png) +![zh-cn_image_0000001169315920](figures/zh-cn_image_0000001169315920.png) -### globalAlpha +### globalAlpha ``` @@ -499,9 +344,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001167953648.png) +![zh-cn_image_0000001167953648](figures/zh-cn_image_0000001167953648.png) -### lineDashOffset +### lineDashOffset ``` @@ -524,113 +369,59 @@ export default { } ``` -![](figures/zh-cn_image_0000001167950468.png) - -### globalCompositeOperation - -- 类型字段说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

-

描述

-

source-over

-

在现有绘制内容上显示新绘制内容,属于默认值。

-

source-atop

-

在现有绘制内容顶部显示新绘制内容。

-

source-in

-

在现有绘制内容中显示新绘制内容。

-

source-out

-

在现有绘制内容之外显示新绘制内容。

-

destination-over

-

在新绘制内容上方显示现有绘制内容。

-

destination-atop

-

在新绘制内容顶部显示现有绘制内容。

-

destination-in

-

在新绘制内容中显示现有绘制内容。

-

destination-out

-

在新绘制内容外显示现有绘制内容。

-

lighter

-

显示新绘制内容和现有绘制内容。

-

copy

-

显示新绘制内容而忽略现有绘制内容。

-

xor

-

使用异或操作对新绘制内容与现有绘制内容进行融合。

-
- - -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 50, 50); - ctx.globalCompositeOperation = 'source-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(50, 50, 50, 50); - // Start drawing second example - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(120, 20, 50, 50); - ctx.globalCompositeOperation = 'destination-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(150, 50, 50, 50); - } +![zh-cn_image_0000001167950468](figures/zh-cn_image_0000001167950468.png) + +### globalCompositeOperation + +- 类型字段说明 + | 值 | 描述 | + | -------- | -------- | + | source-over | 在现有绘制内容上显示新绘制内容,属于默认值。 | + | source-atop | 在现有绘制内容顶部显示新绘制内容。 | + | source-in | 在现有绘制内容中显示新绘制内容。 | + | source-out | 在现有绘制内容之外显示新绘制内容。 | + | destination-over | 在新绘制内容上方显示现有绘制内容。 | + | destination-atop | 在新绘制内容顶部显示现有绘制内容。 | + | destination-in | 在新绘制内容中显示现有绘制内容。 | + | destination-out | 在新绘制内容外显示现有绘制内容。 | + | lighter | 显示新绘制内容和现有绘制内容。 | + | copy | 显示新绘制内容而忽略现有绘制内容。 | + | xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 50, 50); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(50, 50, 50, 50); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(120, 20, 50, 50); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(150, 50, 50, 50); } - ``` - - ![](figures/zh-cn_image_0000001213192781.png) + } + ``` - 示例中,新绘制内容是蓝色矩形,现有绘制内容是红色矩形。 + ![zh-cn_image_0000001213192781](figures/zh-cn_image_0000001213192781.png) + 示例中,新绘制内容是蓝色矩形,现有绘制内容是红色矩形。 -### shadowBlur +### shadowBlur ``` @@ -653,9 +444,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001168111514.png) +![zh-cn_image_0000001168111514](figures/zh-cn_image_0000001168111514.png) -### shadowColor +### shadowColor ``` @@ -678,9 +469,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001168111610.png) +![zh-cn_image_0000001168111610](figures/zh-cn_image_0000001168111610.png) -### shadowOffsetX +### shadowOffsetX ``` @@ -704,9 +495,10 @@ export default { } ``` -![](figures/zh-cn_image_0000001167631876.png) -### shadowOffsetY +![zh-cn_image_0000001167631876](figures/zh-cn_image_0000001167631876.png) + +### shadowOffsetY ``` @@ -730,9 +522,9 @@ export default { } ``` -![](figures/zh-cn_image_0000001213193285.png) +![zh-cn_image_0000001213193285](figures/zh-cn_image_0000001213193285.png) -### imageSmoothingEnabled6+ +### imageSmoothingEnabled6+ ``` @@ -757,2463 +549,1384 @@ export default { } ``` -![](figures/smoothOff.png) +![zh-cn_image_0000001167952236](figures/zh-cn_image_0000001167952236.png) + + -## 方法 +## 方法 -### fillRect -fillRect\(x: number, y: number, width:number, height: number\): void +### fillRect + +fillRect(x: number, y: number, width:number, height: number): void 填充一个矩形。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形左上角点的x坐标。

-

y

-

number

-

指定矩形左上角点的y坐标。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.fillRect(20, 20, 200, 150); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定矩形左上角点的x坐标。 | + | y | number | 指定矩形左上角点的y坐标。 | + | width | number | 指定矩形的宽度。 | + | height | number | 指定矩形的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillRect(20, 20, 200, 150); } - ``` - - ![](figures/zh-cn_image_0000001214811029.png) + } + ``` + ![zh-cn_image_0000001214811029](figures/zh-cn_image_0000001214811029.png) -### clearRect +### clearRect -clearRect\(x: number, y: number, width:number, height: number\): void +clearRect(x: number, y: number, width:number, height: number): void 删除指定区域内的绘制内容。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形上的左上角x坐标。

-

y

-

number

-

指定矩形上的左上角y坐标。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 400, 200); - ctx.clearRect(20, 20, 150, 100); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定矩形上的左上角x坐标。 | + | y | number | 指定矩形上的左上角y坐标。 | + | width | number | 指定矩形的宽度。 | + | height | number | 指定矩形的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 400, 200); + ctx.clearRect(20, 20, 150, 100); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001214619417.png) + ![zh-cn_image_0000001214619417](figures/zh-cn_image_0000001214619417.png) -### strokeRect +### strokeRect -strokeRect\(x: number, y: number, width:number, height: number\): void +strokeRect(x: number, y: number, width:number, height: number): void 绘制具有边框的矩形,矩形内部不填充。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形的左上角x坐标。

-

y

-

number

-

指定矩形的左上角y坐标。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.strokeRect(30, 30, 200, 150); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定矩形的左上角x坐标。 | + | y | number | 指定矩形的左上角y坐标。 | + | width | number | 指定矩形的宽度。 | + | height | number | 指定矩形的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.strokeRect(30, 30, 200, 150); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001214822091.png) + ![zh-cn_image_0000001214822091](figures/zh-cn_image_0000001214822091.png) -### fillText +### fillText -fillText\(text: string, x: number, y: number\): void +fillText(text: string, x: number, y: number): void 绘制填充类文本。 -- 参数 - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

text

-

string

-

需要绘制的文本内容。

-

x

-

number

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

需要绘制的文本的左下角y坐标。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.font = '35px sans-serif'; - ctx.fillText("Hello World!", 10, 60); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | text | string | 需要绘制的文本内容。 | + | x | number | 需要绘制的文本的左下角x坐标。 | + | y | number | 需要绘制的文本的左下角y坐标。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '35px sans-serif'; + ctx.fillText("Hello World!", 10, 60); } - ``` - - ![](figures/zh-cn_image_0000001214469787.png) + } + ``` + ![zh-cn_image_0000001214469787](figures/zh-cn_image_0000001214469787.png) -### strokeText +### strokeText -strokeText\(text: string, x: number, y: number\): void +strokeText(text: string, x: number, y: number): void 绘制描边类文本。 -- 参数 - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

text

-

string

-

需要绘制的文本内容。

-

x

-

number

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

需要绘制的文本的左下角y坐标。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.font = '25px sans-serif'; - ctx.strokeText("Hello World!", 10, 60); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | text | string | 需要绘制的文本内容。 | + | x | number | 需要绘制的文本的左下角x坐标。 | + | y | number | 需要绘制的文本的左下角y坐标。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '25px sans-serif'; + ctx.strokeText("Hello World!", 10, 60); } - ``` - - ![](figures/zh-cn_image_0000001214460669.png) + } + ``` + ![zh-cn_image_0000001214460669](figures/zh-cn_image_0000001214460669.png) -### measureText +### measureText -measureText\(text: string\): TextMetrics +measureText(text: string): TextMetrics 该方法返回一个文本测算的对象,通过该对象可以获取指定文本的宽度值。 -- 参数 - - - - - - - - - - - -

参数

-

类型

-

描述

-

text

-

string

-

需要进行测量的文本。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

TextMetrics

-

包含指定字体的宽度,该宽度可以通过TextMetrics.width来获取。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.font = '20px sans-serif'; - var txt = 'Hello World'; - ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); - ctx.fillText(txt, 20, 110); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | text | string | 需要进行测量的文本。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | TextMetrics | 包含指定字体的宽度,该宽度可以通过TextMetrics.width来获取。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '20px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); + ctx.fillText(txt, 20, 110); } - ``` - - ![](figures/zh-cn_image_0000001169142476.png) + } + ``` + ![zh-cn_image_0000001169142476](figures/zh-cn_image_0000001169142476.png) -### stroke -stroke\(\): void +### stroke +stroke(): void 进行边框绘制操作。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.moveTo(25, 25); - ctx.lineTo(25, 250); - ctx.lineWidth = '6'; - ctx.strokeStyle = 'rgb(0,0,255)'; - ctx.stroke(); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.moveTo(25, 25); + ctx.lineTo(25, 250); + ctx.lineWidth = '6'; + ctx.strokeStyle = 'rgb(0,0,255)'; + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001236697937.png) + } + ``` + ![zh-cn_image_0000001236697937](figures/zh-cn_image_0000001236697937.png) -### beginPath -beginPath\(\): void +### beginPath +beginPath(): void 创建一个新的绘制路径。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.lineWidth = '6'; - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(15, 80); - ctx.lineTo(280, 80); - ctx.stroke(); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = '6'; + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(15, 80); + ctx.lineTo(280, 80); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001214629745.png) + } + ``` + ![zh-cn_image_0000001214629745](figures/zh-cn_image_0000001214629745.png) -### moveTo -moveTo\(x: number, y: number\): void +### moveTo +moveTo(x: number, y: number): void 路径从当前点移动到指定点。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定位置的x坐标。

-

y

-

number

-

指定位置的y坐标。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定位置的x坐标。 | + | y | number | 指定位置的y坐标。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001169309948.png) + } + ``` + ![zh-cn_image_0000001169309948](figures/zh-cn_image_0000001169309948.png) -### lineTo -lineTo\(x: number, y: number\): void +### lineTo +lineTo(x: number, y: number): void 从当前点到指定点进行路径连接。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定位置的x坐标。

-

y

-

number

-

指定位置的y坐标。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定位置的x坐标。 | + | y | number | 指定位置的y坐标。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001169469914.png) + } + ``` + ![zh-cn_image_0000001169469914](figures/zh-cn_image_0000001169469914.png) -### closePath -closePath\(\): void +### closePath +closePath(): void 结束当前路径形成一个封闭路径。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(110, 30); - ctx.lineTo(70, 90); - ctx.closePath(); - ctx.stroke(); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(110, 30); + ctx.lineTo(70, 90); + ctx.closePath(); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001169151508.png) + } + ``` + ![zh-cn_image_0000001169151508](figures/zh-cn_image_0000001169151508.png) -### createPattern +### createPattern -createPattern\(image: Image, repetition: string\): Object +createPattern(image: Image, repetition: string): Object 通过指定图像和重复方式创建图片填充的模板。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

image

-

Image

-

图源对象,具体参考Image对象

-

repetition

-

string

-

设置图像重复的方式,取值为:'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

指定图像填充的Pattern对象。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var img = new Image(); - img.src = 'common/images/example.jpg'; - var pat = ctx.createPattern(img, 'repeat'); - ctx.fillStyle = pat; - ctx.fillRect(0, 0, 20, 20); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | image | Image | 图源对象,具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 | + | repetition | string | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 指定图像填充的Pattern对象。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/example.jpg'; + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(0, 0, 20, 20); } - ``` - - ![](figures/zh-cn_image_0000001169301188.png) + } + ``` + ![zh-cn_image_0000001169301188](figures/zh-cn_image_0000001169301188.png) -### bezierCurveTo +### bezierCurveTo -bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void +bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 创建三次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

cp1x

-

number

-

第一个贝塞尔参数的x坐标值。

-

cp1y

-

number

-

第一个贝塞尔参数的y坐标值。

-

cp2x

-

number

-

第二个贝塞尔参数的x坐标值。

-

cp2y

-

number

-

第二个贝塞尔参数的y坐标值。

-

x

-

number

-

路径结束时的x坐标值。

-

y

-

number

-

路径结束时的y坐标值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | cp1x | number | 第一个贝塞尔参数的x坐标值。 | + | cp1y | number | 第一个贝塞尔参数的y坐标值。 | + | cp2x | number | 第二个贝塞尔参数的x坐标值。 | + | cp2y | number | 第二个贝塞尔参数的y坐标值。 | + | x | number | 路径结束时的x坐标值。 | + | y | number | 路径结束时的y坐标值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001214621177.png) + } + ``` + ![zh-cn_image_0000001214621177](figures/zh-cn_image_0000001214621177.png) -### quadraticCurveTo +### quadraticCurveTo -quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void +quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

cpx

-

number

-

贝塞尔参数的x坐标值。

-

cpy

-

number

-

贝塞尔参数的y坐标值。

-

x

-

number

-

路径结束时的x坐标值。

-

y

-

number

-

路径结束时的y坐标值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.moveTo(20, 20); - ctx.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | cpx | number | 贝塞尔参数的x坐标值。 | + | cpy | number | 贝塞尔参数的y坐标值。 | + | x | number | 路径结束时的x坐标值。 | + | y | number | 路径结束时的y坐标值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(20, 20); + ctx.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001169461910.png) + } + ``` + ![zh-cn_image_0000001169461910](figures/zh-cn_image_0000001169461910.png) -### arc -arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean\): void +### arc +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): void 绘制弧线路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

弧线圆心的x坐标值。

-

y

-

number

-

弧线圆心的y坐标值。

-

radius

-

number

-

弧线的圆半径。

-

startAngle

-

number

-

弧线的起始弧度。

-

endAngle

-

number

-

弧线的终止弧度。

-

anticlockwise

-

boolean

-

是否逆时针绘制圆弧。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 弧线圆心的x坐标值。 | + | y | number | 弧线圆心的y坐标值。 | + | radius | number | 弧线的圆半径。 | + | startAngle | number | 弧线的起始弧度。 | + | endAngle | number | 弧线的终止弧度。 | + | anticlockwise | boolean | 是否逆时针绘制圆弧。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001169470288.png) + } + ``` + ![zh-cn_image_0000001169470288](figures/zh-cn_image_0000001169470288.png) -### arcTo +### arcTo -arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void +arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x1

-

number

-

圆弧经过的第一个点的x坐标值。

-

y1

-

number

-

圆弧经过的第一个点的y坐标值。

-

x2

-

number

-

圆弧经过的第二个点的x坐标值。

-

y2

-

number

-

圆弧经过的第二个点的y坐标值。

-

radius

-

number

-

圆弧的圆半径值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.moveTo(100, 20); - ctx.arcTo(150, 20, 150, 70, 50); // Create an arc - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x1 | number | 圆弧经过的第一个点的x坐标值。 | + | y1 | number | 圆弧经过的第一个点的y坐标值。 | + | x2 | number | 圆弧经过的第二个点的x坐标值。 | + | y2 | number | 圆弧经过的第二个点的y坐标值。 | + | radius | number | 圆弧的圆半径值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.moveTo(100, 20); + ctx.arcTo(150, 20, 150, 70, 50); // Create an arc + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001169143586.png) + } + ``` + ![zh-cn_image_0000001169143586](figures/zh-cn_image_0000001169143586.png) -### ellipse6+ +### ellipse6+ -ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void 在规定的矩形区域绘制一个椭圆。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

椭圆圆心的x轴坐标。

-

y

-

number

-

椭圆圆心的y轴坐标。

-

radiusX

-

number

-

椭圆x轴的半径长度。

-

radiusY

-

number

-

椭圆y轴的半径长度。

-

rotation

-

number

-

椭圆的旋转角度,单位为弧度。

-

startAngle

-

number

-

椭圆绘制的起始点角度,以弧度表示。

-

endAngle

-

number

-

椭圆绘制的结束点角度,以弧度表示。

-

anticlockwise

-

number

-

是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0)

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 椭圆圆心的x轴坐标。 | + | y | number | 椭圆圆心的y轴坐标。 | + | radiusX | number | 椭圆x轴的半径长度。 | + | radiusY | number | 椭圆y轴的半径长度。 | + | rotation | number | 椭圆的旋转角度,单位为弧度。 | + | startAngle | number | 椭圆绘制的起始点角度,以弧度表示。 | + | endAngle | number | 椭圆绘制的结束点角度,以弧度表示。 | + | anticlockwise | number | 是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0) | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); } - ``` - - ![](figures/ellipse.png) + } + ``` + ![zh-cn_image_0000001214823665](figures/zh-cn_image_0000001214823665.png) -### rect -rect\(x: number, y: number, width: number, height: number\): void +### rect +rect(x: number, y: number, width: number, height: number): void 创建矩形路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形的左上角x坐标值。

-

y

-

number

-

指定矩形的左上角y坐标值。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) - ctx.stroke(); // Draw it - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定矩形的左上角x坐标值。 | + | y | number | 指定矩形的左上角y坐标值。 | + | width | number | 指定矩形的宽度。 | + | height | number | 指定矩形的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) + ctx.stroke(); // Draw it } - ``` - - ![](figures/zh-cn_image_0000001214630783.png) + } + ``` + ![zh-cn_image_0000001214630783](figures/zh-cn_image_0000001214630783.png) -### fill +### fill -fill\(\): void +fill(): void 对封闭路径进行填充。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) - ctx.fill(); // Draw it in default setting - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) + ctx.fill(); // Draw it in default setting } - ``` - - ![](figures/zh-cn_image_0000001214703717.png) + } + ``` + ![zh-cn_image_0000001214703717](figures/zh-cn_image_0000001214703717.png) -### clip +### clip -clip\(\): void +clip(): void 设置当前路径为剪切路径。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.rect(0, 0, 200, 200); - ctx.stroke(); - ctx.clip(); - // Draw red rectangle after clip - ctx.fillStyle = "rgb(255,0,0)"; - ctx.fillRect(0, 0, 150, 150); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rect(0, 0, 200, 200); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 150, 150); } - ``` - - ![](figures/zh-cn_image_0000001169303414.png) + } + ``` + ![zh-cn_image_0000001169303414](figures/zh-cn_image_0000001169303414.png) -### rotate +### rotate -rotate\(rotate: number\): void +rotate(rotate: number): void 针对当前坐标轴进行顺时针旋转。 -- 参数 - - - - - - - - - - - -

参数

-

类型

-

描述

-

rotate

-

number

-

设置顺时针旋转的弧度值,可以通过Math.PI / 180将角度转换为弧度值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees - ctx.fillRect(70, 20, 50, 50); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | rotate | number | 设置顺时针旋转的弧度值,可以通过Math.PI / 180将角度转换为弧度值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(70, 20, 50, 50); } - ``` - - ![](figures/zh-cn_image_0000001169463368.png) + } + ``` + ![zh-cn_image_0000001169463368](figures/zh-cn_image_0000001169463368.png) -### scale +### scale -scale\(x: number, y: number\): void +scale(x: number, y: number): void 设置canvas画布的缩放变换属性,后续的绘制操作将按照缩放比例进行缩放。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

设置水平方向的缩放值。

-

y

-

number

-

设置垂直方向的缩放值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.strokeRect(10, 10, 25, 25); - ctx.scale(2, 2);// Scale to 200% - ctx.strokeRect(10, 10, 25, 25); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 设置水平方向的缩放值。 | + | y | number | 设置垂直方向的缩放值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.strokeRect(10, 10, 25, 25); + ctx.scale(2, 2);// Scale to 200% + ctx.strokeRect(10, 10, 25, 25); } - ``` - - ![](figures/zh-cn_image_0000001214463281.png) + } + ``` + ![zh-cn_image_0000001214463281](figures/zh-cn_image_0000001214463281.png) -### transform +### transform -transform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void +transform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void transform方法对应一个变换矩阵,想对一个图形进行变化的时候,只要设置此变换矩阵相应的参数,对图形的各个定点的坐标分别乘以这个矩阵,就能得到新的定点的坐标。矩阵变换效果可叠加。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->变换后的坐标计算方式(x和y为变换前坐标,x'和y'为变换后坐标): ->- x' = scaleX \* x + skewY \* y + translateX ->- y' = skewX \* x + scaleY \* y + translateY - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

scaleX

-

number

-

指定水平缩放值。

-

skewX

-

number

-

指定水平倾斜值。

-

skewY

-

number

-

指定垂直倾斜值。

-

scaleY

-

number

-

指定垂直缩放值。

-

translateX

-

number

-

指定水平移动值。

-

translateY

-

number

-

指定垂直移动值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100); - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); - } +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 变换后的坐标计算方式(x和y为变换前坐标,x'和y'为变换后坐标): +> +> - x' = scaleX \* x + skewY \* y + translateX +> +> - y' = skewX \* x + scaleY \* y + translateY + +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | scaleX | number | 指定水平缩放值。 | + | skewX | number | 指定水平倾斜值。 | + | skewY | number | 指定垂直倾斜值。 | + | scaleY | number | 指定垂直缩放值。 | + | translateX | number | 指定水平移动值。 | + | translateY | number | 指定垂直移动值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100); + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); } - ``` - - ![](figures/zh-cn_image_0000001214623227.png) - - -### setTransform - -setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void - -setTransfrom方法使用的参数和transform\(\)方法相同,但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

scaleX

-

number

-

指定水平缩放值。

-

skewX

-

number

-

指定水平倾斜值。

-

skewY

-

number

-

指定垂直倾斜值。

-

scaleY

-

number

-

指定垂直缩放值。

-

translateX

-

number

-

指定水平移动值。

-

translateY

-

number

-

指定垂直移动值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.setTransform(1,0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); - } + } + ``` + + ![zh-cn_image_0000001214623227](figures/zh-cn_image_0000001214623227.png) + +### setTransform + +setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void + +setTransfrom方法使用的参数和transform()方法相同,但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 + +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | scaleX | number | 指定水平缩放值。 | + | skewX | number | 指定水平倾斜值。 | + | skewY | number | 指定垂直倾斜值。 | + | scaleY | number | 指定垂直缩放值。 | + | translateX | number | 指定水平移动值。 | + | translateY | number | 指定垂直移动值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.setTransform(1,0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); } - ``` - - ![](figures/zh-cn_image_0000001168984880.png) + } + ``` + ![zh-cn_image_0000001168984880](figures/zh-cn_image_0000001168984880.png) -### translate +### translate -translate\(x: number, y: number\): void +translate(x: number, y: number): void 移动当前坐标系的原点。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

设置水平平移量。

-

y

-

number

-

设置竖直平移量。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.fillRect(10, 10, 50, 50); - ctx.translate(70, 70); - ctx.fillRect(10, 10, 50, 50); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 设置水平平移量。 | + | y | number | 设置竖直平移量。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillRect(10, 10, 50, 50); + ctx.translate(70, 70); + ctx.fillRect(10, 10, 50, 50); } - ``` - - ![](figures/zh-cn_image_0000001169144864.png) + } + ``` + ![zh-cn_image_0000001169144864](figures/zh-cn_image_0000001169144864.png) -### createPath2D6+ +### createPath2D6+ -createPath2D\(path: Path2D, cmds: string\): Path2D +createPath2D(path: Path2D, cmds: string): Path2D 创建一个Path2D对象。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

path

-

Path2D

-

Path2D对象。

-

cmds

-

string

-

SVG的Path描述字符串。

-
- -- 返回值 - - [Path2D对象](js-components-canvas-path2d.md) - -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path1 = ctx.createPath2D(); - path1.moveTo(100, 100); - path1.lineTo(200, 100); - path1.lineTo(100, 200); - path1.closePath(); - ctx.stroke(path1); - var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); - ctx.stroke(path2); - var path3 = ctx.createPath2D(path2); - ctx.stroke(path3); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | path | Path2D | Path2D对象。 | + | cmds | string | SVG的Path描述字符串。 | + +- 返回值 + [Path2D对象](../arkui-js/js-components-canvas-path2d.md) + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D(); + path1.moveTo(100, 100); + path1.lineTo(200, 100); + path1.lineTo(100, 200); + path1.closePath(); + ctx.stroke(path1); + var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); + ctx.stroke(path2); + var path3 = ctx.createPath2D(path2); + ctx.stroke(path3); } - ``` - - ![](figures/zh-cn_image_0000001214824709.png) + } + ``` + ![zh-cn_image_0000001214824709](figures/zh-cn_image_0000001214824709.png) -### drawImage +### drawImage -drawImage\(image: Image, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void +drawImage(image: Image, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void 进行图像绘制。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

image

-

Image

-

图片资源,请参考Image对象

-

sx

-

number

-

裁切源图像时距离源图像左上角的x坐标值。

-

sy

-

number

-

裁切源图像时距离源图像左上角的y坐标值。

-

sWidth

-

number

-

裁切源图像时需要裁切的宽度。

-

sHeight

-

number

-

裁切源图像时需要裁切的高度。

-

dx

-

number

-

绘制区域左上角在x轴的位置。

-

dy

-

number

-

绘制区域左上角在y 轴的位置。

-

dWidth

-

number

-

绘制区域的宽度。

-

dHeight

-

number

-

绘制区域的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - var test = this.$element('drawImage'); - var ctx = test.getContext('2d'); - var img = new Image(); - img.src = 'common/image/test.jpg'; - ctx.drawImage(img, 50, 80, 80, 80); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | image | Image | 图片资源,请参考[Image对象](../arkui-js/js-components-canvas-image.md)。 | + | sx | number | 裁切源图像时距离源图像左上角的x坐标值。 | + | sy | number | 裁切源图像时距离源图像左上角的y坐标值。 | + | sWidth | number | 裁切源图像时需要裁切的宽度。 | + | sHeight | number | 裁切源图像时需要裁切的高度。 | + | dx | number | 绘制区域左上角在x轴的位置。 | + | dy | number | 绘制区域左上角在y 轴的位置。 | + | dWidth | number | 绘制区域的宽度。 | + | dHeight | number | 绘制区域的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + var test = this.$element('drawImage'); + var ctx = test.getContext('2d'); + var img = new Image(); + img.src = 'common/image/test.jpg'; + ctx.drawImage(img, 50, 80, 80, 80); } - ``` - - ![](figures/zh-cn_image_0000001214704759.png) + } + ``` + ![zh-cn_image_0000001214704759](figures/zh-cn_image_0000001214704759.png) -### restore +### restore -restore\(\): void +restore(): void 对保存的绘图上下文进行恢复。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.restore(); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.restore(); } - ``` - + } + ``` -### save +### save -save\(\): void +save(): void 对当前的绘图上下文进行保存。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.save(); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.save(); } - ``` - - -### createLinearGradient6+ - -createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object - -创建一个线性渐变色,返回CanvasGradient对象,请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md)。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x0

-

number

-

起点的x轴坐标。

-

y0

-

number

-

起点的y轴坐标。

-

x1

-

number

-

终点的x轴坐标。

-

y1

-

number

-

终点的y轴坐标。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

返回创建的CanvasGradient对象。

-
- -- 示例 - - ``` - -
- - -
- ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas; - const ctx = el.getContext('2d'); - // Linear gradient: start(50,0) end(300,100) - var gradient = ctx.createLinearGradient(50,0, 300,100); - // Add three color stops - gradient.addColorStop(0.0, 'red'); - gradient.addColorStop(0.5, 'white'); - gradient.addColorStop(1.0, 'green'); - // Set the fill style and draw a rectangle - ctx.fillStyle = gradient; - ctx.fillRect(0, 0, 500, 500); - } + } + ``` + +### createLinearGradient6+ + +createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object + +创建一个线性渐变色,返回CanvasGradient对象,请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md)。 + +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x0 | number | 起点的x轴坐标。 | + | y0 | number | 起点的y轴坐标。 | + | x1 | number | 终点的x轴坐标。 | + | y1 | number | 终点的y轴坐标。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 返回创建的CanvasGradient对象。 | + +- 示例 + ``` + +
+ + +
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas; + const ctx = el.getContext('2d'); + // Linear gradient: start(50,0) end(300,100) + var gradient = ctx.createLinearGradient(50,0, 300,100); + // Add three color stops + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + // Set the fill style and draw a rectangle + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 500, 500); } - ``` - - ![](figures/zh-cn_image_0000001169303416.png) + } + ``` + ![zh-cn_image_0000001169303416](figures/zh-cn_image_0000001169303416.png) -### createRadialGradient6+ +### createRadialGradient6+ -createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): Object +createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): Object 创建一个径向渐变色,返回CanvasGradient对象,请参考CanvasGradient -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x0

-

number

-

起始圆的x轴坐标。

-

y0

-

number

-

起始圆的y轴坐标。

-

r0

-

number

-

起始圆的半径。必须是非负且有限的。

-

x1

-

number

-

终点圆的x轴坐标。

-

y1

-

number

-

终点圆的y轴坐标。

-

r1

-

number

-

终点圆的半径。必须为非负且有限的。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

返回创建的CanvasGradient对象。

-
- -- 示例 - - ``` - -
- - -
- ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas; - const ctx = el.getContext('2d'); - // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) - var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); - // Add three color stops - gradient.addColorStop(0.0, 'red'); - gradient.addColorStop(0.5, 'white'); - gradient.addColorStop(1.0, 'green'); - // Set the fill style and draw a rectangle - ctx.fillStyle = gradient; - ctx.fillRect(0, 0, 500, 500); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x0 | number | 起始圆的x轴坐标。 | + | y0 | number | 起始圆的y轴坐标。 | + | r0 | number | 起始圆的半径。必须是非负且有限的。 | + | x1 | number | 终点圆的x轴坐标。 | + | y1 | number | 终点圆的y轴坐标。 | + | r1 | number | 终点圆的半径。必须为非负且有限的。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 返回创建的CanvasGradient对象。 | + +- 示例 + ``` + +
+ + +
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas; + const ctx = el.getContext('2d'); + // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) + var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); + // Add three color stops + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + // Set the fill style and draw a rectangle + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 500, 500); } - ``` - - ![](figures/zh-cn_image_0000001169463370.png) - - -### createImageData - -createImageData\(width: number, height: number, imageData: Object\): Object - -创建新的ImageData 对象,请参考[ImageData对象](js-components-canvas-imagedata.md)。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

width

-

number

-

ImageData的宽度。

-

height

-

number

-

ImageData的高度。

-

imagedata

-

Object

-

复制现有的ImageData对象。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

返回创建的ImageData对象。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height - newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData - } + } + ``` + + ![zh-cn_image_0000001169463370](figures/zh-cn_image_0000001169463370.png) + +### createImageData + +createImageData(width: number, height: number, imageData: Object): Object + +创建新的ImageData 对象,请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md)。 + +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | width | number | ImageData的宽度。 | + | height | number | ImageData的高度。 | + | imagedata | Object | 复制现有的ImageData对象。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 返回创建的ImageData对象。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height + newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData } - ``` - + } + ``` -### getImageData +### getImageData -getImageData\(sx: number, sy: number, sw: number, sh: number\): Object +getImageData(sx: number, sy: number, sw: number, sh: number): Object 以当前canvas指定区域内的像素创建ImageData对象。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

sx

-

number

-

需要输出的区域的左上角x坐标。

-

sy

-

number

-

需要输出的区域的左上角y坐标。

-

sw

-

number

-

需要输出的区域的宽度。

-

sh

-

number

-

需要输出的区域的高度。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

Object

-

返回包含指定区域像素的ImageData对象。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - var test = this.$element('getImageData') - var ctx = test.getContext('2d'); - var imageData = ctx.getImageData(0, 0, 280, 300); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | sx | number | 需要输出的区域的左上角x坐标。 | + | sy | number | 需要输出的区域的左上角y坐标。 | + | sw | number | 需要输出的区域的宽度。 | + | sh | number | 需要输出的区域的高度。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Object | 返回包含指定区域像素的ImageData对象。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + var test = this.$element('getImageData') + var ctx = test.getContext('2d'); + var imageData = ctx.getImageData(0, 0, 280, 300); } - ``` - + } + ``` -### putImageData +### putImageData -putImageData\(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number\): void +putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void 使用ImageData数据填充新的矩形区域。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

imagedata

-

Object

-

包含像素值的ImageData对象。

-

dx

-

number

-

填充区域在x轴方向的偏移量。

-

dy

-

number

-

填充区域在y轴方向的偏移量。

-

dirtyX

-

number

-

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

-

dirtyY

-

number

-

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

-

dirtyWidth

-

number

-

源图像数据矩形裁切范围的宽度。

-

dirtyHeight

-

number

-

源图像数据矩形裁切范围的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - var test = this.$element('getImageData') - var ctx = test.getContext('2d'); - var imgData = ctx.createImageData(100, 100); - for (var i = 0; i < imgData.data.length; i += 4) { - imgData.data[i + 0] = 255; - imgData.data[i + 1] = 0; - imgData.data[i + 2] = 0; - imgData.data[i + 3] = 255; - } - ctx.putImageData(imgData, 10, 10); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | imagedata | Object | 包含像素值的ImageData对象。 | + | dx | number | 填充区域在x轴方向的偏移量。 | + | dy | number | 填充区域在y轴方向的偏移量。 | + | dirtyX | number | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | + | dirtyY | number | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | + | dirtyWidth | number | 源图像数据矩形裁切范围的宽度。 | + | dirtyHeight | number | 源图像数据矩形裁切范围的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + var test = this.$element('getImageData') + var ctx = test.getContext('2d'); + var imgData = ctx.createImageData(100, 100); + for (var i = 0; i < imgData.data.length; i += 4) { + imgData.data[i + 0] = 255; + imgData.data[i + 1] = 0; + imgData.data[i + 2] = 0; + imgData.data[i + 3] = 255; } - ``` - - ![](figures/zh-cn_image_0000001214463283.png) + ctx.putImageData(imgData, 10, 10); + } + } + ``` + ![zh-cn_image_0000001214463283](figures/zh-cn_image_0000001214463283.png) -### setLineDash +### setLineDash -setLineDash\(segments: Array\): void +setLineDash(segments: Array): void 设置画布的虚线样式。 -- 参数 - - - - - - - - - - - -

参数

-

类型

-

描述

-

segments

-

Array

-

作为数组用来描述线段如何交替和间距长度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.setLineDash([10,20]); - ctx.stroke(); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | segments | Array | 作为数组用来描述线段如何交替和间距长度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.stroke(); } - ``` - - ![](figures/zh-cn_image_0000001214623229.png) + } + ``` + ![zh-cn_image_0000001214623229](figures/zh-cn_image_0000001214623229.png) -### getLineDash +### getLineDash -getLineDash\(\): Array +getLineDash(): Array 获得当前画布的虚线样式。 -- 返回值 - - - - - - - - - -

类型

-

说明

-

Array

-

返回数组,该数组用来描述线段如何交替和间距长度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var info = ctx.getLineDash(); - } +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | Array | 返回数组,该数组用来描述线段如何交替和间距长度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var info = ctx.getLineDash(); } - ``` - + } + ``` -### transferFromImageBitmap7+ +### transferFromImageBitmap7+ -transferFromImageBitmap\(bitmap: ImageBitmap\): void +transferFromImageBitmap(bitmap: ImageBitmap): void 显示给定的ImageBitmap对象。 -- 参数 - - - - - - - - - - - -

参数

-

类型

-

描述

-

bitmap

-

ImageBitmap

-

待显示的ImageBitmap对象。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var canvas = this.$refs.canvas.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); - offscreenCanvasCtx.fillRect(0, 0, 200, 200); - - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | bitmap | ImageBitmap | 待显示的ImageBitmap对象。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + offscreenCanvasCtx.fillRect(0, 0, 200, 200); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); } - ``` - - ![](figures/zh-cn_image_0000001168984882.png) - + } + ``` + ![zh-cn_image_0000001168984882](figures/zh-cn_image_0000001168984882.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md index d8aba1786f5ddd8ecbca15912f4e11b643d283c1..622dd0360252037b579a424984fa8bcc89a720fa 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md @@ -1,80 +1,23 @@ -# Image对象 +# Image对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 图片对象。 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

默认值

-

必填

-

描述

-

src

-

string

-

-

-

-

图片资源的路径。

-

width

-

<length>

-

0px

-

-

图片的宽度。

-

height

-

<length>

-

0px

-

-

图片的高度。

-

onload

-

Function

-

-

-

-

图片加载成功后触发该事件,无参数。

-

onerror

-

Function

-

-

-

-

图片加载失败后触发该事件,无参数。

-
+## 属性 + +| 属性 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| src | string | - | 是 | 图片资源的路径。 | +| width | <length> | 0px | 否 | 图片的宽度。 | +| height | <length> | 0px | 否 | 图片的高度。 | +| onload | Function | - | 否 | 图片加载成功后触发该事件,无参数。 | +| onerror | Function | - | 否 | 图片加载失败后触发该事件,无参数。 | + -## 示例 +## 示例 ``` @@ -87,7 +30,7 @@ //xxx.js export default { onShow(){ - const el =this.$refs.canvas + const el =this.$refs.canvas; var ctx =el.getContext('2d'); var img = new Image(); img.src = 'common/images/example.jpg'; @@ -102,5 +45,5 @@ export default { } ``` -![](figures/1-2.png) +![zh-cn_image_0000001198530395](figures/zh-cn_image_0000001198530395.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md index 66e8c36f5edfe09b2b34108c4ac118f9caa09d18..cce0847efbc41c0783c5d24689fbcbc24aaad924 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md @@ -1,34 +1,15 @@ -# ImageBitmap对象 +# ImageBitmap对象 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -ImageBitmap对象由OffscreenCanvas对象的transferToImageBitmap\(\)方法生成,存储了offscreen canvas渲染的像素数据。 -## 属性 +ImageBitmap对象由OffscreenCanvas对象的transferToImageBitmap()方法生成,存储了offscreen canvas渲染的像素数据。 - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

ImageBitmap的像素宽度。

-

height

-

number

-

ImageBitmap的像素高度。

-
+## 属性 + +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| width | number | ImageBitmap的像素宽度。 | +| height | number | ImageBitmap的像素高度。 | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md index 382c4ca9c498b4b4c21ed86342a812ab056c4c93..05ba230a16a58265f455072fba75091b737ccfdd 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md @@ -1,42 +1,21 @@ -# ImageData对象 +# ImageData对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ImageData对象可以存储canvas渲染的像素数据。 -## 属性 - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

矩形区域实际像素宽度。

-

height

-

number

-

矩形区域实际像素高度。

-

data

-

<Uint8ClampedArray>

-

一维数组,保存了相应的颜色数据,数据值范围为0到255。

-
+## 属性 + +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| width | number | 矩形区域实际像素宽度。 | +| height | number | 矩形区域实际像素高度。 | +| data | <Uint8ClampedArray> | 一维数组,保存了相应的颜色数据,数据值范围为0到255。 | -## 示例 + +## 示例 ``` @@ -61,4 +40,3 @@ export default { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md index 0b3f7f221330dda9bdd1b550f1ca3099816bd4e2..89277e85f4bf443312037c5f392fc624f77f6102 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md @@ -1,175 +1,72 @@ -# OffscreenCanvas对象 +# OffscreenCanvas对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 可以离屏渲染的canvas对象。 -## 属性 - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

offscreen canvas对象的宽度。

-

height

-

number

-

offscreen canvas对象的高度。

-
- -## 方法 - -### getContext - -getContext\(type: string, options?: CanvasRenderingContext2DSettings\): OffscreenCanvasRenderingContext2D + +## 属性 + +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| width | number | offscreen canvas对象的宽度。 | +| height | number | offscreen canvas对象的高度。 | + + +## 方法 + + +### getContext + +getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D 获取offscreen canvas绘图上下文,返回值为2D绘制对象。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

contextId

-

string

-

-

仅支持 '2d'。

-

options

-

CanvasRenderingContext2DSettings

-

-

用于在离屏画布上进行绘制矩形、文本、图片等

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

OffscreenCanvasRenderingContext2D

-

2D绘制对象,用于在画布组件上绘制矩形、文本、图片等

-
- - -### toDataURL - -toDataURL\(type?: string, quality?:number\): +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | contextId | string | 是 | 仅支持 '2d'。 | + | options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象,用于在画布组件上绘制矩形、文本、图片等。 | + + +### toDataURL + +toDataURL(type?: string, quality?:number): 生成一个包含图片展示的URL。 -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

type

-

string

-

-

可选参数,用于指定图像格式,默认格式为image/png。

-

quality

-

number

-

-

在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

string

-

图像的URL地址。

-
- - -### transferToImageBitmap - -transferToImageBitmap\(\): ImageBitmap +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 | + | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 | -在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | string | 图像的URL地址。 | -- 返回值 - - - - - - - - -

类型

-

说明

-

ImageBitmap

-

存储离屏画布上渲染的像素数据。

-
+### transferToImageBitmap +transferToImageBitmap(): ImageBitmap -## 示例 +在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | + + +## 示例 ``` @@ -196,4 +93,3 @@ export default { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md index c2a05294bdca936607247241c14c5ae79c0926f8..d9b09a183da8c6bd7d4ef99e5a1519e4ee57057e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md @@ -1,796 +1,432 @@ -# Path2D对象 +# Path2D对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 6开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 路径对象,支持通过对象的接口进行路径的描述,并通过Canvas的stroke接口进行绘制。 -## addPath -addPath\(path: Object\): void +## addPath + +addPath(path: Object): void 将另一个路径添加到当前的路径对象中。 -- 参数 - - - - - - - - - - - -

参数

-

类型

-

描述

-

path

-

Object

-

需要添加到当前路径的路径对象

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); - var path2 = ctx.createPath2D(); - path2.addPath(path1); - ctx.stroke(path2); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | path | Object | 需要添加到当前路径的路径对象 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); } - ``` - - ![](figures/zh-cn_image_0000001173164873.png) + } + ``` + ![zh-cn_image_0000001173164873](figures/zh-cn_image_0000001173164873.png) -## setTransform +## setTransform -setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void +setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void 设置路径变换矩阵。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

scaleX

-

number

-

x轴的缩放比例

-

skewX

-

number

-

x轴的倾斜角度

-

skewY

-

number

-

y轴的倾斜角度

-

scaleY

-

number

-

y轴的缩放比例

-

translateX

-

number

-

x轴的平移距离

-

translateY

-

number

-

y轴的平移距离

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); - path.setTransform(0.8, 0, 0, 0.4, 0, 0); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | scaleX | number | x轴的缩放比例 | + | skewX | number | x轴的倾斜角度 | + | skewY | number | y轴的倾斜角度 | + | scaleY | number | y轴的缩放比例 | + | translateX | number | x轴的平移距离 | + | translateY | number | y轴的平移距离 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001127125208.png) + ![zh-cn_image_0000001127125208](figures/zh-cn_image_0000001127125208.png) -## closePath +## closePath -closePath\(\): void +closePath(): void 将路径的当前点移回到路径的起点,当前点到起点间画一条直线。如果形状已经闭合或只有一个点,则此功能不执行任何操作。 -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(200, 100); - path.lineTo(300, 100); - path.lineTo(200, 200); - path.closePath(); - ctx.stroke(path); - } +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(200, 100); + path.lineTo(300, 100); + path.lineTo(200, 200); + path.closePath(); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001127125202.png) + ![zh-cn_image_0000001127125202](figures/zh-cn_image_0000001127125202.png) -## moveTo +## moveTo -moveTo\(x: number, y: number\): void +moveTo(x: number, y: number): void 将路径的当前坐标点移动到目标点,移动过程中不绘制线条。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

目标点X轴坐标

-

y

-

number

-

目标点Y轴坐标

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(50, 100); - path.lineTo(250, 100); - path.lineTo(150, 200); - path.closePath(); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 目标点X轴坐标 | + | y | number | 目标点Y轴坐标 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(50, 100); + path.lineTo(250, 100); + path.lineTo(150, 200); + path.closePath(); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001173164869.png) + ![zh-cn_image_0000001173164869](figures/zh-cn_image_0000001173164869.png) -## lineTo +## lineTo -lineTo\(x: number, y: number\): void +lineTo(x: number, y: number): void 从当前点绘制一条直线到目标点。 -- 参数 - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

目标点X轴坐标

-

y

-

number

-

目标点Y轴坐标

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(100, 100); - path.lineTo(100, 200); - path.lineTo(200, 200); - path.lineTo(200, 100); - path.closePath(); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 目标点X轴坐标 | + | y | number | 目标点Y轴坐标 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(100, 100); + path.lineTo(100, 200); + path.lineTo(200, 200); + path.lineTo(200, 100); + path.closePath(); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001127285024.png) + ![zh-cn_image_0000001127285024](figures/zh-cn_image_0000001127285024.png) -## bezierCurveTo +## bezierCurveTo -bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void +bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 创建三次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

cp1x

-

number

-

第一个贝塞尔参数的x坐标值。

-

cp1y

-

number

-

第一个贝塞尔参数的y坐标值。

-

cp2x

-

number

-

第二个贝塞尔参数的x坐标值。

-

cp2y

-

number

-

第二个贝塞尔参数的y坐标值。

-

x

-

number

-

路径结束时的x坐标值。

-

y

-

number

-

路径结束时的y坐标值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(10, 10); - path.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | cp1x | number | 第一个贝塞尔参数的x坐标值。 | + | cp1y | number | 第一个贝塞尔参数的y坐标值。 | + | cp2x | number | 第二个贝塞尔参数的x坐标值。 | + | cp2y | number | 第二个贝塞尔参数的y坐标值。 | + | x | number | 路径结束时的x坐标值。 | + | y | number | 路径结束时的y坐标值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001173324783.png) + ![zh-cn_image_0000001173324783](figures/zh-cn_image_0000001173324783.png) -## quadraticCurveTo +## quadraticCurveTo -quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void +quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

cpx

-

number

-

贝塞尔参数的x坐标值。

-

cpy

-

number

-

贝塞尔参数的y坐标值。

-

x

-

number

-

路径结束时的x坐标值。

-

y

-

number

-

路径结束时的y坐标值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(10, 10); - path.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | cpx | number | 贝塞尔参数的x坐标值。 | + | cpy | number | 贝塞尔参数的y坐标值。 | + | x | number | 路径结束时的x坐标值。 | + | y | number | 路径结束时的y坐标值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001173164871.png) + ![zh-cn_image_0000001173164871](figures/zh-cn_image_0000001173164871.png) -## arc +## arc -arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number\): void +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void 绘制弧线路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

弧线圆心的x坐标值。

-

y

-

number

-

弧线圆心的y坐标值。

-

radius

-

number

-

弧线的圆半径。

-

startAngle

-

number

-

弧线的起始弧度。

-

endAngle

-

number

-

弧线的终止弧度。

-

anticlockwise

-

boolean

-

是否逆时针绘制圆弧。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.arc(100, 75, 50, 0, 6.28); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 弧线圆心的x坐标值。 | + | y | number | 弧线圆心的y坐标值。 | + | radius | number | 弧线的圆半径。 | + | startAngle | number | 弧线的起始弧度。 | + | endAngle | number | 弧线的终止弧度。 | + | anticlockwise | boolean | 是否逆时针绘制圆弧。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(100, 75, 50, 0, 6.28); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001173164867.png) + ![zh-cn_image_0000001173164867](figures/zh-cn_image_0000001173164867.png) -## arcTo +## arcTo -arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void +arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x1

-

number

-

圆弧经过的第一个点的x坐标值。

-

y1

-

number

-

圆弧经过的第一个点的y坐标值。

-

x2

-

number

-

圆弧经过的第二个点的x坐标值。

-

y2

-

number

-

圆弧经过的第二个点的y坐标值。

-

radius

-

number

-

圆弧的圆半径值。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.arcTo(150, 20, 150, 70, 50); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x1 | number | 圆弧经过的第一个点的x坐标值。 | + | y1 | number | 圆弧经过的第一个点的y坐标值。 | + | x2 | number | 圆弧经过的第二个点的x坐标值。 | + | y2 | number | 圆弧经过的第二个点的y坐标值。 | + | radius | number | 圆弧的圆半径值。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(150, 20, 150, 70, 50); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001127125204.png) + ![zh-cn_image_0000001127125204](figures/zh-cn_image_0000001127125204.png) -## ellipse +## ellipse -ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void 在规定的矩形区域绘制一个椭圆。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

椭圆圆心的x轴坐标。

-

y

-

number

-

椭圆圆心的y轴坐标。

-

radiusX

-

number

-

椭圆x轴的半径长度。

-

radiusY

-

number

-

椭圆y轴的半径长度。

-

rotation

-

number

-

椭圆的旋转角度,单位为弧度。

-

startAngle

-

number

-

椭圆绘制的起始点角度,以弧度表示。

-

endAngle

-

number

-

椭圆绘制的结束点角度,以弧度表示。

-

anticlockwise

-

number

-

是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0)

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx =el.getContext('2d'); - var path = ctx.createPath2D(); - path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 椭圆圆心的x轴坐标。 | + | y | number | 椭圆圆心的y轴坐标。 | + | radiusX | number | 椭圆x轴的半径长度。 | + | radiusY | number | 椭圆y轴的半径长度。 | + | rotation | number | 椭圆的旋转角度,单位为弧度。 | + | startAngle | number | 椭圆绘制的起始点角度,以弧度表示。 | + | endAngle | number | 椭圆绘制的结束点角度,以弧度表示。 | + | anticlockwise | number | 是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0) | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001173324787.png) + ![zh-cn_image_0000001173324787](figures/zh-cn_image_0000001173324787.png) -## rect +## rect -rect\(x: number, y: number, width: number, height: number\): void +rect(x: number, y: number, width: number, height: number): void 创建矩形路径。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形的左上角x坐标值。

-

y

-

number

-

指定矩形的左上角y坐标值。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow() { - const el =this.$refs.canvas; - const ctx = el.getContext('2d'); - var path = ctx.createPath2D(); - path.rect(20, 20, 100, 100); - ctx.stroke(path); - } +- 参数 + | 参数 | 类型 | 描述 | + | -------- | -------- | -------- | + | x | number | 指定矩形的左上角x坐标值。 | + | y | number | 指定矩形的左上角y坐标值。 | + | width | number | 指定矩形的宽度。 | + | height | number | 指定矩形的高度。 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); } - ``` - - ![](figures/zh-cn_image_0000001127125212.png) - + } + ``` + ![zh-cn_image_0000001127125212](figures/zh-cn_image_0000001127125212.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas.md index 283c3b0aba8d368368f6d50565c40da31bb80326..b80397bf3c727f6826bac8db96a04cd76c5ebb0d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas.md @@ -1,21 +1,21 @@ -# 画布组件 +# 画布组件 -- **[canvas组件](js-components-canvas-canvas.md)** -- **[CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)** -- **[Image对象](js-components-canvas-image.md)** +- **[canvas组件](js-components-canvas-canvas.md)** -- **[CanvasGradient对象](js-components-canvas-canvasgradient.md)** +- **[CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)** -- **[ImageData对象](js-components-canvas-imagedata.md)** +- **[Image对象](js-components-canvas-image.md)** -- **[Path2D对象](js-components-canvas-path2d.md)** +- **[CanvasGradient对象](js-components-canvas-canvasgradient.md)** -- **[ImageBitmap对象](js-components-canvas-imagebitmap.md)** +- **[ImageData对象](js-components-canvas-imagedata.md)** -- **[OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)** +- **[Path2D对象](js-components-canvas-path2d.md)** -- **[OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)** +- **[ImageBitmap对象](js-components-canvas-imagebitmap.md)** +- **[OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)** +- **[OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md index b9cc5bcd41a999b9d0746e19727f5915306022ac..b2e6324e549b96753d7e7a215684035823d47bb8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md @@ -1,380 +1,65 @@ -# 动画样式 +# 动画样式 -组件支持动态的旋转、平移、缩放效果,可在style或css中设置。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

transform-origin

-

string6+ | <percentage> | <length> string6+ | <percentage> | <length>

-

center center

-

变换对象的原点位置,支持px和百分比(相对于动画目标组件),如果仅设置一个值,另一个值为50%,第一个string的可选值为:left | center | right ,第二个string的可选值为:top | center | bottom。

-

示例:

-

transform-origin: 200px 30%。

-

transform-origin: 100px top。

-

transform-origin: center center。

-

transform

-

string

-

-

-

支持同时设置平移/旋转/缩放的属性。

-

详见表1

-

animation6+

-

string

-

0s ease 0s 1 normal none running none

-

格式:duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name,每个字段不区分先后,但是 duration / delay 按照出现的先后顺序解析。

-

animation-name

-

string

-

-

-

指定@keyframes,详见表2

-

animation-delay

-

<time>

-

0

-

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。

-

animation-duration

-

<time>

-

0

-

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。

-
说明:

animation-duration 样式必须设置,否则时长为 0,则不会播放动画。

-
-

animation-iteration-count

-

number | infinite

-

1

-

定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。

-

animation-timing-function

-

string

-

ease

-

描述动画执行的速度曲线,用于使动画更为平滑。

-

可选项有:

-
  • linear:表示动画从头到尾的速度都是相同的。
  • ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25, 0.1, 0.25, 1.0)。
  • ease-in:表示动画以低速开始,cubic-bezier(0.42, 0.0, 1.0, 1.0)。
  • ease-out:表示动画以低速结束,cubic-bezier(0.0, 0.0, 0.58, 1.0)。
  • ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42, 0.0, 0.58, 1.0)。
  • friction:阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。
  • extreme-deceleration:急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。
  • sharp:锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。
  • rhythm:节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。
  • smooth:平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。
  • cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。
  • steps: 阶梯曲线6+。语法:steps(number[, end|start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。
-

animation-direction6+

-

string

-

normal

-

指定动画的播放模式:

-
  • normal: 动画正向循环播放。
  • reverse: 动画反向循环播放。
  • alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。
  • alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。
-

animation-fill-mode

-

string

-

none

-

指定动画开始和结束的状态:

-
  • none:在动画执行之前和之后都不会应用任何样式到目标上。
  • forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。
  • backwards6+:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
  • both6+:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。
-

animation-play-state6+

-

string

-

running

-

指定动画的当前状态:

-
  • paused:动画状态为暂停。
  • running:动画状态为播放。
-

transition6+

-

string

-

all 0 ease 0

-

指定组件状态切换时的过渡效果,可以通过transition属性设置如下四个属性:

-
  • transition-property:规定设置过渡效果的 CSS 属性的名称,目前支持宽、高、背景色。
  • transition-duration:规定完成过渡效果需要的时间,单位秒。
  • transition-timing-function:规定过渡效果的时间曲线,支持样式动画提供的曲线。
  • transition-delay:规定过渡效果延时启动时间,单位秒。
-
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -**表 1** transform操作说明 +组件支持动态的旋转、平移、缩放效果,可在style或css中设置。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

none6+

-

-

-

不进行任何转换。

-

matrix6+

-

<number>

-

入参为六个值的矩阵,6个值分别代表:scaleX, skewY, skewX, scaleY, translateX, translateY。

-

matrix3d6+

-

<number>

-

入参为十六个值的4X4矩阵。

-

translate

-

<length>| <percent>

-

平移动画属性,支持设置x轴和y轴两个维度的平移参数。

-

translate3d6+

-

<length>| <percent>

-

三个入参,分别代表X轴、Y轴、Z轴的平移距离。

-

translateX

-

<length>| <percent>

-

X轴方向平移动画属性。

-

translateY

-

<length>| <percent>

-

Y轴方向平移动画属性。

-

translateZ6+

-

<length>| <percent>

-

Z轴的平移距离。

-

scale

-

<number>

-

缩放动画属性,支持设置x轴和y轴两个维度的缩放参数。

-

scale3d6+

-

<number>

-

三个入参,分别代表X轴、Y轴、Z轴的缩放参数。

-

scaleX

-

<number>

-

X轴方向缩放动画属性。

-

scaleY

-

<number>

-

Y轴方向缩放动画属性。

-

scaleZ6+

-

<number>

-

Z轴的缩放参数。

-

rotate

-

<deg> | <rad> | <grad>6+ | <turn>6+

-

旋转动画属性,支持设置x轴和y轴两个维度的选中参数。

-

rotate3d6+

-

<deg> | <rad> | <grad> | <turn>

-

四个入参,前三个分别为X轴、Y轴、Z轴的旋转向量,第四个是旋转角度。

-

rotateX

-

<deg> | <rad> | <grad>6+ | <turn>6+

-

X轴方向旋转动画属性。

-

rotateY

-

<deg> | <rad> | <grad>6+ | <turn>6+

-

Y轴方向旋转动画属性。

-

rotateZ6+

-

<deg> | <rad> | <grad> | <turn>

-

Z轴方向的旋转角度。

-

skew6+

-

<deg> | <rad> | <grad> | <turn>

-

两个入参,分别为X轴和Y轴的2D倾斜角度。

-

skewX6+

-

<deg> | <rad> | <grad> | <turn>

-

X轴的2D倾斜角度。

-

skewY6+

-

<deg> | <rad> | <grad> | <turn>

-

Y轴的2D倾斜角度。

-

perspective6+

-

<number>

-

3D透视场景下镜头距离元素表面的距离。

-
-**表 2** @keyframes属性说明 +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| transform-origin | string6+ \| <percentage> \| <length> string6+ \| <percentage> \| <length> | center center | 变换对象的原点位置,支持px和百分比(相对于动画目标组件),如果仅设置一个值,另一个值为50%,第一个string的可选值为:left \| center \| right ,第二个string的可选值为:top \| center \| bottom。
示例:
transform-origin: 200px 30%。
transform-origin: 100px top。
transform-origin: center center。 | +| transform | string | - | 支持同时设置平移/旋转/缩放的属性。
详见表 transform操作说明。 | +| animation6+ | string | 0s ease 0s 1 normal none running none | 格式:duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name,每个字段不区分先后,但是 duration / delay 按照出现的先后顺序解析。 | +| animation-name | string | - | 指定\@keyframes,详见表 @keyframes属性说明。 | +| animation-delay | <time> | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。 | +| animation-duration | <time> | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> animation-duration 样式必须设置,否则时长为 0,则不会播放动画。 | +| animation-iteration-count | number  \| infinite | 1 | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。 | +| animation-timing-function | string | ease
| 描述动画执行的速度曲线,用于使动画更为平滑。
可选项有:
- linear:表示动画从头到尾的速度都是相同的。
- ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25, 0.1, 0.25, 1.0)。
- ease-in:表示动画以低速开始,cubic-bezier(0.42, 0.0, 1.0, 1.0)。
- ease-out:表示动画以低速结束,cubic-bezier(0.0, 0.0, 0.58, 1.0)。
- ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42, 0.0, 0.58, 1.0)。
- friction:阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。
- extreme-deceleration:急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。
- sharp:锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。
- rhythm:节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。
- smooth:平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。
- cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。
- steps: 阶梯曲线6+。语法:steps(number[, end\|start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。 | +| animation-direction6+ | string | normal | 指定动画的播放模式:
- normal: 动画正向循环播放。
- reverse: 动画反向循环播放。
- alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。
- alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。 | +| animation-fill-mode | string | none | 指定动画开始和结束的状态:
- none:在动画执行之前和之后都不会应用任何样式到目标上。
- forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。
- backwards6+:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
- both6+:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。 | +| animation-play-state6+ | string | running | 指定动画的当前状态:
- paused:动画状态为暂停。
- running:动画状态为播放。 | +| transition6+ | string | all 0 ease 0 | 指定组件状态切换时的过渡效果,可以通过transition属性设置如下四个属性:
- transition-property:规定设置过渡效果的 CSS 属性的名称,目前支持宽、高、背景色。
- transition-duration:规定完成过渡效果需要的时间,单位秒。
- transition-timing-function:规定过渡效果的时间曲线,支持样式动画提供的曲线。
- transition-delay:规定过渡效果延时启动时间,单位秒。 | + + +**表1** transform操作说明 + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| none6+ | - | 不进行任何转换。 | +| matrix6+ | <number> | 入参为六个值的矩阵,6个值分别代表:scaleX, skewY, skewX, scaleY, translateX, translateY。 | +| matrix3d6+ | <number> | 入参为十六个值的4X4矩阵。 | +| translate | <length>\| <percent> | 平移动画属性,支持设置x轴和y轴两个维度的平移参数。 | +| translate3d6+ | <length>\| <percent> | 三个入参,分别代表X轴、Y轴、Z轴的平移距离。 | +| translateX | <length>\| <percent> | X轴方向平移动画属性。 | +| translateY | <length>\| <percent> | Y轴方向平移动画属性。 | +| translateZ6+ | <length>\| <percent> | Z轴的平移距离。 | +| scale | <number> | 缩放动画属性,支持设置x轴和y轴两个维度的缩放参数。 | +| scale3d6+ | <number> | 三个入参,分别代表X轴、Y轴、Z轴的缩放参数。 | +| scaleX | <number> | X轴方向缩放动画属性。 | +| scaleY | <number> | Y轴方向缩放动画属性。 | +| scaleZ6+ | <number> | Z轴的缩放参数。 | +| rotate | <deg> \| <rad> \| <grad>6+ \| <turn>6+ | 旋转动画属性,支持设置x轴和y轴两个维度的选中参数。 | +| rotate3d6+ | <deg> \| <rad> \| <grad> \| <turn> | 四个入参,前三个分别为X轴、Y轴、Z轴的旋转向量,第四个是旋转角度。 | +| rotateX | <deg> \| <rad> \| <grad>6+ \| <turn>6+ | X轴方向旋转动画属性。 | +| rotateY | <deg> \| <rad> \| <grad>6+ \| <turn>6+ | Y轴方向旋转动画属性。 | +| rotateZ6+ | <deg> \| <rad> \| <grad> \| <turn> | Z轴方向的旋转角度。 | +| skew6+ | <deg> \| <rad> \| <grad> \| <turn> | 两个入参,分别为X轴和Y轴的2D倾斜角度。 | +| skewX6+ | <deg> \| <rad> \| <grad> \| <turn> | X轴的2D倾斜角度。 | +| skewY6+ | <deg> \| <rad> \| <grad> \| <turn> | Y轴的2D倾斜角度。 | +| perspective6+ | <number> | 3D透视场景下镜头距离元素表面的距离。 | + +**表2** @keyframes属性说明 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| background-color | <color> | - | 动画执行后应用到组件上的背景颜色。 | +| opacity | number | 1 | 动画执行后应用到组件上的不透明度值,为介于0到1间的数值,默认为1。 | +| width | <length> | - | 动画执行后应用到组件上的宽度值。 | +| height | <length> | - | 动画执行后应用到组件上的高度值。 | +| transform | string | - | 定义应用在组件上的变换类型,见表 transform操作说明。 | +| background-position6+ | string \| <percentage> \| <length> string \| <percentage> \| <length> | 50% 50% | 背景图位置。单位支持百分比和px,第一个值是水平位置,第二个值是垂直位置。如果仅设置一个值,另一个值为50%。第一个string的可选值为:left \| center \| right ,第二个string的可选值为:top \| center \| bottom。
示例:
- background-position: 200px 30%
- background-position: 100px top
- background-position: center center | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

background-color

-

<color>

-

-

-

动画执行后应用到组件上的背景颜色。

-

opacity

-

number

-

1

-

动画执行后应用到组件上的不透明度值,为介于0到1间的数值,默认为1。

-

width

-

<length>

-

-

-

动画执行后应用到组件上的宽度值。

-

height

-

<length>

-

-

-

动画执行后应用到组件上的高度值。

-

transform

-

string

-

-

-

定义应用在组件上的变换类型,见表1

-

background-position6+

-

string | <percentage> | <length> string | <percentage> | <length>

-

50% 50%

-

背景图位置。单位支持百分比和px,第一个值是水平位置,第二个值是垂直位置。如果仅设置一个值,另一个值为50%。第一个string的可选值为:left | center | right ,第二个string的可选值为:top | center | bottom。

-

示例:

-
  • background-position: 200px 30%
  • background-position: 100px top
  • background-position: center center
-
对于不支持起始值或终止值缺省的情况,可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态6+。示例: @@ -403,11 +88,11 @@ background-color: #f76160; transform:translate(100px) rotate(0deg) scale(1.0); } - /* 可以通过百分比指定动画运行的中间状态6+ */ - 50% { - background-color: #f76160; - transform:translate(100px) rotate(60deg) scale(1.3); - } + /* 可以通过百分比指定动画运行的中间状态 */ + 50% { + background-color: \#f76160; + transform:translate(100px) rotate(60deg) scale(1.3); + } to { background-color: #09ba07; transform:translate(100px) rotate(180deg) scale(2.0); @@ -415,7 +100,8 @@ } ``` -![](figures/zh-cn_image_0000001173324797.gif) + +![zh-cn_image_0000001173324797](figures/zh-cn_image_0000001173324797.gif) ``` @@ -463,7 +149,8 @@ export default { } ``` -![](figures/zh-cn_image_0000001127285034.gif) + +![zh-cn_image_0000001127285034](figures/zh-cn_image_0000001127285034.gif) ``` @@ -521,10 +208,13 @@ export default { } ``` -![](figures/zh-cn_image_0000001152833768.gif) ->![](../../public_sys-resources/icon-note.gif) **说明:** ->@keyframes的from/to不支持动态绑定。 ->steps函数的end和start含义如下图所示。 ->![](figures/zh-cn_image_0000001127125220.png) +![zh-cn_image_0000001152833768](figures/zh-cn_image_0000001152833768.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> @keyframes的from/to不支持动态绑定。 +> +> steps函数的end和start含义如下图所示。 +> +> ![zh-cn_image_0000001127125220](figures/zh-cn_image_0000001127125220.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md index 2e943c6b5d3e59aedefa2411a635905a4125c806..bd9563e724fdd5b5c42c5774ccf6d1168f0f465e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md @@ -1,84 +1,33 @@ -# 原子布局 +# 原子布局 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 在屏幕形态和规格不同等情况下,布局效果需要实现自适应,因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力,称为原子布局。设计师可以考虑使用原子能力,定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力,快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 -## 隐藏能力 + +## 隐藏能力 在非折行flex布局基础上,增加了显示优先级标记,可以调整组件内元素水平/垂直方向的显示优先级,根据当前组件容器的可用空间来显示内容。 - - - - - - - - - - - - -

样式

-

类型

-

默认值

-

说明

-

display-index

-

number

-

0

-

适用于div等支持flex布局的容器组件中的子组件上,当容器组件在flex主轴上尺寸不足以显示全部内容时,按照display-index值从小到大的顺序进行隐藏,具有相同display-index值的组件同时隐藏,默认值为0,表示隐藏。

-
+| 样式 | 类型 | 默认值 | 说明 | +| -------- | -------- | -------- | -------- | +| display-index | number | 0 | 适用于div等支持flex布局的容器组件中的子组件上,当容器组件在flex主轴上尺寸不足以显示全部内容时,按照display-index值从小到大的顺序进行隐藏,具有相同display-index值的组件同时隐藏,默认值为0,表示隐藏。 | + -## 占比能力 +## 占比能力 在非折行的flex布局中,定义了占比能力的组件,保证指定元素始终在容器的某一个比例空间中进行布局。 - - - - - - - - - - - - -

样式

-

类型

-

默认值

-

说明

-

flex-weight

-

number

-

-

-

指明当前元素在flex主轴方向上尺寸权值,当且仅当容器组件中所有节点均设置此属性时生效,当前元素尺寸为: 容器主轴尺寸 * 当前权值 / 所有子元素权值和。

-
+| 样式 | 类型 | 默认值 | 说明 | +| -------- | -------- | -------- | -------- | +| flex-weight | number | - | 指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性,当前元素尺寸为: 容器主轴尺寸 \* 当前权值 / 所有子元素权值和。如果容器组件中某几个节点设置此属性,则容器会对其他未设置此属性的节点进行布局,再将剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为:容器剩余空间 \* 该元素权值 / 所有子元素权值和。 | -## 固定比例 -定义了组件固定比例调整尺寸的能力。 +## 固定比例 - - - - - - - - - - - - -

样式

-

类型

-

默认值

-

说明

-

aspect-ratio

-

number

-

-

-

1. 接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。

-

2. 遵守最大值与最小值的限制。

-

3. 在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。

-
+定义了组件固定比例调整尺寸的能力。 +| 样式 | 类型 | 默认值 | 说明 | +| -------- | -------- | -------- | -------- | +| aspect-ratio | number | - | 1. 接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。
2. 遵守最大值与最小值的限制。
3. 在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md index b5f1d04e26d2ebae7568c57049ea7260a78b2c7f..bb3542a30dcbe465fe29cde00d44cd7eff8c71f3 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md @@ -1,173 +1,34 @@ -# 通用属性 +# 通用属性 -## 常规属性 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +## 常规属性 常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

style

-

string

-

-

-

-

组件的样式声明。

-

class

-

string

-

-

-

-

组件的样式类,用于引用样式表。

-

ref

-

string

-

-

-

-

用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

-

当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。

-

data

-

string

-

-

-

-

给当前组件设置data属性,进行相应的数据存储和读取。JS文件中:

-
  • 在事件回调中使用 e.target.attr.data 读取数据,e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后,通过attr.data 进行访问。
-
说明:

从API Version 6 开始,建议使用data-*。

-
-

data-*6+

-

string

-

-

-

-

给当前组件设置data-*属性,进行相应的数据存储和读取。大小写不敏感,如data-A和data-a默认相同。JS文件中:

-
  • 在事件回调中使用 e.target.dataSet.a读取数据,e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后,通过dataSet.a进行访问。
-

click-effect5+

-

string

-

-

-

-

通过这个属性可以设置组件的弹性点击效果,当前支持如下三种效果:

-
  • spring-small:建议小面积组件设置,缩放(90%)。
  • spring-medium:建议中面积组件设置,缩放(95%)。
  • spring-large:建议大面积组件设置,缩放(95%)。
-

dir6+

-

string

-

auto

-

-

设置元素布局模式,支持设置rtl、ltr和auto三种属性值:

-
  • rtl:使用从右往左布局模式。
  • ltr:使用从左往右布局模式。
  • auto:跟随系统语言环境。
-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类,用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。 | +| disabled | boolean | false | 否 | 当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。 | +| data | string | - | 否 | 给当前组件设置data属性,进行相应的数据存储和读取。JS文件中:
- 在事件回调中使用 e.target.attr.data 读取数据,e为事件回调函数入参。
- 使用$element或者$refs获取DOM元素后,通过attr.data 进行访问。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 从API Version 6 开始,建议使用data-\*。 | +| data-\*6+ | string | - | 否 | 给当前组件设置data-\*属性,进行相应的数据存储和读取。大小写不敏感,如data-A和data-a默认相同。JS文件中:
- 在事件回调中使用 e.target.dataSet.a读取数据,e为事件回调函数入参。
- 使用$element或者$refs获取DOM元素后,通过dataSet.a进行访问。 | +| click-effect5+ | string | - | 否 | 通过这个属性可以设置组件的弹性点击效果,当前支持如下三种效果:
- spring-small:建议小面积组件设置,缩放(90%)。
- spring-medium:建议中面积组件设置,缩放(95%)。
- spring-large:建议大面积组件设置,缩放(95%)。 | +| dir6+ | string | auto | 否 | 设置元素布局模式,支持设置rtl、ltr和auto三种属性值:
- rtl:使用从右往左布局模式。
- ltr:使用从左往右布局模式。
- auto:跟随系统语言环境。 | -## 渲染属性 -组件普遍支持的用来设置组件是否渲染的属性。 +## 渲染属性 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

for

-

Array

-

-

-

根据设置的数据列表,展开当前元素。

-

if

-

boolean

-

-

-

根据设置的boolean值,添加或移除当前元素。

-

show

-

boolean

-

-

-

根据设置的boolean值,显示或隐藏当前元素。

-
+组件普遍支持的用来设置组件是否渲染的属性。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->属性和样式不能混用,不能在属性字段中进行样式设置。 +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| for | Array | - | 根据设置的数据列表,展开当前元素。 | +| if | boolean | - | 根据设置的boolean值,添加或移除当前元素。 | +| show | boolean | - | 根据设置的boolean值,显示或隐藏当前元素。 | +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 属性和样式不能混用,不能在属性字段中进行样式设置。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md index 1c8e89bc24595236acfa859c7e8abe19d00a6c57..e20ad7ff244b25b122747588495b00f17de9dcc6 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md @@ -1,10 +1,15 @@ -# 自定义字体样式 +# 自定义字体样式 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源,然后在font-family样式中引用该字体。 + 自定义字体可以是从项目中的字体文件中加载的字体,字体格式支持ttf和otf。 -## 定义font-face + +## 定义font-face ``` @font-face { @@ -21,18 +26,18 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指 自定义字体的来源,支持如下类别: -- 项目中的字体文件:通过url指定项目中的字体文件路径\(只支持绝对路径,详见[资源和文件访问规则](../../ui/js-framework-file.md)章节\)。 +- 项目中的字体文件:通过url指定项目中的字体文件路径(只支持绝对路径,详见[资源和文件访问规则](../../ui/js-framework-file.md)章节)。 -- 不支持设置多个src。 +- 不支持设置多个src。 -## 使用font-face + +## 使用font-face 可以在style中定义font-face,然后在font-family样式中指定该font-face的名称,从而应用font-face定义的字体。 **示例:** 页面布局: - ```
测试自定义字体 @@ -50,4 +55,3 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指 font-family: HWfont; } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md index 140f2a5aae21d94ab064d9bf9935df5fa89987d4..973948bf46b9df774fb2db3fe1ee0b54e86042e7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md @@ -1,462 +1,104 @@ -# 通用事件 +# 通用事件 -## 事件说明 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -- 事件绑定在组件上,当组件达到事件触发条件时,会执行JS中对应的事件回调函数,实现页面UI视图和页面JS逻辑层的交互; -- 事件回调函数中通过参数可以携带额外的信息,如组件上的数据对象dataset,事件特有的回调参数。 +## 事件说明 -相对于私有事件,大部分组件都可以绑定如下事件。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

是否支持冒泡

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

5+

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

5+

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

5+

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

5+

-

click

-

-

-

点击动作触发该事件。

-

6+

-

doubleclick7+

-
  

双击动作触发该事件

-

-

longpress

-

-

-

长按动作触发该事件。

-

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发该事件。

-

-

attached6+

-

-

-

当前组件节点挂载在渲染树后触发。

-

-

detached6+

-

-

-

当前组件节点从渲染树中移除后触发。

-

-

pinchstart7+

-

PinchEvent

-

手指开始执行捏合操作时触发该事件。

-

-

pinchupdate7+

-

PinchEvent

-

手指执行捏合操作过程中触发该事件。

-

-

pinchend7+

-

PinchEvent

-

手指捏合操作结束离开屏幕时触发该事件。

-

-

pinchcancel7+

-

PinchEvent

-

手指捏合操作被打断时触发该事件。

-

-

dragstart7+

-

DragEvent

-

用户开始拖拽时触发该事件。

-

-

drag7+

-

DragEvent

-

拖拽过程中触发该事件。

-

-

dragend7+

-

DragEvent

-

用户拖拽完成后触发。

-

-

dragenter7+

-

DragEvent

-

进入释放目标时触发该事件。

-

-

dragover7+

-

DragEvent

-

在释放目标内拖动时触发。

-

-

dragleave7+

-

DragEvent

-

离开释放目标区域时触发。

-

-

drop7+

-

DragEvent

-

在可释放目标区域内释放时触发。

-

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->除上述事件外,其他事件均为非冒泡事件,如[input的change事件](js-components-basic-input.md#section1721512551218),详见各个组件。 - -**表 1** BaseEvent对象属性列表 - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

type

-

string

-

当前事件的类型,比如click、longpress等。

-

timestamp

-

number

-

该事件触发时的时间戳。

-
- -**表 2** TouchEvent对象属性列表\(继承BaseEvent\) - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

touches

-

Array<TouchInfo>

-

触摸事件时的属性集合,包含屏幕触摸点的信息数组。

-

changedTouches

-

Array<TouchInfo>

-

触摸事件时的属性集合,包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点,如从无变有,位置变化,从有变无。例如用户手指刚接触屏幕时,touches数组中有数据,但changedTouches无数据。

-
+- 事件绑定在组件上,当组件达到事件触发条件时,会执行JS中对应的事件回调函数,实现页面UI视图和页面JS逻辑层的交互; -**表 3** TouchInfo +- 事件回调函数中通过参数可以携带额外的信息,如组件上的数据对象dataset,事件特有的回调参数。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

globalX

-

number

-

距离屏幕左上角(不包括状态栏)横向距离。屏幕的左上角为原点。

-

globalY

-

number

-

距离屏幕左上角(不包括状态栏)纵向距离。屏幕的左上角为原点。

-

localX

-

number

-

距离被触摸组件左上角横向距离。组件的左上角为原点。

-

localY

-

number

-

距离被触摸组件左上角纵向距离。组件的左上角为原点。

-

size

-

number

-

触摸接触面积。

-

force6+

-

number

-

接触力信息。

-

identifier8+

-

number

-

接触点标识信息,表示接触表面与触摸点的唯一标识值,手指在屏幕表面上移动触发的每个事件中该值不变。

-
-**表 4** SwipeEvent 基础事件对象属性列表(继承BaseEvent) - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

direction

-

string

-

滑动方向,可能值有:

-
  1. left:向左滑动;
  2. right:向右滑动;
  3. up:向上滑动;
  4. down:向下滑动。
-

distance6+

-

number

-

在滑动方向上的滑动距离。

-
- -**表 5** PinchEvent 对象属性列表7+ - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

scale

-

number

-

缩放比例

-

pinchCenterX

-

number

-

捏合中心点X轴坐标,单位px

-

pinchCenterY

-

number

-

捏合中心点Y轴坐标,单位px

-
- -**表 6** DragEvent对象属性列表\(继承BaseEvent\)7+ +相对于私有事件,大部分组件都可以绑定如下事件。 - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

type

-

string

-

事件名称。

-

globalX

-

number

-

距离屏幕左上角坐标原点横向距离。

-

globalY

-

number

-

距离屏幕左上角坐标原点纵向距离。

-

timestamp

-

number

-

时间戳。

-
-## 事件对象 +| 名称 | 参数 | 描述 | 是否支持冒泡 | +| -------- | -------- | -------- | -------- | +| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。
> **说明:**TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是5+ | +| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是5+ | +| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是5+ | +| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是5+ | +| click | - | 点击动作触发该事件。 | 是6+ | +| doubleclick7+ | - | 双击动作触发该事件 | 否 | +| longpress | - | 长按动作触发该事件。 | 否 | +| swipe5+ | SwipeEvent | 组件上快速滑动后触发该事件。
> **说明:**SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 | +| attached6+ | - | 当前组件节点挂载在渲染树后触发。 | 否 | +| detached6+ | - | 当前组件节点从渲染树中移除后触发。 | 否 | +| pinchstart7+ | PinchEvent | 手指开始执行捏合操作时触发该事件。
> **说明:**PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 | +| pinchupdate7+ | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 | +| pinchend7+ | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 | +| pinchcancel7+ | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 | +| dragstart7+ | DragEvent | 用户开始拖拽时触发该事件。
> **说明:**DragEvent具体可参考表8 DragEvent对象属性列表 | 否 | +| drag7+ | DragEvent | 拖拽过程中触发该事件。 | 否 | +| dragend7+ | DragEvent | 用户拖拽完成后触发。 | 否 | +| dragenter7+ | DragEvent | 进入释放目标时触发该事件。 | 否 | +| dragover7+ | DragEvent | 在释放目标内拖动时触发。 | 否 | +| dragleave7+ | DragEvent | 离开释放目标区域时触发。 | 否 | +| drop7+ | DragEvent | 在可释放目标区域内释放时触发。 | 否 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 除上述事件外,其他事件均为非冒泡事件,如[input的change事件](../arkui-js/js-components-basic-input.md#事件),详见各个组件。 + +**表1** BaseEvent对象属性列表 + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| type | string | 当前事件的类型,比如click、longpress等。 | +| timestamp | number | 该事件触发时的时间戳。 | + +**表2** TouchEvent对象属性列表(继承BaseEvent) + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| touches | Array<TouchInfo> | 触摸事件时的属性集合,包含屏幕触摸点的信息数组。 | +| changedTouches | Array<TouchInfo> | 触摸事件时的属性集合,包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点,如从无变有,位置变化,从有变无。例如用户手指刚接触屏幕时,touches数组中有数据,但changedTouches无数据。 | + +**表3** TouchInfo + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| globalX | number | 距离屏幕左上角(不包括状态栏)横向距离。屏幕的左上角为原点。 | +| globalY | number | 距离屏幕左上角(不包括状态栏)纵向距离。屏幕的左上角为原点。 | +| localX | number | 距离被触摸组件左上角横向距离。组件的左上角为原点。 | +| localY | number | 距离被触摸组件左上角纵向距离。组件的左上角为原点。 | +| size | number | 触摸接触面积。 | +| force6+ | number | 接触力信息。 | + +**表6** SwipeEvent 基础事件对象属性列表(继承BaseEvent) + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| direction | string | 滑动方向,可能值有:
1. left:向左滑动;
2. right:向右滑动;
3. up:向上滑动;
4. down:向下滑动。 | +| distance6+ | number | 在滑动方向上的滑动距离。 | + +**表7** PinchEvent 对象属性列表7+ + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| scale | number | 缩放比例 | +| pinchCenterX | number | 捏合中心点X轴坐标,单位px | +| pinchCenterY | number | 捏合中心点Y轴坐标,单位px | + +**表8** DragEvent对象属性列表(继承BaseEvent)7+ + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| type | string | 事件名称。 | +| globalX | number | 距离屏幕左上角坐标原点横向距离。 | +| globalY | number | 距离屏幕左上角坐标原点纵向距离。 | +| timestamp | number | 时间戳。 | + +## 事件对象 当组件触发事件后,事件回调函数默认会收到一个事件对象,通过该事件对象可以获取相应的信息。 **target对象:** - - - - - - - - - - -

属性

-

类型

-

说明

-

dataSet6+

-

Object

-

组件上通过通用属性设置的data-*的自定义属性组成的集合。

-
+| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| dataSet6+ | Object | 组件上通过通用属性设置的[data-*](../arkui-js/js-components-common-attributes.md)的自定义属性组成的集合。 | **示例:** @@ -477,4 +119,3 @@ export default { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md index 9be8919e811899dbd404787581793fba45824400..d6de4eea95bcbf457421a57fafdbed403c7bfb5b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md @@ -1,120 +1,79 @@ -# 渐变样式 +# 渐变样式 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 组件普遍支持的在style或css中设置的 可以平稳过渡两个或多个指定的颜色。 -开发框架支持线性渐变 \(linear-gradient\)和重复线性渐变 \(repeating-linear-gradient\)两种渐变效果。 -## 线性渐变/重复线性渐变 +开发框架支持线性渐变 (linear-gradient)和重复线性渐变 (repeating-linear-gradient)两种渐变效果。 + + +## 线性渐变/重复线性渐变 使用渐变样式,需要定义过渡方向和过渡颜色。 -### 过渡方向 + +### 过渡方向 通过direction或者angle指定过渡方向。 +- direction:进行方向渐变。 -- direction:进行方向渐变。 -- angle:进行角度渐变。 +- angle:进行角度渐变。 ``` background: linear-gradient(direction/angle, color, color, ...); 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>]

-

-

-

-

定义使用渐变样式区域内颜色的渐变效果。

-
- -- 示例 - - 1. 默认渐变方向为从上向下渐变 - - ``` - #gradient { - height: 300px; - width: 600px; - /* 从顶部开始向底部由红色向绿色渐变 */ - background: linear-gradient(red, #00ff00); - } - ``` - - ![](figures/111.png) - - 2. 45度夹角渐变 - - ``` - /* 45度夹角,从红色渐变到绿色 */ - background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); - ``` - - ![](figures/222.png) - - 3. 设置方向从左向右渐变 - - ``` - /* 从左向右渐变,在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */ - background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); - ``` - - ![](figures/333.png) - - 4. 重复渐变 - - ``` - /* 从左向右重复渐变,重复渐变区域30px(60-30)透明度0.5 */ - background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); - ``` - - ![](figures/444.png) +### 过渡颜色 + +支持以下四种方式:\#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>] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 | + +- 示例 + 1. 默认渐变方向为从上向下渐变 + ``` + #gradient { + height: 300px; + width: 600px; + /* 从顶部开始向底部由红色向绿色渐变 */ + background: linear-gradient(red, #00ff00); + } + ``` + + ![zh-cn_image_0000001190934502](figures/zh-cn_image_0000001190934502.png) + + 2. 45度夹角渐变 + + ``` + /* 45度夹角,从红色渐变到绿色 */ + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); + ``` + + ![zh-cn_image_0000001189854534](figures/zh-cn_image_0000001189854534.png) + + 3. 设置方向从左向右渐变 + + ``` + /* 从左向右渐变,在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */ + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); + ``` + + ![zh-cn_image_0000001236694521](figures/zh-cn_image_0000001236694521.png) + + 4. 重复渐变 + + ``` + /* 从左向右重复渐变,重复渐变区域30px(60-30)透明度0.5 */ + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); + ``` + ![zh-cn_image_0000001237134475](figures/zh-cn_image_0000001237134475.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md index 03af94ebe404f762f9ce9adff1b99df492ac9aa0..3b8c6099d96507e58f419c02042b462dc7f20679 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md @@ -1,16 +1,23 @@ -# 媒体查询 +# 媒体查询 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。 媒体查询(Media Query)在移动设备上应用十分广泛,开发者经常需要根据设备的大致类型或者特定的特征和设备参数(例如屏幕分辨率)来修改应用的样式。为此媒体查询提供了如下功能: -1. 针对设备和应用的属性信息,可以设计出相匹配的布局样式。 -2. 当屏幕发生动态改变时(比如分屏、横竖屏切换),应用页面布局同步更新。 -## CSS语法规则 +1. 针对设备和应用的属性信息,可以设计出相匹配的布局样式。 + +2. 当屏幕发生动态改变时(比如分屏、横竖屏切换),应用页面布局同步更新。 + + +## CSS语法规则 -使用@media来引入查询语句,具体规则如下: +使用\@media来引入查询语句,具体规则如下: ``` @media [media-type] [and|not|only] [(media-feature)] { @@ -20,17 +27,18 @@ 例子: -@media screen and \(round-screen: true\) \{ … \} // 当设备屏幕是圆形时条件成立 +\@media screen and (round-screen: true) { … } // 当设备屏幕是圆形时条件成立 -@media \(max-height: 800\) \{ … \} // 范围查询,CSS level 3 写法 +\@media (max-height: 800) { … } // 范围查询,CSS level 3 写法 -@media \(height <= 800\) \{ … \} // 范围查询,CSS level 4 写法,与CSS level3写法等价 +\@media (height <= 800) { … } // 范围查询,CSS level 4 写法,与CSS level3写法等价 -@media screen and \(device-type: tv\) or \(resolution < 2\) \{ … \} // 同时包含媒体类型和多个媒体特征的多条件复杂语句查询 +\@media screen and (device-type: tv) or (resolution < 2) { … } // 同时包含媒体类型和多个媒体特征的多条件复杂语句查询 -## 页面中引用资源 -通过@import方式引入媒体查询,具体使用方法如下: +## 页面中引用资源 + +通过\@import方式引入媒体查询,具体使用方法如下: ``` @import url [media-type] [and|not|only] [(media-feature)]; @@ -42,228 +50,70 @@ @import '../common/style.css' screen and (min-width: 600) and (max-width: 1200); ``` -## 媒体类型 - - - - - - - - -

类型

-

说明

-

screen

-

按屏幕相关参数进行媒体查询。

-
+## 媒体类型 + +| 类型 | 说明 | +| -------- | -------- | +| screen | 按屏幕相关参数进行媒体查询。 | -## 媒体逻辑操作 + +## 媒体逻辑操作 媒体逻辑操作符:and、or、not、only用于构成复杂媒体查询,也可以通过comma(,)将其组合起来,详细解释说明如下表。 -**表 1** 媒体逻辑操作符 - - - - - - - - - - - - - - - - - - - - - -

类型

-

说明

-

and

-

将多个媒体特征(Media Feature)以“与”的方式连接成一个媒体查询,只有当所有媒体特征都为true,查询条件成立。另外,它还可以将媒体类型和媒体功能结合起来。

-

例如:screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。

-

not

-

取反媒体查询结果,媒体查询结果不成立时返回true,否则返回false。在媒体查询列表中应用not,则not仅取反应用它的媒体查询。

-

例如:not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。

-
说明:

使用not运算符时必须指定媒体类型。

-
-

only

-

当整个表达式都匹配时,才会应用选择的样式,可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义,比如:

-

screen and (min-height: 50)

-

老版本浏览器会将这句话理解成screen,从而导致仅仅匹配到媒体类型(screen),就应用了指定样式,使用only可以很好地规避这种情况。

-
说明:

使用only时必须指定媒体类型。

-
-

,(comma)

-

将多个媒体特征以“或”的方式连接成一个媒体查询,如果存在结果为true的媒体特征,则查询条件成立。其效果等同于or运算符。

-

例如:screen and (min-height: 1000), (round-screen:true) 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时,条件成立。

-

or

-

将多个媒体特征以“或”的方式连接成一个媒体查询,如果存在结果为true的媒体特征,则查询条件成立。

-

例如:screen and (max-height: 1000) or (round-screen:true)表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时,条件成立。

-
- -在MediaQuery Level 4中引入了范围查询,使其能够使用max-,min-的同时,也支持了<=,\>=,<,\>操作符。 - -**表 2** 媒体逻辑范围操作符 - - - - - - - - - - - - - - - - - - -

类型

-

说明

-

<=

-

小于等于,例如:screen and (height <= 50)。

-

>=

-

大于等于,例如:screen and (height >= 600)。

-

<

-

小于,例如:screen and (height < 50)。

-

>

-

大于,例如:screen and (height > 600)。

-
- -## 媒体特征 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

类型

-

说明

-

height

-

应用页面显示区域的高度。

-

min-height

-

应用页面显示区域的最小高度。

-

max-height

-

应用页面显示区域的最大高度。

-

width

-

应用页面显示区域的宽度。

-

min-width

-

应用页面显示区域的最小宽度。

-

max-width

-

应用页面显示区域的最大宽度。

-

resolution

-

设备的分辨率,支持dpi,dppx和dpcm单位。其中:

-
  • dpi表示每英寸中物理像素个数,1dpi≈0.39dpcm;
  • dpcm表示每厘米上的物理像素个数,1dpcm ≈ 2.54dpi;
  • dppx表示每个px中的物理像素数(此单位按96px=1英寸为基准,与页面中的px单位计算方式不同),1dppx = 96dpi。
-

min-resolution

-

设备的最小分辨率。

-

max-resolution

-

设备的最大分辨率。

-

orientation

-

屏幕的方向。

-

可选值:

-
  • orientation: portrait(设备竖屏)
  • orientation: landscape(设备横屏)
-

aspect-ratio

-

应用页面显示区域的宽度与高度的比值。

-

例如:aspect-ratio:1/2

-

min-aspect-ratio

-

应用页面显示区域的宽度与高度的最小比值。

-

max-aspect-ratio

-

应用页面显示区域的宽度与高度的最大比值。

-

device-height

-

设备的高度。

-

min-device-height

-

设备的最小高度。

-

max-device-height

-

设备的最大高度。

-

device-width

-

设备的宽度。

-

min-device-width

-

设备的最小宽度。

-

max-device-width

-

设备的最大宽度。

-

round-screen

-

屏幕类型,圆形屏幕为true, 非圆形屏幕为 false。

-

dark-mode6+

-

系统为深色模式时为true,否则为false。

-
- -## 示例代码 - -- 通用媒体特征示例代码: +**表1** 媒体逻辑操作符 + +| 类型 | 说明 | +| -------- | -------- | +| and | 将多个媒体特征(Media Feature)以“与”的方式连接成一个媒体查询,只有当所有媒体特征都为true,查询条件成立。另外,它还可以将媒体类型和媒体功能结合起来。
例如:screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 | +| not | 取反媒体查询结果,媒体查询结果不成立时返回true,否则返回false。在媒体查询列表中应用not,则not仅取反应用它的媒体查询。
例如:not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用not运算符时必须指定媒体类型。 | +| only | 当整个表达式都匹配时,才会应用选择的样式,可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义,比如:
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen,从而导致仅仅匹配到媒体类型(screen),就应用了指定样式,使用only可以很好地规避这种情况。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用only时必须指定媒体类型。 | +| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询,如果存在结果为true的媒体特征,则查询条件成立。其效果等同于or运算符。
例如:screen and (min-height: 1000),  (round-screen:true) 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时,条件成立。 | +| or | 将多个媒体特征以“或”的方式连接成一个媒体查询,如果存在结果为true的媒体特征,则查询条件成立。
例如:screen and (max-height: 1000) or  (round-screen:true)表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时,条件成立。 | + +在MediaQuery Level 4中引入了范围查询,使其能够使用max-,min-的同时,也支持了<=,>=,<,>操作符。 + +**表2** 媒体逻辑范围操作符 + +| 类型 | 说明 | +| -------- | -------- | +| <= | 小于等于,例如:screen and (height <= 50)。 | +| >= | 大于等于,例如:screen and (height >= 600)。 | +| < | 小于,例如:screen and (height < 50)。 | +| > | 大于,例如:screen and (height > 600)。 | + + +## 媒体特征 + +| 类型 | 说明 | +| -------- | -------- | +| height | 应用页面显示区域的高度。 | +| min-height | 应用页面显示区域的最小高度。 | +| max-height | 应用页面显示区域的最大高度。 | +| width | 应用页面显示区域的宽度。 | +| min-width | 应用页面显示区域的最小宽度。 | +| max-width | 应用页面显示区域的最大宽度。 | +| resolution | 设备的分辨率,支持dpi,dppx和dpcm单位。其中:
- dpi表示每英寸中物理像素个数,1dpi≈0.39dpcm;
- dpcm表示每厘米上的物理像素个数,1dpcm ≈ 2.54dpi;
- dppx表示每个px中的物理像素数(此单位按96px=1英寸为基准,与页面中的px单位计算方式不同),1dppx = 96dpi。 | +| min-resolution | 设备的最小分辨率。 | +| max-resolution | 设备的最大分辨率。 | +| orientation | 屏幕的方向。
可选值:
- orientation: portrait(设备竖屏)
- orientation: landscape(设备横屏) | +| aspect-ratio | 应用页面显示区域的宽度与高度的比值。
例如:aspect-ratio:1/2 | +| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 | +| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 | +| device-height | 设备的高度。 | +| min-device-height | 设备的最小高度。 | +| max-device-height | 设备的最大高度。 | +| device-width | 设备的宽度。 | +| min-device-width | 设备的最小宽度。 | +| max-device-width | 设备的最大宽度。 | +| round-screen | 屏幕类型,圆形屏幕为true, 非圆形屏幕为 false。 | +| dark-mode6+ | 系统为深色模式时为true,否则为false。 | + + +## 示例代码 + +- 通用媒体特征示例代码: ``` @@ -296,4 +146,3 @@ } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md index 67a47db644489562f6f50e3aaab6b56425a29121..4450c65ca2ee789d92d7a13857fb160cca019ce2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md @@ -1,679 +1,255 @@ -# 通用方法 +# 通用方法 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 当组件通过id属性标识后,可以使用该id获取组件对象并调用相关组件方法。 -## animate - -animate\( keyframes: Keyframes, options: Options\):void - -- 参数 - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

keyframes

-

keyframes

-

-

设置动画样式

-

options

-

Options

-

-

用于设置动画属性的对象列表。options请见Options说明

-
- - **表 1** keyframes - - - - - - - - - - - - -

属性

-

类型

-

说明

-

frames

-

Array<Style>

-

用于设置动画样式的对象列表。Style类型说明请见Style类型说明

-
- - **表 2** Style类型说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

默认值

-

说明

-

width

-

number

-

-

-

动画执行过程中设置到组件上的宽度值。

-

height

-

number

-

-

-

动画执行过程中设置到组件上的高度值。

-

backgroundColor

-

<color>

-

none

-

动画执行过程中设置到组件上的背景颜色。

-

opacity

-

number

-

1

-

设置到组件上的透明度(介于0到1之间)。

-

backgroundPosition

-

string

-

-

-

格式为"x y",单位为百分号或者px。

-

第一个值是水平位置,第二个值是垂直位置。

-

如果仅规定了一个值,另一个值为 50%。

-

transformOrigin

-

string

-

'center center'

-

变换对象的中心点。

-

第一个参数表示x轴的值,可以设置为left、center、right、长度值或百分比值。

-

第二个参数表示y轴的值,可以设置为top、center、bottom、长度值或百分比值。

-

transform

-

Transform

-

-

-

设置到变换对象上的类型。

-

offset

-

number

-

-

-
  • offset值(如果提供)必须在0.0到1.0(含)之间,并以升序排列。
  • 若只有两帧,可以不填offset。
  • 若超过两帧,offset必填。
-
- - **表 3** Options说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

默认值

-

说明

-

duration

-

number

-

0

-

指定当前动画的运行时长(单位毫秒)。

-

easing

-

string

-

linear

-

描述动画的时间曲线,支持类型见easing有效值说明

-

delay

-

number

-

0

-

设置动画执行的延迟时间(默认值表示无延迟)。

-

iterations

-

number | string

-

1

-

设置动画执行的次数。number表示固定次数,Infinity枚举表示无限次数播放。

-

direction6+

-

string

-

normal

-

指定动画的播放模式:

-

normal: 动画正向循环播放;

-

reverse: 动画反向循环播放;

-

alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放;

-

alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。

-

fill

-

string

-

none

-

指定动画开始和结束的状态:

-

none:在动画执行之前和之后都不会应用任何样式到目标上。

-

forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。

-

backwards6+:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。

-

both6+:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。

-
- - **表 4** easing有效值说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

-

描述

-

linear

-

动画线性变化。

-

ease-in

-

动画速度先慢后快,cubic-bezier(0.42, 0.0, 1.0, 1.0)。

-

ease-out

-

动画速度先快后慢,cubic-bezier(0.0, 0.0, 0.58, 1.0)。

-

ease-in-out

-

动画先加速后减速,cubic-bezier(0.42, 0.0, 0.58, 1.0)。

-

friction

-

阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。

-

extreme-deceleration

-

急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。

-

sharp

-

锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。

-

rhythm

-

节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。

-

smooth

-

平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。

-

cubic-bezier(x1, y1, x2, y2)

-

在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。

-

steps(number, step-position)6+

-

Step曲线。

-

number必须设置,支持的类型为int。

-

step-position参数可选,支持设置start或end,默认值为end。

-
- -- 返回值 - - animation对象属性: - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

finished

-

boolean

-

只读,用于表示当前动画是否已播放完成。

-

pending

-

boolean

-

只读,用于表示当前动画是否处于等待其他异步操作完成的等待状态(例如启动一个延时播放的动画)。

-

playState

-

string

-

可读可写,动画的执行状态:

-
  • idle:未执行状态,包括已结束或未开始。
  • running:动画正在运行。
  • paused:动画暂停。
  • finished:动画播放完成。
-

startTime

-

number

-

可读可写,动画播放开始的预定时间,用途类似于options参数中的delay。

-
- - animation对象方法: - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数

-

说明

-

play

-

-

-

组件播放动画。

-

finish

-

-

-

组件完成动画。

-

pause

-

-

-

组件暂停动画。

-

cancel

-

-

-

组件取消动画。

-

reverse

-

-

-

组件倒播动画。

-
- - animation对象事件: - - - - - - - - - - - - - - - - - - -

事件

-

说明

-

start6+

-

动画开始事件。

-

cancel

-

动画被强制取消。

-

finish

-

动画播放完成。

-

repeat

-

动画重播事件。

-
- -- 示例 - - ``` - -
-
-
- - -
+ +## animate + +animate( keyframes: Keyframes, options: Options):void + +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | keyframes | keyframes | 是 | 设置动画样式 | + | options | Options | 是 | 用于设置动画属性的对象列表。options请见表3 Options说明。 | + + **表1** keyframes + + | 属性 | 类型 | 说明 | + | -------- | -------- | -------- | + | frames | Array<Style> | 用于设置动画样式的对象列表。Style类型说明请见表2 Style类型说明。 | + + **表2** Style类型说明 + + | 参数 | 类型 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | + | width | number | - | 动画执行过程中设置到组件上的宽度值。 | + | height | number | - | 动画执行过程中设置到组件上的高度值。 | + | backgroundColor | <color> | none | 动画执行过程中设置到组件上的背景颜色。 | + | opacity | number | 1 | 设置到组件上的透明度(介于0到1之间)。 | + | backgroundPosition | string | - | 格式为"x y",单位为百分号或者px。
第一个值是水平位置,第二个值是垂直位置。
如果仅规定了一个值,另一个值为 50%。 | + | transformOrigin | string | 'center center' | 变换对象的中心点。
第一个参数表示x轴的值,可以设置为left、center、right、长度值或百分比值。
第二个参数表示y轴的值,可以设置为top、center、bottom、长度值或百分比值。 | + | transform | [Transform](../arkui-js/js-components-common-animation.md) | - | 设置到变换对象上的类型。 | + | offset | number | - | - offset值(如果提供)必须在0.0到1.0(含)之间,并以升序排列。
- 若只有两帧,可以不填offset。
- 若超过两帧,offset必填。 | + + **表3** Options说明 + + | 参数 | 类型 | 默认值 | 说明 | + | -------- | -------- | -------- | -------- | + | duration | number | 0 | 指定当前动画的运行时长(单位毫秒)。 | + | easing | string | linear | 描述动画的时间曲线,支持类型见表4 easing有效值说明。 | + | delay | number | 0 | 设置动画执行的延迟时间(默认值表示无延迟)。 | + | iterations | number \| string | 1 | 设置动画执行的次数。number表示固定次数,Infinity枚举表示无限次数播放。 | + | direction6+ | string | normal | 指定动画的播放模式:
normal: 动画正向循环播放;
reverse: 动画反向循环播放;
alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放;
alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。 | + | fill | string | none | 指定动画开始和结束的状态:
none:在动画执行之前和之后都不会应用任何样式到目标上。
forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。
backwards6+:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
both:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。 | + + **表4** easing有效值说明 + + | 值 | 描述 | + | -------- | -------- | + | linear | 动画线性变化。 | + | ease-in | 动画速度先慢后快,cubic-bezier(0.42, 0.0, 1.0, 1.0)。 | + | ease-out | 动画速度先快后慢,cubic-bezier(0.0, 0.0, 0.58, 1.0)。 | + | ease-in-out | 动画先加速后减速,cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | + | friction | 阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。 | + | extreme-deceleration | 急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | + | sharp | 锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | + | rhythm | 节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | + | smooth | 平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | + | cubic-bezier(x1, y1, x2, y2) | 在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。 | + | steps(number, step-position)6+ | Step曲线。
number必须设置,支持的类型为int。
step-position参数可选,支持设置start或end,默认值为end。 | + +- 返回值 + animation对象属性: + + | 属性 | 类型 | 说明 | + | -------- | -------- | -------- | + | finished | boolean | 只读,用于表示当前动画是否已播放完成。 | + | pending | boolean | 只读,用于表示当前动画是否处于等待其他异步操作完成的等待状态(例如启动一个延时播放的动画)。 | + | playState | string | 可读可写,动画的执行状态:
- idle:未执行状态,包括已结束或未开始。
- running:动画正在运行。
- paused:动画暂停。
- finished:动画播放完成。 | + | startTime | number | 可读可写,动画播放开始的预定时间,用途类似于options参数中的delay。 | + + animation对象方法: + + | 方法 | 参数 | 说明 | + | -------- | -------- | -------- | + | play | - | 组件播放动画。 | + | finish | - | 组件完成动画。 | + | pause | - | 组件暂停动画。 | + | cancel | - | 组件取消动画。 | + | reverse | - | 组件倒播动画。 | + + animation对象事件: + + | 事件 | 说明 | + | -------- | -------- | + | start6+ | 动画开始事件。 | + | cancel | 动画被强制取消。 | + | finish | 动画播放完成。 | + | repeat | 动画重播事件。 | + +- 示例 + ``` + +
+
+
+ +
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - } - .box{ - width: 200px; - height: 200px; - background-color: #ff0000; - margin-top: 30px; - } - .buttonBox{ - margin-top: 30px; - width: 250px; - justify-content: space-between; - } - button{ - background-color: #8e8b89; - color: white; - width: 100px; - height: 40px; - font-size: 24px; +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } + .box{ + width: 200px; + height: 200px; + background-color: #ff0000; + margin-top: 30px; + } + .buttonBox{ + margin-top: 30px; + width: 250px; + justify-content: space-between; + } + button{ + background-color: #8e8b89; + color: white; + width: 100px; + height: 40px; + font-size: 24px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default{ + data:{ + animation:'', + }, + onInit(){ + }, + onShow(){ + var options = { + duration: 1500, + easing: 'friction', + delay: 500, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, + {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} + ]; + this.animation = this.$element('idName').animate(frames, options); + // handle finish event + this.animation.onfinish = function(){ + prompt.showToast({ + message: "The animation is finished." + }); + }; + // handle cancel event + this.animation.oncancel = function(){ + prompt.showToast({ + message: "The animation is canceled." + }); + }; + // handle repeat event + this.animation.onrepeat = function(){ + prompt.showToast({ + message: "The animation is repeated." + }); + }; + }, + start(){ + this.animation.play(); + }, + cancel(){ + this.animation.cancel(); } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt'; - export default{ - data:{ - animation:'', - }, - onInit(){ - }, - onShow(){ - var options = { - duration: 1500, - easing: 'friction', - delay: 500, - fill: 'forwards', - iterations: 2, - direction: 'normal', - }; - var frames = [ - {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, - {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} - ]; - this.animation = this.$element('idName').animate(frames, options); - // handle finish event - this.animation.onfinish = function(){ - prompt.showToast({ - message: "The animation is finished." - }); - }; - // handle cancel event - this.animation.oncancel = function(){ - prompt.showToast({ - message: "The animation is canceled." - }); - }; - // handle repeat event - this.animation.onrepeat = function(){ - prompt.showToast({ - message: "The animation is repeated." - }); - }; - }, - start(){ - this.animation.play(); - }, - cancel(){ - this.animation.cancel(); - } - } - ``` + } + ``` - ![](figures/AnimationAPI裁剪.gif) + ![zh-cn_image_0000001229677045](figures/zh-cn_image_0000001229677045.gif) -## getBoundingClientRect +## getBoundingClientRect -getBoundingClientRect\(\): [ ](#table1650917111414) +getBoundingClientRect(): \ 获取元素的大小及其相对于窗口的位置。 -- 返回值 - - **表 5** Rect对象说明6+ - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

该元素的宽度。

-

height

-

number

-

该元素的高度。

-

left

-

number

-

该元素左边界距离窗口的偏移。

-

top

-

number

-

该元素上边界距离窗口的偏移。

-
- -- 示例 - - ``` - // xxx.js - var rect = this.$element('id').getBoundingClientRect(); - console.info(`current element position is ${rect.left}, ${rect.top}`); - ``` - - -## createIntersectionObserver - -createIntersectionObserver\(param?:ObserverParam\): Observer) +- 返回值 + + **表5** Rect对象说明6+ + + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | width | number | 该元素的宽度。 | + | height | number | 该元素的高度。 | + | left | number | 该元素左边界距离窗口的偏移。 | + | top | number | 该元素上边界距离窗口的偏移。 | + +- 示例 + ``` + // xxx.js + var rect = this.$element('id').getBoundingClientRect(); + console.info(`current element position is ${rect.left}, ${rect.top}`); + ``` -监听元素在当前页面的可见范围。 -- 参数 - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

param

-

ObserverParam

-

-

-

获取observer的回调。

-
- - **表 6** ObserverParam对象说明6+ - - - - - - - - - - - - -

属性

-

类型

-

描述

-

ratios

-

Array<number>

-

组件超出或小于范围时触发observer的回调。

-
- -- 返回值 - - **表 7** Observer对象支持的方法6+ - - - - - - - - - - - - - - - - -

方法

-

参数

-

描述

-

observe

-

callback: function

-

开启observer的订阅方法。超出或小于阈值时触发callback。

-

unobserve

-

-

-

取消observer的订阅方法。

-
- -- 示例 - - ``` - // xxx.js - let observer = this.$element('broad').createIntersectionObserver({ - ratios: [0.2, 0.5], // number - }); - - observer.observe((isVisible, ratio)=> { - console.info('this element is ' + isVisible + 'ratio is ' + ratio) - }) - - observer.unobserve() - ``` +## createIntersectionObserver +createIntersectionObserver(param?: ObserverParam): Observer + +监听元素在当前页面的可见范围。 +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | param | ObserverParam | - | 获取observer的回调。 | + + **表6** ObserverParam对象说明6+ + + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | ratios | Array<number> | 组件超出或小于范围时触发observer的回调。 | + +- 返回值 + + **表7** Observer对象支持的方法6+ + + | 方法 | 参数 | 描述 | + | -------- | -------- | -------- | + | observe | callback: function | 开启observer的订阅方法。超出或小于阈值时触发callback。 | + | unobserve | - | 取消observer的订阅方法。 | + +- 示例 + ``` + // xxx.js + let observer = this.$element('broad').createIntersectionObserver({ + ratios: [0.2, 0.5], // number + }); + + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + }) + + observer.unobserve() + ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md index 2cc5ed4fc8b0c660bb6caee345ab9a394b472837..395c073392a4752667b6f61f42752d6173a17f9b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md @@ -1,616 +1,70 @@ -# 通用样式 +# 通用样式 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 组件普遍支持的可以在style或css中设置组件外观样式。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

width

-

<length> | <percentage>

-

-

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

min-width5+

-

<length> | <percentage>6+

-

0

-

设置元素的最小宽度。

-

min-height5+

-

<length> | <percentage>6+

-

0

-

设置元素的最小高度。

-

max-width5+

-

<length> | <percentage>6+

-

-

-

设置元素的最大宽度。默认无限制。

-

max-height5+

-

<length> | <percentage>6+

-

-

-

设置元素的最大高度。默认无限制。

-

padding

-

<length> | <percentage>5+

-

0

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值:
  • 指定一个值时,该值指定四个边的内边距。

    -
  • 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。

    -
  • 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。

    -
  • 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

使用简写属性设置所有的外边距属性,该属性可以有1到4个值。

-
  • 只有一个值时,这个值会被指定给全部的四个边。

    -
  • 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。

    -
  • 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。

    -
  • 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。

-

border-style

-

string

-

solid

-

使用简写属性设置所有边框的样式,可选值为:

-
  • dotted:显示为一系列圆点,圆点半径为border-width的一半。
  • dashed:显示为一系列短的方形虚线。
-
  • solid:显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。

-

border-width

-

<length>

-

0

-

使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,border-[left|top|right|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。

-
说明:

顺序为左下、右下、左上和右上。

-
-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

分别设置左上,右上,右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

仅支持设置渐变样式,与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

设置背景颜色。

-

background-image

-

string

-

-

-

设置背景图片。与background-color、background不兼容,支持本地图片资源地址。

-

示例:

-
  • background-image: url("/common/background.png")
    说明:

    不支持svg格式图片。

    -
    -
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

设置背景图片的大小。

-
  • string可选值:
    • contain:把图片扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
    • cover:把背景图片扩展至足够大,以使背景图片完全覆盖背景区域;背景图片的某些部分也许无法显示在背景定位区域中。
    • auto:保持原图的比例不变。
    -
  • length值参数方式:

    设置背景图片的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式:

    以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

针对重复背景图片样式进行设置,背景图片默认在水平和垂直方向上重复。

-
  • repeat:在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x:只在水平轴上重复绘制图片。
  • repeat-y:只在竖直轴上重复绘制图片。
  • no-repeat:不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-
  • 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left:水平方向上最左侧。
    • right:水平方向上最右侧。
    • top:竖直方向上最顶部。
    • bottom:竖直方向上最底部。
    • center:水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。
  • 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
  • 可以混合使用<percentage>和<length>。
-

box-shadow5+

-

string

-

0

-

语法:box-shadow: h-shadow v-shadow blur spread color

-

通过这个样式可以设置当前组件的阴影样式,包括水平位置(必填)、垂直位置(必填)、模糊半径(可选,默认值为0)、阴影延展距离(可选,默认值为0)、阴影颜色(可选,默认值为黑色)。

-

示例:

-
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
-

filter5+

-

string

-

-

-

语法:filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的内容模糊,参数用于指定模糊半径,如果没有设置值,则默认是0(不模糊),不支持百分比。

-

示例:

-
  • filter: blur(10px)
-

backdrop-filter5+

-

string

-

-

-

语法:backdrop-filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的背景模糊,参数用于指定模糊半径,如果没有设置值,则默认是0(不模糊),不支持百分比。

-

示例:

-
  • backdrop-filter: blur(10px)
-

opacity

-

number

-

1

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。

-

display

-

string

-

-

flex

-

确定一个元素所产生的框的类型,可选值为:

-
  • flex:弹性布局。
  • none:不渲染此元素。
-

visibility

-

string

-

-

visible

-

是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:

-
  • visible:元素正常显示。
  • hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
-
说明:

visibility和display样式都设置时,仅display生效。

-
-

flex

-

number | string

-

-

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个、2个5+或3个5+值。

-

单值语法:

-
  • 一个无单位数:用来设置组件的flex-grow。
  • 一个有效的宽度值5+:用来设置组件的flex-basis。
-

双值语法5+

-

第一个值必须是无单位数,用来设置组件的flex-grow。第二个值是以下之一:

-
  • 一个无单位数:用来设置组件的flex-shrink。
  • 一个有效的宽度值:用来设置组件的flex-basis。
-

三值语法5+

-

第一个值必须是无单位数,用来设置组件的flex-grow;第二个值必须是无单位数,用来设置组件的flex-shrink;第三个值必须是一个有效的宽度值,用来设置组件的flex-basis。

-
说明:

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。

-
说明:

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

设置组件的收缩样式,元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。

-
说明:

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

设置组件在主轴方向上的初始大小。

-
说明:

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

align-self6+

-

string

-

-

-

设置自身在父元素交叉轴上的对齐方式,该样式会覆盖父元素的align-items样式,仅在父容器为div、list。可选值为:

-
  • stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start 元素向交叉轴起点对齐。
  • flex-end 元素向交叉轴终点对齐。
  • center 元素在交叉轴居中。
  • baseline 元素在交叉轴基线对齐。
-

position

-

string

-

relative

-

设置元素的定位类型,不支持动态变更。

-
  • fixed:相对与整个界面进行定位。
  • absolute:相对于父元素进行定位。
  • relative:相对于其正常位置进行定位。
-
说明:

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length> | <percentage>6+

-

-

-

left|top|right|bottom需要配合position样式使用,来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-

[start | end]6+

-

<length> | <percentage>

-

-

-

start | end需要配合position样式使用,来确定元素的偏移位置。

-
  • start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
  • end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。
-

z-index6+

-

number

-

-

-

表示对于同一父节点其子节点的渲染顺序。数值越大,渲染数据越靠后。

-
说明:

z-index不支持auto,并且opacity等其他样式不会影响z-index的渲染顺序。

-
-

image-fill6+

-

<color>

-

-

-

为svg图片填充颜色,支持组件范围(与设置图片资源的属性):button(icon属性)、piece(icon属性)、search(icon属性)、input(headericon属性)、textarea(headericon属性)、image(src属性)、toolbar-item(icon属性)。

-

svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值,且仅对svg图片内显示声明的fill属性生效。

-

clip-path6+

-

[ <geometry-box> || <basic-shape> ] | none

-

-

-

设置组件的裁剪区域。区域内的部分显示,区域外的不显示。

-

<geometry-box>:表示裁剪区域的作用范围,默认为border-box。可选值为:

-
  • margin-box:margin计算入长宽尺寸内。
  • border-box:border计算入长宽尺寸内。
  • padding-box:padding计算入长宽尺寸内。
  • content-box:margin/border/padding不计算入长宽尺寸内。
-

<basic-shape>:表示裁剪的形状。包含以下类型:

-
  • inset,格式为:inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
  • circle,格式为:circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
  • ellipse,格式为:ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
  • polygon,格式为:polygon( [ <percentage> <percentage> ]# )
  • path,格式为:path( <string> )。
-

mask-image6+

-
  • <linear-gradient>
  • string
-

-

-

设置渐变色遮罩或本地图片设置。

-

设置渐变色遮罩,示例:

-

linear-gradient(to left, black, white)

-

设置纯色遮罩,示例:

-

linear-gradient(to right, grey , grey)

-

设置本地svg图片为遮罩,示例:url(common/mask.svg)

-

mask-size6+

-
  • string
  • <length><length>
  • <percentage> <percentage>
-

auto

-

设置遮罩图片显示大小,仅当mask-image为图片资源时有效。

-

string可选值:

-
  • contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
  • cover:把图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
  • auto:保持原图的比例不变。
-

length值参数方式:设置图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

-

百分比参数方式:以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

-

mask-position6+

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

设置遮罩图片显示位置,仅当mask-image为图片资源时有效。关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。

-

string可选值:

-
  • left:水平方向上最左侧。
  • right:水平方向上最右侧。
  • top:竖直方向上最顶部。
  • bottom:竖直方向上最底部。
  • center:水平方向或竖直方向上中间位置。
-

length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。

-

百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。

-

可以混合使用<percentage>和<length>。

-

border-image-source7+

-

string

-

-

-

指定元素的边框图片。

-

示例:

-

border-image-source: url("/common/images/border.png")

-

border-image-slice7+

-

<length> | <percentage>

-

0

-

指定图片的边界内向偏移。

-

该属性可以有1到4个值:

-

指定一个值时,该值指定四个边的内偏移。

-

指定两个值时,第一个值指定上下两边的内偏移,第二个指定左右两边的内偏移。

-

指定三个值时,第一个指定上边的内偏移,第二个指定左右两边的内偏移,第三个指定下边的内偏移。

-

指定四个值时分别为上、右、下、左边的内偏移(顺时针顺序)。

-

border-image-width7+

-

<length> | <percentage>

-

0

-

指定图片边界的宽度。

-

指定一个值时,该值指定四个边的宽度。

-

指定两个值时,第一个值指定上下两边的宽度 ,第二个指定左右两边的宽度。

-

指定三个值时,第一个指定上边的宽度 ,第二个指定左右两边的宽度 ,第三个指定下边的宽度。

-

指定四个值时分别为上、右、下、左边的宽度 (顺时针顺序)。

-

border-image-outset7+

-

<length> | <percentage>

-

0

-

指定边框图像可超出边框的大小。

-

指定一个值时,边框图像在四个方向超出边框的距离。

-

指定两个值时,第一个值指定上下两边的边框图像超出边框的距离,第二个指定左右两边的 。

-

指定三个值时,第一个指定上边的边框图像超出边框的距离 ,第二个指定左右两边的边框图像超出边框的距离 ,第三个指定下边的边框图像超出边框的距离 。

-

指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 (顺时针顺序)。

-

border-image-repeat7+

-

string

-

stretch

-

定义图片如何填充边框。

-

stretch: 拉伸图片以填充边框。

-

repeat:平铺图片以填充边框。

-

round:平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。

-

border-image7+

-

string

-

-

-

简写属性,可以选择以下两种设置方式:

- -
  • 渐变色边框

    示例:

    -

    border-image: linear-gradient(red, yellow) 10px

    -
-
->![](../../public_sys-resources/icon-note.gif) **说明:** ->通用样式都不是必填项。 +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| width | <length> \| <percentage> | - | 设置组件自身的宽度。
缺省时使用元素自身内容需要的宽度。
| +| height | <length> \| <percentage> | - | 设置组件自身的高度。
缺省时使用元素自身内容需要的高度。
| +| min-width5+ | <length> \| <percentage>6+ | 0 | 设置元素的最小宽度。 | +| min-height5+ | <length> \| <percentage>6+ | 0 | 设置元素的最小高度。 | +| max-width5+ | <length> \| <percentage>6+ | - | 设置元素的最大宽度。默认无限制。 | +| max-height5+ | <length> \| <percentage>6+ | - | 设置元素的最大高度。默认无限制。 | +| padding | <length> \| <percentage>5+ | 0 | 使用简写属性设置所有的内边距属性。
该属性可以有1到4个值:
- 指定一个值时,该值指定四个边的内边距。
- 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。
- 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。 | +| padding-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 设置左、上、右、下内边距属性。 | +| padding-[start\|end] | <length> \| <percentage>5+ | 0 | 设置起始和末端内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
- 只有一个值时,这个值会被指定给全部的四个边。
- 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。
- 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。
- 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 设置左、上、右、下外边距属性。 | +| margin-[start\|end] | <length> \| <percentage>5+ | 0 | 设置起始和末端外边距属性。 | +| border | - | 0 | 使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。 | +| border-style | string | solid | 使用简写属性设置所有边框的样式,可选值为:
- dotted:显示为一系列圆点,圆点半径为border-width的一半。
- dashed:显示为一系列短的方形虚线。
- solid:显示为一条实线。 | +| border-[left\|top\|right\|bottom]-style | string | solid | 分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。 | +| border-[left\|top\|right\|bottom] | - | - | 使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。 | +| border-width | <length> | 0 | 使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度。 | +| border-[left\|top\|right\|bottom]-width | <length> | 0 | 分别设置左、上、右、下四个边框的宽度。 | +| border-color | <color> | black | 使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色。 | +| border-[left\|top\|right\|bottom]-color | <color> | black | 分别设置左、上、右、下四个边框的颜色。 | +| border-radius | <length> | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width,border-[left\|top\|right\|bottom]-color ,border-[left\|top\|right\|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 顺序为左下、右下、左上和右上。 | +| border-[top\|bottom]-[left\|right]-radius | <length> | - | 分别设置左上,右上,右下和左下四个角的圆角半径。 | +| background | <linear-gradient> | - | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md),与background-color、background-image不兼容。 | +| background-color | <color> | - | 设置背景颜色。 | +| background-image | string | - | 设置背景图片。与background-color、background不兼容,支持网络图片资源和本地图片资源地址。
示例:
- background-image: url("/common/background.png")
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > 不支持svg格式图片。 | +| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | 设置背景图片的大小。
- string可选值:
  - contain:把图片扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
  - cover:把背景图片扩展至足够大,以使背景图片完全覆盖背景区域;背景图片的某些部分也许无法显示在背景定位区域中。
  - auto:保持原图的比例不变。
- length值参数方式:
  设置背景图片的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
- 百分比参数方式:
  以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 | +| background-repeat | string | repeat | 针对重复背景图片样式进行设置,背景图片默认在水平和垂直方向上重复。
- repeat:在水平轴和竖直轴上同时重复绘制图片。
- repeat-x:只在水平轴上重复绘制图片。
- repeat-y:只在竖直轴上重复绘制图片。
- no-repeat:不会重复绘制图片。 | +| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | - 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
  - left:水平方向上最左侧。
  - right:水平方向上最右侧。
  - top:竖直方向上最顶部。
  - bottom:竖直方向上最底部。
  - center:水平方向或竖直方向上中间位置。
- length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)  。如果仅规定了一个值,另外一个值将是50%。
- 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
- 可以混合使用<percentage>和<length>。 | +| box-shadow5+ | string | 0 | 语法:box-shadow: h-shadow v-shadow blur spread color
通过这个样式可以设置当前组件的阴影样式,包括水平位置(必填)、垂直位置(必填)、模糊半径(可选,默认值为0)、阴影延展距离(可选,默认值为0)、阴影颜色(可选,默认值为黑色)。
示例:
- box-shadow :10px 20px 5px 10px \#888888
- box-shadow :100px 100px 30px red
- box-shadow :-100px -100px 0px 40px | +| filter5+ | string | - | 语法:filter: blur(px)
通过这个样式可以设置当前组件布局范围的内容模糊,参数用于指定模糊半径,如果没有设置值,则默认是0(不模糊),不支持百分比。
示例:
- filter: blur(10px) | +| backdrop-filter5+ | string | - | 语法:backdrop-filter: blur(px)
通过这个样式可以设置当前组件布局范围的背景模糊,参数用于指定模糊半径,如果没有设置值,则默认是0(不模糊),不支持百分比。
示例:
- backdrop-filter: blur(10px) | +| window-filter5+ | string | - | 语法:window-filter: blur(percent), style5+
通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式,如果没有设置值,则默认是0%(不模糊),多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值:small_light(默认值), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark。
示例:
- window-filter: blur(50%)
- window-filter: blur(10%), large_light
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅手机和平板设备支持。 | +| opacity | number | 1 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 | +| display | string | flex | 确定一个元素所产生的框的类型,可选值为:
- flex:弹性布局。
- none:不渲染此元素。 | +| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:
- visible:元素正常显示。
- hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> visibility和display样式都设置时,仅display生效。 | +| flex | number \| string | - | 规定当前组件如何适应父组件中的可用空间。
flex可以指定1个、2个5+或3个5+值。
单值语法:
- 一个无单位数:用来设置组件的flex-grow。
- 一个有效的宽度值5+:用来设置组件的flex-basis。
双值语法5+
第一个值必须是无单位数,用来设置组件的flex-grow。第二个值是以下之一:
- 一个无单位数:用来设置组件的flex-shrink。
- 一个有效的宽度值:用来设置组件的flex-basis。
三值语法5+
第一个值必须是无单位数,用来设置组件的flex-grow;第二个值必须是无单位数,用来设置组件的flex-shrink;第三个值必须是一个有效的宽度值,用来设置组件的flex-basis。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。 | +| flex-grow | number | 0 | 设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。 | +| flex-shrink | number | 1 | 设置组件的收缩样式,元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。 | +| flex-basis | <length> | - | 设置组件在主轴方向上的初始大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。 | +| align-self6+ | string | - | 设置自身在父元素交叉轴上的对齐方式,该样式会覆盖父元素的align-items样式,仅在父容器为div、list。可选值为:
- stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start 元素向交叉轴起点对齐。
- flex-end 元素向交叉轴终点对齐。
- center 元素在交叉轴居中。
- baseline 元素在交叉轴基线对齐。 | +| position | string | relative | 设置元素的定位类型,不支持动态变更。
- fixed:相对与整个界面进行定位。
- absolute:相对于父元素进行定位。
- relative:相对于其正常位置进行定位。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> absolute属性仅在父容器为<div>、<stack>时生效。 | +| [left\|top\|right\|bottom] | <length> \| <percentage>6+ | - | left\|top\|right\|bottom需要配合position样式使用,来确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。 | +| [start \| end]6+ | <length> \| <percentage> | - | start \| end需要配合position样式使用,来确定元素的偏移位置。
- start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
- end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 | +| z-index6+ | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大,渲染数据越靠后。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> z-index不支持auto,并且opacity等其他样式不会影响z-index的渲染顺序。 | +| image-fill6+ | <color> | - | 为svg图片填充颜色,支持组件范围(与设置图片资源的属性):button(icon属性)、piece(icon属性)、search(icon属性)、input(headericon属性)、textarea(headericon属性)、image(src属性)、toolbar-item(icon属性)。
svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值,且仅对svg图片内显示声明的fill属性生效。 | +| clip-path6+ | [ <geometry-box> \|\| <basic-shape> ] \| none | - | 设置组件的裁剪区域。区域内的部分显示,区域外的不显示。
<geometry-box>:表示裁剪区域的作用范围,默认为border-box。可选值为:
- margin-box:margin计算入长宽尺寸内。
- border-box:border计算入长宽尺寸内。
- padding-box:padding计算入长宽尺寸内。
- content-box:margin/border/padding不计算入长宽尺寸内。
<basic-shape>:表示裁剪的形状。包含以下类型:
- inset,格式为:inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
- circle,格式为:circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
- ellipse,格式为:ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
- polygon,格式为:polygon( [ <percentage> <percentage> ]\# )
- path,格式为:path( <string> )。 | +| mask-image6+ | - <linear-gradient>
- string | - | 设置渐变色遮罩或本地图片设置。
设置渐变色遮罩,示例:
linear-gradient(to left, black, white)
设置纯色遮罩,示例:
linear-gradient(to right, grey , grey)
设置本地svg图片为遮罩,示例:url(common/mask.svg) | +| mask-size6+ | - string
- <length><length>
- <percentage> <percentage> | auto | 设置遮罩图片显示大小,仅当mask-image为图片资源时有效。
string可选值:
- contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
- cover:把图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
- auto:保持原图的比例不变。
length值参数方式:设置图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
百分比参数方式:以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 | +| mask-position6+ | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | 设置遮罩图片显示位置,仅当mask-image为图片资源时有效。关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
string可选值:
- left:水平方向上最左侧。
- right:水平方向上最右侧。
- top:竖直方向上最顶部。
- bottom:竖直方向上最底部。
- center:水平方向或竖直方向上中间位置。
length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)  。如果仅规定了一个值,另外一个值将是50%。
百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
可以混合使用<percentage>和<length>。 | +| border-image-source7+ | string | - | 指定元素的边框图片。
示例:
border-image-source: url("/common/images/border.png") | +| border-image-slice7+ | <length> \| <percentage> | 0 | 指定图片的边界内向偏移。
该属性可以有1到4个值:
指定一个值时,该值指定四个边的内偏移。
指定两个值时,第一个值指定上下两边的内偏移,第二个指定左右两边的内偏移。
指定三个值时,第一个指定上边的内偏移,第二个指定左右两边的内偏移,第三个指定下边的内偏移。
指定四个值时分别为上、右、下、左边的内偏移(顺时针顺序)。 | +| border-image-width7+ | <length> \| <percentage> | 0 | 指定图片边界的宽度。
指定一个值时,该值指定四个边的宽度。
指定两个值时,第一个值指定上下两边的宽度 ,第二个指定左右两边的宽度。
指定三个值时,第一个指定上边的宽度 ,第二个指定左右两边的宽度 ,第三个指定下边的宽度。
指定四个值时分别为上、右、下、左边的宽度 (顺时针顺序)。 | +| border-image-outset7+ | <length> \| <percentage> | 0 | 指定边框图像可超出边框的大小。
指定一个值时,边框图像在四个方向超出边框的距离。
指定两个值时,第一个值指定上下两边的边框图像超出边框的距离,第二个指定左右两边的 。
指定三个值时,第一个指定上边的边框图像超出边框的距离 ,第二个指定左右两边的边框图像超出边框的距离 ,第三个指定下边的边框图像超出边框的距离 。
指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 (顺时针顺序)。 | +| border-image-repeat7+ | string | stretch | 定义图片如何填充边框。
stretch: 拉伸图片以填充边框。
repeat:平铺图片以填充边框。
round:平铺图像。当不能整数次平铺时,根据情况放大或缩小图像。
| +| border-image7+ | string | - | 简写属性,可以选择以下两种设置方式:
- 设置图片边框的每个属性。包含图像的边界向内偏移,图像边界的宽度,边框图像可超出边框盒的大小,图片如何填充边框,顺序设置为 border-image-source ,border-image-slice,border-image-width,border-image-outset,border-image-repeat,不设置的值为默认值。
- 渐变色边框
  示例:
  border-image: linear-gradient(red, yellow) 10px | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 通用样式都不是必填项。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md index d7582ada79c53a9f195112517f7559d58a2f1a77..15900d8ce4f02e1bb4d93b39c51a75e52efc6749 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md @@ -1,82 +1,35 @@ -# 转场样式 - -## 共享元素转场 - -### 属性 - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

shareid

-

string

-

-

进行共享元素转场时使用,若不配置,则转场样式不生效。共享元素转场当前支持的组件:list-item、image、text、button、label。

-
- -### 样式 - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

shared-transition-effect

-

string

-

exchange

-

配置共享元素转场时的入场样式。

-
  • exchange(默认值):源页面元素移动到目的页元素位置,并进行适当缩放。
  • static:目的页元素位置不变,用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。
-

shared-transition-name

-

string

-

-

-

转场时,目的页配置的样式优先生效。该样式用于配置共享元素的动画效果,一个由@keyframes定义的动画序列,支持transform和透明度动画。若共享元素效果与自定义的动画冲突,以自定义动画为准。

-

shared-transition-timing-function

-

string

-

friction

-

转场时,目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置,默认使用friction曲线。

-
- -### 注意事项 +# 转场样式 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +## 共享元素转场 + + +### 属性 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| shareid | string | 无 | 进行共享元素转场时使用,若不配置,则转场样式不生效。共享元素转场当前支持的组件:list-item、image、text、button、label。 | + + +### 样式 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| shared-transition-effect | string | exchange | 配置共享元素转场时的入场样式。
- exchange(默认值):源页面元素移动到目的页元素位置,并进行适当缩放。
- static:目的页元素位置不变,用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。 | +| shared-transition-name | string | - | 转场时,目的页配置的样式优先生效。该样式用于配置共享元素的动画效果,一个由@keyframes定义的动画序列,支持transform和透明度动画。若共享元素效果与自定义的动画冲突,以自定义动画为准。 | +| shared-transition-timing-function | string | friction | 转场时,目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置,默认使用friction曲线。 | + + +### 注意事项 1. 若同时配置了共享元素转场和自定义页面转场样式,页面转场效果以自定义效果为准。 2. 共享元素的exchange效果类似下图。 -**图 1** 共享元素转场默认效果 -![](figures/共享元素转场默认效果.png "共享元素转场默认效果") +**图1** 共享元素转场默认效果 +![zh-cn_image_0000001238424309](figures/zh-cn_image_0000001238424309.png) 3. 共享元素动画对元素的边框、背景色不生效。 @@ -84,7 +37,8 @@ 5. 动态修改shareid5+:组件A的shareid被组件B的shareid覆盖,则组件A的共享元素效果失效,即使组件B的shareid被修改,此时组件A的共享元素效果也不会恢复。 -### 示例 + +### 示例 PageA跳转到PageB,跳转的共享元素为image, shareid为“shareImage”。 @@ -92,14 +46,12 @@ PageA跳转到PageB,跳转的共享元素为image, shareid为“shareImage
- - -
- - Click on picture to Jump to ths details -
-
-
+ + + + Click on picture to Jump to ths details + +
``` @@ -157,39 +109,23 @@ export default { } ``` -## 卡片转场样式 - ->![](../../public_sys-resources/icon-note.gif) **说明:** ->卡片转场无法和其他转场\(包括共享元素转场和自定义转场\)共同使用。 - -### 样式 - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

transition-effect

-

string

-

-

-

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效,当前支持如下配置:

-
  • unfold:配置这个属性的组件,如在卡片的上方,则向上移动一个卡片的高度,如在卡片的下方,则向下移动一个卡片的高度。
  • none:转场过程中没有动效。
-
- -### 示例 - -source\_page包含顶部内容以及卡片列表,点击卡片可以跳转到target\_page。 + +## 卡片转场样式 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 卡片转场无法和其他转场(包括共享元素转场和自定义转场)共同使用。 + + +### 样式 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| transition-effect | string | - | 用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效,当前支持如下配置:
- unfold:配置这个属性的组件,如在卡片的上方,则向上移动一个卡片的高度,如在卡片的下方,则向下移动一个卡片的高度。
- none:转场过程中没有动效。 | + + +### 示例 + +source_page包含顶部内容以及卡片列表,点击卡片可以跳转到target_page。 ``` @@ -270,73 +206,32 @@ export default { } ``` -![](figures/卡片转场.gif) - -## 页面转场样式 - -### 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

transition-enter

-

string

-

-

-

与@keyframes配套使用,支持transform和透明度动画,详见表2

-

transition-exit

-

string

-

-

-

与@keyframes配套使用,支持transform和透明度动画,详见表2

-

transition-duration

-

string

-

跟随设备默认的页面转场时间

-

支持的单位为[s(秒)|ms(毫秒) ],默认单位为ms,未配置时使用系统默认值。

-

transition-timing-function

-

string

-

friction

-

描述转场动画执行的速度曲线,用于使转场更为平滑。详细参数见动画样式中“animation-timing-function”有效值说明。

-
- -### 注意事项 - -1. 配置自定义转场时,建议配置页面背景色为不透明颜色,否则在转场过程中可能会出现衔接不自然的现象。 -2. transition-enter和transition-exit可单独配置,没有配置时使用系统默认的参数。 -3. transition-enter/transition-exit说明如下: - 1. push场景下:进入页面栈的Page2.js应用transition-enter描述的动画配置;进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置。 - - ![](figures/zh-cn_image_0000001193704354.png) - - 2. back场景下:退出页面栈的Page2.js应用transition-enter描述的动画配置,并进行倒播;从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置,并进行倒播。 - - ![](figures/zh-cn_image_0000001238184345.png) +![zh-cn_image_0000001193544358](figures/zh-cn_image_0000001193544358.gif) + + +## 页面转场样式 + + +### 样式 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| transition-enter | string | - | 与@keyframes配套使用,支持transform和透明度动画,详见[动画样式 表 @keyframes属性说明](../arkui-js/js-components-common-animation.md)。 | +| transition-exit | string | - | 与\@keyframes配套使用,支持transform和透明度动画,详见[动画样式 表 @keyframes属性说明](../arkui-js/js-components-common-animation.md)。 | +| transition-duration | string | 跟随设备默认的页面转场时间 | 支持的单位为[s(秒)\|ms(毫秒) ],默认单位为ms,未配置时使用系统默认值。 | +| transition-timing-function | string | friction | 描述转场动画执行的速度曲线,用于使转场更为平滑。详细参数见[动画样式](../arkui-js/js-components-common-animation.md)中“animation-timing-function”有效值说明。 | + + +### 注意事项 + +1. 配置自定义转场时,建议配置页面背景色为不透明颜色,否则在转场过程中可能会出现衔接不自然的现象。 + +2. transition-enter和transition-exit可单独配置,没有配置时使用系统默认的参数。 +3. transition-enter/transition-exit说明如下: + a. push场景下:进入页面栈的Page2.js应用transition-enter描述的动画配置;进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置。 + ![zh-cn_image_0000001193704354](figures/zh-cn_image_0000001193704354.png) + b. back场景下:退出页面栈的Page2.js应用transition-enter描述的动画配置,并进行倒播;从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置,并进行倒播。 + ![zh-cn_image_0000001238184345](figures/zh-cn_image_0000001238184345.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common.md b/zh-cn/application-dev/reference/arkui-js/js-components-common.md index 44ae48f1a10f5c7d26c5295ffa70408a2a826448..549f6c67a66bd2a5fcef3df79b23b300dd3fe865 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common.md @@ -1,23 +1,23 @@ -# 通用 +# 通用 -- **[通用属性](js-components-common-attributes.md)** -- **[通用样式](js-components-common-styles.md)** -- **[通用事件](js-components-common-events.md)** +- **[通用属性](js-components-common-attributes.md)** -- **[通用方法](js-components-common-methods.md)** +- **[通用样式](js-components-common-styles.md)** -- **[动画样式](js-components-common-animation.md)** +- **[通用事件](js-components-common-events.md)** -- **[渐变样式](js-components-common-gradient.md)** +- **[通用方法](js-components-common-methods.md)** -- **[转场样式](js-components-common-transition.md)** +- **[动画样式](js-components-common-animation.md)** -- **[媒体查询](js-components-common-mediaquery.md)** +- **[渐变样式](js-components-common-gradient.md)** -- **[自定义字体样式](js-components-common-customizing-font.md)** +- **[转场样式](js-components-common-transition.md)** -- **[原子布局](js-components-common-atomic-layout.md)** +- **[媒体查询](js-components-common-mediaquery.md)** +- **[自定义字体样式](js-components-common-customizing-font.md)** +- **[原子布局](js-components-common-atomic-layout.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md index 0087e65fdafdcf31230dce9ae353877ef4399570..ae68f510ba661d06fb827f19eee5166bc1385eb2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md @@ -1,188 +1,66 @@ -# badge +# badge + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 应用中如果有需用户关注的新事件提醒,可以采用新事件标记来标识。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 支持单个子组件。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->仅支持单子组件节点,如果使用多子组件节点,默认使用第一个子组件节点。 - -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

placement

-

string

-

rightTop

-

-

事件提醒的数字标记或者圆点标记的位置,可选值为:

-
  • right:位于组件右边框。
  • rightTop:位于组件边框右上角。
  • left:位于组件左边框。
-

count

-

number

-

0

-

-

设置提醒的消息数,默认为0。当设置相应的提醒消息数大于0时,消息提醒会变成数字标记类型,未设置消息数或者消息数不大于0时,消息提醒将采用圆点标记。

-
说明:

当数字设置为大于maxcount时,将使用maxcount显示。

-

count属性最大支持整数值为2147483647。

-
-

visible

-

boolean

-

false

-

-

是否显示消息提醒,当收到新信息提醒时可以设置该属性为true,显示相应的消息提醒,如果需要使用数字标记类型,同时需要设置相应的count属性。

-

maxcount

-

number

-

99

-

-

最大消息数限制,当收到新信息提醒大于该限制时,标识数字会进行省略,仅显示maxcount+。

-
说明:

maxcount属性最大支持整数值为2147483647。

-
-

config

-

BadgeConfig

-

-

-

-

设置新事件标记相关配置属性。

-

label6+

-

string

-

-

-

-

设置新事件提醒的文本值。

-
说明:

使用该属性时,count和maxcount属性不生效。

-
-
- -**表 1** BadgeConfig - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

badgeColor

-

<color>

-

#fa2a2d

-

-

新事件标记背景色。

-

textColor

-

<color>

-

#ffffff

-

-

数字标记的数字文本颜色。

-

textSize

-

<length>

-

10px

-

-

数字标记的数字文本大小。

-

badgeSize

-

<length>

-

6px

-

-

圆点标记的默认大小

-
- -## 样式 - -支持[通用样式](js-components-common-styles.md)。 - ->![](../../public_sys-resources/icon-note.gif) **说明:** ->badge组件的子组件大小不能超过badge组件本身的大小,否则子组件不会绘制。 - -## 事件 - -支持[通用事件](js-components-common-events.md)。 - -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 仅支持单子组件节点,如果使用多子组件节点,默认使用第一个子组件节点。 + + +## 属性 + +除支持[通用属性](../reference/arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| placement | string | rightTop | 否 | 事件提醒的数字标记或者圆点标记的位置,可选值为:
- right:位于组件右边框。
- rightTop:位于组件边框右上角。
- left:位于组件左边框。 | +| count | number | 0 | 否 | 设置提醒的消息数,默认为0。当设置相应的提醒消息数大于0时,消息提醒会变成数字标记类型,未设置消息数或者消息数不大于0时,消息提醒将采用圆点标记。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 当数字设置为大于maxcount时,将使用maxcount显示。
> count属性最大支持整数值为2147483647。 | +| visible | boolean | false | 否 | 是否显示消息提醒,当收到新信息提醒时可以设置该属性为true,显示相应的消息提醒,如果需要使用数字标记类型,同时需要设置相应的count属性。 | +| maxcount | number | 99 | 否 | 最大消息数限制,当收到新信息提醒大于该限制时,标识数字会进行省略,仅显示maxcount+。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> maxcount属性最大支持整数值为2147483647。 | +| config | BadgeConfig | - | 否 | 设置新事件标记相关配置属性。 | +| label6+ | string | - | 否 | 设置新事件提醒的文本值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 使用该属性时,count和maxcount属性不生效。 | + +**表1** BadgeConfig + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| badgeColor | <color> | \#fa2a2d | 否 | 新事件标记背景色。 | +| textColor | <color> | \#ffffff | 否 | 数字标记的数字文本颜色。 | +| textSize | <length> | 10px | 否 | 数字标记的数字文本大小。 | +| badgeSize | <length> | 6px | 否 | 圆点标记的默认大小 | + + +## 样式 + +支持[通用样式](../arkui-js/js-components-common-styles.md)。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> badge组件的子组件大小不能超过badge组件本身的大小,否则子组件不会绘制。 + + +## 事件 + +支持[通用事件](../arkui-js/js-components-common-events.md)。 + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -229,5 +107,4 @@ export default { } ``` -![](figures/捕获.png) - +![zh-cn_image_0000001177265268](figures/zh-cn_image_0000001177265268.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md index 8a50995941162a98688c554f8b9340b764f3ba3d..3a5e23868d8e342c261f6e6ae1440ff2be1148db 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md @@ -1,121 +1,63 @@ -# dialog +# dialog + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 自定义弹窗容器。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持单个子组件。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

dragable7+

-

boolean

-

false

-

-

设置对话框是否支持拖拽。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 弹窗类组件不支持focusable、click-effect属性。 - -## 样式 - -仅支持[通用样式](js-components-common-styles.md)中的width、height、margin、margin-\[left|top|right|bottom\]、margin-\[start|end\]样式。 - -## 事件 - -不支持[通用事件](js-components-common-events.md),仅支持如下事件: - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

cancel

-

-

-

用户点击非dialog区域触发取消弹窗时触发的事件。

-

show7+

-

-

-

对话框弹出时触发该事件。

-

close7+

-

-

-

对话框关闭时触发该事件。

-
- -## 方法 - -不支持[通用方法](js-components-common-methods.md),仅支持如下方法。 - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

-

-

弹出对话框。

-

close

-

-

-

关闭对话框。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->dialog属性、样式均不支持动态更新。 - -## 示例 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| dragable7+ | boolean | false | 否 | 设置对话框是否支持拖拽。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 弹窗类组件不支持focusable、click-effect属性。 + + +## 样式 + +仅支持[通用样式](../arkui-js/js-components-common-styles.md)中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。 + + +## 事件 + +不支持[通用事件](../arkui-js/js-components-common-events.md),仅支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| cancel | - | 用户点击非dialog区域触发取消弹窗时触发的事件。 | +| show7+ | - | 对话框弹出时触发该事件。 | +| close7+ | - | 对话框关闭时触发该事件。 | + + +## 方法 + +不支持[通用方法](../arkui-js/js-components-common-methods.md),仅支持如下方法。 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| show | - | 弹出对话框。 | +| close | - | 关闭对话框。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> dialog属性、样式均不支持动态更新。 + + +## 示例 ``` @@ -218,5 +160,4 @@ export default { } ``` -![](figures/4.gif) - +![zh-cn_image_0000001167846062](figures/zh-cn_image_0000001167846062.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md index 254ac1cc82a7ae8f34c6bda9fd2dcc64c27be568..18aa7a8f97668cf23e4cddc2dda2ad3818053c38 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md @@ -1,702 +1,410 @@ -# div +# div + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 基础容器,用作页面结构的根节点或将内容进行分组。 -## 权限列表 +## 权限列表 无 -## 子组件 - -支持。 -## 属性 - -支持[通用属性](js-components-common-attributes.md)。 - -## 样式 - -除支持[组件通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-direction

-

string

-

row

-

-

flex容器主轴方向。可选项有:

-
  • column:垂直方向从上到下。
  • row:水平方向从左到右。
-

flex-wrap

-

string

-

nowrap

-

-

flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:

-
  • nowrap:不换行,单行显示。
  • wrap:换行,多行显示。
-

justify-content

-

string

-

flex-start

-

-

flex容器当前行的主轴对齐格式。可选项有:

-
  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素,每个元素之间的间隔相等。
-

align-items

-

string

-

stretch

-

-

flex容器当前行的交叉轴对齐格式,可选值为:

-
  • stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

-

交叉轴中有额外的空间时,多行内容对齐格式,可选值为:

-
  • flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-

display

-

string

-

flex

-

-

确定该元素视图框的类型,该值暂不支持动态修改。可选值为:

-
  • flex:弹性布局
  • grid:网格布局
  • none:不渲染此元素
-

grid-template-[columns|rows]

-

string

-

1行1列

-

-

用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。

-

示例:如设置grid-template-columns为:

-
  • 50px 100px 60px:分三列,第一列50px,第二列100px,第三列60px;
  • 1fr 1fr 2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;
  • 30% 20% 50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;
  • repeat(2,100px):分两列,第一列100px,第二列100px;
  • repeat(auto-fill,100px)5+:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;
  • auto 1fr 1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。
-

grid-[columns|rows]-gap

-

<length>

-

0

-

-

用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。

-

grid-row-[start|end]

-

number

-

-

-

-

用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。

-

grid-column-[start|end]

-

number

-

-

-

-

用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。

-

grid-auto-flow5+

-

string

-

-

-

-

使用框架自动布局算法进行网格的布局,可选值为:

-
  • row:逐行填充元素,如果行空间不够,则新增行;
  • column:逐列填充元素,如果列空间不够,则新增列。
-

overflow6+

-

string

-

visible

-

-

设置元素内容区超过元素本身大小时的表现形式。

-
  • visible:多个子元素内容超过元素大小时,显示在元素外面;
  • hidden:元素内容超过元素大小时,进行裁切显示;
  • scroll:元素内容超过元素大小时,进行滚动显示并展示滚动条(当前只支持纵向)。
-
说明:
  • overflow: scroll样式需要元素设置固定的大小。
-
-

align-items6+

-

string

-

-

-

-

设置容器中元素交叉轴上的对齐方式:

-
  • stretch:Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度;
  • flex-start:Flex布局容器内元素向交叉轴起点对齐;
  • flex-end:Flex布局容器内元素向交叉轴终点对齐;
  • center:Flex布局容器内元素在交叉轴居中对齐;
  • baseline:如Flex布局纵向排列,则该值与'flex-start'等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。
-

scrollbar-color6+

-

<color>

-

-

-

-

设置滚动条的颜色。

-

scrollbar-width6+

-

<length>

-

-

-

-

设置滚动条的宽度。

-

overscroll-effect6+

-

string

-

-

-

-

设置滚动边缘效果,可选值为:

-
  • spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹;
  • fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化;
  • none:滑动到边缘后无效果
-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

reachstart6+

-

-

-

当页面滑动到最开始的点时触发的事件回调,当flex-direction: row时才会触发。

-

reachend6+

-

-

-

当页面滑动到最末尾的点时触发的事件回调,当flex-direction: row时才会触发。

-

reachtop6+

-

-

-

当页面滑动到最上部的点时触发的事件回调,当flex-direction: column时才会触发。

-

reachbottom6+

-

-

-

当页面滑动到最下部的点时触发的事件回调,当flex-direction: column时才会触发。

-
- -## 方法 - -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

返回值

-

描述

-

getScrollOffset6+

-

-

-

ScrollOffset

-

获取元素内容的滚动偏移。

-
说明:
  • 需要设置overflow样式为scroll,默认滚动方向与容器方向一致。
-
-

scrollBy6+

-

ScrollParam

-

-

-

指定元素内容的滚动偏移。

-
说明:
  • 需要设置overflow样式为scroll。
-
-
- -**表 1** ScrollOffset6+ - - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

x

-

number

-

在x轴方向的偏移,单位为px。

-

y

-

number

-

在y轴方向的偏移,单位为px。

-
- -**表 2** ScrollParam6+ - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

dx

-

number

-

水平方向滑动的偏移量,单位px。

-

dy

-

number

-

垂直方向滑动的偏移量,单位px。

-

smooth

-

boolean

-

是否平滑处理。

-
- -## 示例 - -1. Flex样式 - - ``` - -
-
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px; - } - .flex-box { - justify-content: space-around; - align-items: center; - width: 400px; - height: 140px; - background-color: #ffffff; - } - .flex-item { - width: 120px; - height: 120px; - border-radius: 16px; - } - .color-primary { - background-color: #007dff; - } - .color-warning { - background-color: #ff7500; - } - .color-success { - background-color: #41ba41; - } - ``` - - ![](figures/zh-cn_image_0000001127285076.png) - -2. Flex Wrap样式 - - ``` - -
-
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px; - } - .flex-box { - justify-content: space-around; - align-items: center; - flex-wrap: wrap; - width: 300px; - height: 250px; - background-color: #ffffff; - } - .flex-item { - width: 120px; - height: 120px; - border-radius: 16px; - } - .color-primary { - background-color: #007dff; - } - .color-warning { - background-color: #ff7500; - } - .color-success { - background-color: #41ba41; - } - ``` - - ![](figures/22.png) - -3. Grid样式 - - ``` - -
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .common { - width: 400px; - height: 400px; - background-color: #ffffff; - align-items: center; - justify-content: center; - margin: 24px; - } - .grid-parent { - display: grid; - grid-template-columns: 35% 35%; - grid-columns-gap: 24px; - grid-rows-gap: 24px; - grid-template-rows: 35% 35%; - } - .grid-child { - width: 100%; - height: 100%; - border-radius: 8px; - } - .grid-left-top { - grid-row-start: 0; - grid-column-start: 0; - grid-row-end: 0; - grid-column-end: 0; - background-color: #3f56ea; - } - .grid-left-bottom { - grid-row-start: 1; - grid-column-start: 0; - grid-row-end: 1; - grid-column-end: 0; - background-color: #00aaee; - } - .grid-right-top { - grid-row-start: 0; - grid-column-start: 1; - grid-row-end: 0; - grid-column-end: 1; - background-color: #00bfc9; - } - .grid-right-bottom { - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: 1; - grid-column-end: 1; - background-color: #47cc47; - } - ``` - - ![](figures/11.png) - -4. 拖拽7+ - - ``` - -
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - } - .content{ - width: 200px; - height: 200px; - background-color: red; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt'; - export default { - data:{ - left:0, - top:0, - }, - dragstart(e){ - prompt.showToast({ - message: 'Start to be dragged' - }) - }, - drag(e){ - this.left = e.globalX; - this.top = e.globalY; - }, - dragend(e){ - prompt.showToast({ - message: 'End Drag' - }) - }, - } - ``` - - ![](figures/9.gif) - - ``` - -
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - width: 100%; - position: relative; - max-width: 100%; - } - .content{ - width: 200px; - height: 200px; - background-color: red; - position: absolute; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt'; - export default { - data:{ - left:0, - top:0, - }, - drag(e){ - this.left = e.globalX; - this.top = e.globalY; - }, - dragenter(e){ - prompt.showToast({ - message: 'enter' - }) - }, - dragover(e){ - prompt.showToast({ - message: 'over' - }) - }, - dragleave(e){ - prompt.showToast({ - message: 'leave' - }) - }, - drop(e){ - prompt.showToast({ - message: 'drop' - }) - } - } - ``` - - ![](figures/6.gif) - -5. 手指捏合7+ - - ``` - -
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px;} - .content{ - width: 400px; - height: 400px; - background-color: aqua; - margin:30px - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt'; - export default { - pinchstart(e){ - prompt.showToast({ - message: 'pinchstart!!!' - }) - }, - pinchupdate(e){ - prompt.showToast({ - message: 'Two-finger pinch update' - }) - }, - pinchend(e){ - prompt.showToast({ - message: 'Finished with two fingers pinching' - }) - }, - pinchcancel(e){ - prompt.showToast({ - message: 'Finger pinching is interrupted' - }) - } - } - ``` +## 子组件 - ![](figures/5.gif) +支持。 +## 属性 + +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 + + +## 样式 + +除支持[组件通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:
- column:垂直方向从上到下。
- row:水平方向从左到右。 | +| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:
- nowrap:不换行,单行显示。
- wrap:换行,多行显示。 | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:
- flex-start:项目位于容器的开头。
- flex-end:项目位于容器的结尾。
- center:项目位于容器的中心。
- space-between:项目位于各行之间留有空白的容器内。
- space-around:项目位于各行之前、之间、之后都留有空白的容器内。
- space-evenly5+:  均匀排列每个元素,每个元素之间的间隔相等。 | +| align-items | string | stretch
| 否 | flex容器当前行的交叉轴对齐格式,可选值为:
- stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start:元素向交叉轴起点对齐。
- flex-end:元素向交叉轴终点对齐。
- center:元素在交叉轴居中。 | +| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
- flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | +| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
- flex:弹性布局
- grid:网格布局
- none:不渲染此元素 | +| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。
示例:如设置grid-template-columns为:
- 50px 100px 60px:分三列,第一列50px,第二列100px,第三列60px;
- 1fr 1fr 2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;
- 30% 20% 50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;
- repeat(2,100px):分两列,第一列100px,第二列100px;
- repeat(auto-fill,100px)5+:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;
- auto 1fr 1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 | +| grid-[columns\|rows]-gap | <length> | 0 | 否 | 用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 | +| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 | +| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 | +| grid-auto-flow5+ | string | - | 否 | 使用框架自动布局算法进行网格的布局,可选值为:
- row:逐行填充元素,如果行空间不够,则新增行;
- column:逐列填充元素,如果列空间不够,则新增列。 | +| overflow6+ | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。
- visible:多个子元素内容超过元素大小时,显示在元素外面;
- hidden:元素内容超过元素大小时,进行裁切显示;
- scroll:元素内容超过元素大小时,进行滚动显示并展示滚动条(当前只支持纵向)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> overflow: scroll样式需要元素设置固定的大小,默认滚动方向与容器方向一致。 | +| align-items6+ | string | - | 否 | 设置容器中元素交叉轴上的对齐方式:
- stretch:Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度;
- flex-start:Flex布局容器内元素向交叉轴起点对齐;
- flex-end:Flex布局容器内元素向交叉轴终点对齐;
- center:Flex布局容器内元素在交叉轴居中对齐;
- baseline:如Flex布局纵向排列,则该值与'flex-start'等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 | +| scrollbar-color6+ | <color> | - | 否 | 设置滚动条的颜色。 | +| scrollbar-width6+ | <length> | - | 否 | 设置滚动条的宽度。 | +| overscroll-effect6+ | string | - | 否 | 设置滚动边缘效果,可选值为:
- spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹;
- fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化;
- none:滑动到边缘后无效果 | + + +## 事件 + + + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| reachstart6+ | - | 当页面滑动到最开始的点时触发的事件回调,当flex-direction: row时才会触发。 | +| reachend6+ | - | 当页面滑动到最末尾的点时触发的事件回调,当flex-direction: row时才会触发。 | +| reachtop6+ | - | 当页面滑动到最上部的点时触发的事件回调,当flex-direction: column时才会触发。 | +| reachbottom6+ | - | 当页面滑动到最下部的点时触发的事件回调,当flex-direction: column时才会触发。 | + +## 方法 + +除支持[通用方法](../reference/arkui-js/js-components-common-methods.md)外,还支持如下方法: + +| 名称 | 参数 | 返回值 | 描述 | +| -------- | -------- | -------- | -------- | +| getScrollOffset6+ | - | ScrollOffset | 获取元素内容的滚动偏移。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 需要设置overflow样式为scroll。 | +| scrollBy6+ | ScrollParam | - | 指定元素内容的滚动偏移。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 需要设置overflow样式为scroll。 | + +**表1** ScrollOffset6+ + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 在x轴方向的偏移,单位为px。 | +| y | number | 在y轴方向的偏移,单位为px。 | + +**表2** ScrollParam6+ + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| dx | number | 水平方向滑动的偏移量,单位px。 | +| dy | number | 垂直方向滑动的偏移量,单位px。 | +| smooth | boolean | 是否平滑处理。 | + + +## 示例 + +1. Flex样式 + ``` + +
+
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px; + } + .flex-box { + justify-content: space-around; + align-items: center; + width: 400px; + height: 140px; + background-color: #ffffff; + } + .flex-item { + width: 120px; + height: 120px; + border-radius: 16px; + } + .color-primary { + background-color: #007dff; + } + .color-warning { + background-color: #ff7500; + } + .color-success { + background-color: #41ba41; + } + ``` + + ![zh-cn_image_0000001127285076](figures/zh-cn_image_0000001127285076.png) + +2. Flex Wrap样式 + ``` + +
+
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px; + } + .flex-box { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + width: 300px; + height: 250px; + background-color: #ffffff; + } + .flex-item { + width: 120px; + height: 120px; + border-radius: 16px; + } + .color-primary { + background-color: #007dff; + } + .color-warning { + background-color: #ff7500; + } + .color-success { + background-color: #41ba41; + } + ``` + + ![zh-cn_image_0000001213396721](figures/zh-cn_image_0000001213396721.png) + +3. Grid样式 + + ``` + +
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .common { + width: 400px; + height: 400px; + background-color: #ffffff; + align-items: center; + justify-content: center; + margin: 24px; + } + .grid-parent { + display: grid; + grid-template-columns: 35% 35%; + grid-columns-gap: 24px; + grid-rows-gap: 24px; + grid-template-rows: 35% 35%; + } + .grid-child { + width: 100%; + height: 100%; + border-radius: 8px; + } + .grid-left-top { + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; + background-color: #3f56ea; + } + .grid-left-bottom { + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; + background-color: #00aaee; + } + .grid-right-top { + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; + background-color: #00bfc9; + } + .grid-right-bottom { + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; + background-color: #47cc47; + } + ``` + + ![zh-cn_image_0000001213276619](figures/zh-cn_image_0000001213276619.png) + +4. 拖拽7+ + ``` + +
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + } + .content{ + width: 200px; + height: 200px; + background-color: red; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + data:{ + left:0, + top:0, + }, + dragstart(e){ + prompt.showToast({ + message: 'Start to be dragged' + }) + }, + drag(e){ + this.left = e.globalX; + this.top = e.globalY; + }, + dragend(e){ + prompt.showToast({ + message: 'End Drag' + }) + }, + } + ``` + + ![zh-cn_image_0000001213284927](figures/zh-cn_image_0000001213284927.gif) + + ``` + +
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + width: 100%; + position: relative; + max-width: 100%; + } + .content{ + width: 200px; + height: 200px; + background-color: red; + position: absolute; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + data:{ + left:0, + top:0, + }, + drag(e){ + this.left = e.globalX; + this.top = e.globalY; + }, + dragenter(e){ + prompt.showToast({ + message: 'enter' + }) + }, + dragover(e){ + prompt.showToast({ + message: 'over' + }) + }, + dragleave(e){ + prompt.showToast({ + message: 'leave' + }) + }, + drop(e){ + prompt.showToast({ + message: 'drop' + }) + } + } + ``` + + ![zh-cn_image_0000001168005276](figures/zh-cn_image_0000001168005276.gif) + +5. 手指捏合7+ + ``` + +
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px;} + .content{ + width: 400px; + height: 400px; + background-color: aqua; + margin:30px + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + pinchstart(e){ + prompt.showToast({ + message: 'pinchstart!!!' + }) + }, + pinchupdate(e){ + prompt.showToast({ + message: 'Two-finger pinch update' + }) + }, + pinchend(e){ + prompt.showToast({ + message: 'Finished with two fingers pinching' + }) + }, + pinchcancel(e){ + prompt.showToast({ + message: 'Finger pinching is interrupted' + }) + } + } + ``` + + ![zh-cn_image_0000001168440692](figures/zh-cn_image_0000001168440692.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md index a8923bd74431a19768d72bf54fa5fa90a55d794b..6c5360b474d06233a65fb3959659baf2a873cef3 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md @@ -1,78 +1,53 @@ -# form +# form + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 6开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 表单容器,支持容器内input元素的内容提交和重置。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 - -支持[通用属性](js-components-common-attributes.md)。 - -## 样式 - -支持[组件通用样式](js-components-common-styles.md)。 - -## 事件 - -处支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

submit

-

FormResult

-

点击提交按钮,进行表单提交时,触发该事件。

-

reset

-

-

-

点击重置按钮后,触发该事件。

-
- -**表 1** FormResult - - - - - - - - - - - - -

名称

-

类型

-

描述

-

value

-

Object

-

input元素的name和value的值。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 属性 + +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 + + +## 样式 + +支持[组件通用样式](../arkui-js/js-components-common-styles.md)。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| submit | FormResult | 点击提交按钮,进行表单提交时,触发该事件。 | +| reset | - | 点击重置按钮后,触发该事件。 | + +**表1** FormResult + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| value | Object | input元素的name和value的值。 | + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -105,5 +80,4 @@ export default{ } ``` -![](figures/001.gif) - +![zh-cn_image_0000001180658376](figures/zh-cn_image_0000001180658376.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md index ec3bb6aca1c56ac99a0831a20d279fcad1f8ed65..89b93114ef1b03e466d2b2bb42cbd6f8e90d159a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md @@ -1,140 +1,65 @@ -# list-item-group +# list-item-group -<[list](js-components-container-list.md)\>的子组件,用来展示分组,宽度默认充满list组件。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -- 使用该组件时父元素list组件的样式columns必须为1,否则功能异常。 -- 由于父元素list组件的align-items默认样式为stretch,该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 +<[list](../arkui-js/js-components-container-list.md)>的子组件,用来展示分组,宽度默认充满list组件。 -## 权限列表 + +- 使用该组件时父元素list组件的样式columns必须为1,否则功能异常。 + +- 由于父元素list组件的align-items默认样式为stretch,该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 + +## 权限列表 无 -## 子组件 - -仅支持<[list-item](js-components-container-list-item.md)\>。 - -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

default

-

-

list-item-group类型,同一list支持多种type的list-item-group,相同type的list-item-group需要确保渲染后的视图布局也完全相同,当type固定时,使用show属性代替if属性,确保视图布局不变。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 - -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-direction

-

string

-

row

-

-

flex容器主轴方向。可选项有:

-
  • column:垂直方向从上到下
  • row:水平方向从左到右
-

justify-content

-

string

-

flex-start

-

-

flex容器当前行的主轴对齐格式。可选项有:

-
  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素,每个元素之间的间隔相等。
-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

groupclick

-

{ groupid: string }

-

group点击事件。

-

groupid:被点击的group的id。

-

groupcollapse

-

{ groupid: string }

-

group收拢事件。

-

groupid:收拢的group的id。

-

当不输入参数或者groupid为空时收拢所有分组。

-

groupexpand

-

{ groupid: string }

-

group展开事件。

-

groupid:展开的group的id。

-

当不输入参数或者groupid为空时展开所有分组。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 + +## 子组件 + +仅支持<[list-item](../arkui-js/js-components-container-list-item.md)>。 + + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | default | 否 | list-item-group类型,同一list支持多种type的list-item-group,相同type的list-item-group需要确保渲染后的视图布局也完全相同,当type固定时,使用show属性代替if属性,确保视图布局不变。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:
- column:垂直方向从上到下
- row:水平方向从左到右 | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:
- flex-start:项目位于容器的开头。
- flex-end:项目位于容器的结尾。
- center:项目位于容器的中心。
- space-between:项目位于各行之间留有空白的容器内。
- space-around:项目位于各行之前、之间、之后都留有空白的容器内。
- space-evenly5+:  均匀排列每个元素,每个元素之间的间隔相等。 | + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| groupclick | { groupid: string } | group点击事件。
groupid:被点击的group的id。 | +| groupcollapse | { groupid: string } | group收拢事件。
groupid:收拢的group的id。
当不输入参数或者groupid为空时收拢所有分组。 | +| groupexpand | { groupid: string } | group展开事件。
groupid:展开的group的id。
当不输入参数或者groupid为空时展开所有分组。 | + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -243,5 +168,4 @@ export default { } ``` -![](figures/list6.gif) - +![zh-cn_image_0000001127284978](figures/zh-cn_image_0000001127284978.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md index 45606b6518929c62f927c6b73da7784c972ef461..16bec43dd90db69c8e08e18e79b901d62efb93bd 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md @@ -1,151 +1,59 @@ -# list-item +# list-item -<[list](js-components-container-list.md)\>的子组件,用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch,该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -## 权限列表 +<[list](../arkui-js/js-components-container-list.md)>的子组件,用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch,该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 + +## 权限列表 无 -## 子组件 + +## 子组件 支持单个子组件。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

default

-

-

list-item类型,默认值为default,同一list中可以包含多种type的list-item,相同type的list-item需要确保渲染后的视图布局也相同,如果type固定,则使用show属性代替if属性,确保视图布局不变。

-

primary

-

boolean

-

false

-

-

设置为true表示该item是group中的主item,即收拢时显示的item。如果有多个primary,以第一个为准。如果没有标记为primary的item,则以第一个item为主item。

-

section

-

string

-

-

-

-

当前item的匹配字符串,如不设置则为空。不支持动态修改。group内只有主item设置有效。

-

sticky

-

string

-

none

-

-

设置当前item是否为吸顶item以及其吸顶消失的效果,当前仅支持纵向list,group内部的item不可吸顶,设置该属性无效。

-
  • none:当前item不吸顶。
  • normal:当前item吸顶,消失效果滑动消失。
  • opacity:当前item吸顶,消失效果渐隐消失,仅在智能穿戴上支持。
-

clickeffect5+

-

boolean

-

true

-

-

设置当前item是否有点击动效。

-
  • false:item点击时无点击动效。
  • true:item点击时有点击动效。
-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

column-span

-

<number>

-

1

-

-

当前的list-item需要在list中占据的列的数量,默认占一列,仅在list为多列时生效。

-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

sticky

-

{ state: boolean }

-

吸顶组件回调事件。

-

value: false表示当前item处于非吸顶状态;

-

value: true表示当前item处于吸顶状态;

-

说明:仅当item设置sticky属性时支持注册此事件。

-
- -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 - -详见[List示例](js-components-container-list.md#示例)。 +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | default | 否 | list-item类型,默认值为default,同一list中可以包含多种type的list-item,相同type的list-item需要确保渲染后的视图布局也相同,如果type固定,则使用show属性代替if属性,确保视图布局不变。 | +| primary | boolean | false | 否 | 设置为true表示该item是group中的主item,即收拢时显示的item。如果有多个primary,以第一个为准。如果没有标记为primary的item,则以第一个item为主item。 | +| section | string | - | 否 | 当前item的匹配字符串,如不设置则为空。不支持动态修改。group内只有主item设置有效。 | +| sticky | string | none | 否 | 设置当前item是否为吸顶item以及其吸顶消失的效果,当前仅支持纵向list,group内部的item不可吸顶,设置该属性无效。
- none:当前item不吸顶。
- normal:当前item吸顶,消失效果滑动消失。
- opacity:当前item吸顶,消失效果渐隐消失,仅在智能穿戴上支持。 | +| clickeffect5+ | boolean | true | 否 | 设置当前item是否有点击动效。
- false:item点击时无点击动效。
- true:item点击时有点击动效。 | + + +## 样式 + + + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| column-span | <number> | 1 | 否 | 当前的list-item需要在list中占据的列的数量,默认占一列,仅在list为多列时生效。 | + + +## 事件 + + + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| sticky | { state: boolean } | 吸顶组件回调事件。
value: false表示当前item处于非吸顶状态;
value: true表示当前item处于吸顶状态;
说明:仅当item设置sticky属性时支持注册此事件。 | + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 + +详见[List示例](../arkui-js/js-components-container-list.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md index 620ba233854166ba77682590d43ffcab6bc0cc4e..c2fb21c57dddff95a9ea352ed5af449da408b7b1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md @@ -1,674 +1,155 @@ -# list +# list + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。 -## 权限列表 +## 权限列表 无 -## 子组件 -仅支持<[list-item-group](js-components-container-list-item-group.md)\>和<[list-item](js-components-container-list-item.md)\>。 +## 子组件 + +仅支持<[list-item-group](../arkui-js/js-components-container-list-item-group.md)>和<[list-item](../arkui-js/js-components-container-list-item.md)>。 + -## 属性 +## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

scrollpage

-

boolean

-

false

-

-

设置为true时,将 list 顶部页面中非 list 部分随 list 一起滑出可视区域,当list方向为row时,不支持此属性。

-

cachedcount

-

number

-

0

-

-

长列表延迟加载时list-item最少缓存数量。

-

可视区域外缓存的list-item数量少于该值时,会触发requestitem事件。

-

scrollbar

-

string

-

off

-

-

侧边滑动栏的显示模式(当前只支持纵向):

-
  • off:不显示。
  • auto:按需显示(触摸时显示,2s后消失)。
  • on:常驻显示。
-

scrolleffect

-

string

-

spring

-

-

滑动效果,目前支持如下滑动效果:

-
  • spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
  • fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化。
  • no:滑动到边缘后无效果。
-

indexer

-

boolean | Array<string>

-

false

-

-

是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时,索引栏会显示在列表右边界处。示例:

-

"indexer" : "true"表示使用默认字母索引表。

-

"indexer" : "false"表示无索引。

-

"indexer" : ['#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"#"必须要存在。

-
说明:
  • indexer属性生效需要flex-direction属性配合设置为column,且columns属性设置为1。
  • 点击索引条进行列表项索引需要list-item子组件配合设置相应的section属性
-
-

indexercircle5+

-

boolean

-

-

-

-

是否为环形索引。

-

穿戴设备默认为true,其他为false。indexer为false时不生效。

-

indexermulti5+

-

boolean

-

false

-

-

是否开启索引条多语言功能。

-

indexer为false时不生效。

-

indexerbubble5+

-

boolean

-

true

-

-

是否开启索引切换的气泡提示。

-

indexer为false时不生效。

-

divider5+

-

boolean

-

false

-

-

item是否自带分隔线。

-

其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。

-

shapemode

-

string

-

default

-

-

侧边滑动栏的形状类型。

-
  • default:不指定,跟随主题;
  • rect:矩形;
  • round:圆形。
-

updateeffect

-

boolean

-

false

-

-

用于设置当list内部的item发生删除或新增时是否支持动效。

-
  • false:新增删除item时无过渡动效。
  • true:新增删除item时播放过程动效。
-

chainanimation5+

-

boolean

-

false

-

-

用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。

-
  • false:不启用链式联动
  • true:启用链式联动
    说明:
    • 不支持动态修改。
    • 如同时配置了indexer,链式动效不生效。
    • 如配置了链式动效,list-item的sticky不生效。
    -
    -
-

initialindex

-

number

-

0

-

-

用于设置当前List初次加载时视口起始位置显示的item,默认为0,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效,当同时设置了initialoffset属性时,当前属性不生效。当indexer为true或者scrollpage为true时,不生效。

-

initialoffset

-

<length>

-

0

-

-

用于设置当前List初次加载时视口的起始偏移量,偏移量无法超过当前List可滑动的范围,如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时,不生效。

-

selected5+

-

string

-

-

-

-

指定当前列表中被选中激活的项,可选值为list-item的section属性值。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| scrollpage | boolean | false | 否 | 设置为true时,将 list 顶部页面中非 list 部分随 list 一起滑出可视区域,当list方向为row时,不支持此属性。 | +| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。
可视区域外缓存的list-item数量少于该值时,会触发requestitem事件。 | +| scrollbar | string | off | 否 | 侧边滑动栏的显示模式(当前只支持纵向):
- off:不显示。
- auto:按需显示(触摸时显示,2s后消失)。
- on:常驻显示。 | +| scrolleffect | string | spring | 否 | 滑动效果,目前支持如下滑动效果:
- spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
- fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化。
- no:滑动到边缘后无效果。 | +| indexer | boolean \| Array<string> | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时,索引栏会显示在列表右边界处。示例:
"indexer" : "true"表示使用默认字母索引表。
"indexer" : "false"表示无索引。
"indexer" : ['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - indexer属性生效需要flex-direction属性配合设置为column,且columns属性设置为1。

> - 点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 | +| indexercircle5+ | boolean | - | 否 | 是否为环形索引。
穿戴设备默认为true,其他为false。indexer为false时不生效。 | +| indexermulti5+ | boolean | false | 否 | 是否开启索引条多语言功能。
indexer为false时不生效。 | +| indexerbubble5+ | boolean | true | 否 | 是否开启索引切换的气泡提示。
indexer为false时不生效。 | +| divider5+ | boolean | false | 否 | item是否自带分隔线。
其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 | +| shapemode | string | default | 否 | 侧边滑动栏的形状类型。
- default:不指定,跟随主题;
- rect:矩形;
- round:圆形。 | +| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。
- false:新增删除item时无过渡动效。
- true:新增删除item时播放过程动效。 | +| chainanimation5+ | boolean | false | 否 | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
- false:不启用链式联动
- true:启用链式联动
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > - 不支持动态修改。
  > - 如同时配置了indexer,链式动效不生效。
  > - 如配置了链式动效,list-item的sticky不生效。 | +| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item,默认为0,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效,当同时设置了initialoffset属性时,当前属性不生效。当indexer为true或者scrollpage为true时,不生效。 | +| initialoffset | <length> | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量,偏移量无法超过当前List可滑动的范围,如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时,不生效。 | +| selected5+ | string | - | 否 | 指定当前列表中被选中激活的项,可选值为list-item的section属性值。 | -## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

divider-color5+

-

<color>

-

transparent

-

-

item分隔线颜色,仅当list的divider属性为true时生效。

-

divider-height5+

-

<length>

-

1

-

-

item分隔线高度,仅当list的divider属性为true时生效。

-

divider-length5+

-

<length>

-

主轴宽度

-

-

item分隔线长度,不设置时最大长度为主轴宽度,具体长度取决于divider-origin,仅当list的divider属性为true时生效。

-

divider-origin5+

-

<length>

-

0

-

-

item分隔线相对于item主轴起点位置的偏移量,仅当list的divider属性为true时生效。

-

flex-direction

-

string

-

-

column

-

-

设置flex容器主轴的方向,指定flex项如何放置在flex容器中,可选值为:

-
  • column:主轴为纵向。
  • row:主轴为横向。
-

其他组件默认值为row,在list组件中默认值为column。

-

columns

-

number

-

1

-

-

list交叉轴方向的显示列数,默认为1列。

-
说明:

设置多列时,在list交叉轴上进行均分,每一列大小相同。

-
-

align-items

-

string

-

stretch

-

-

list每一列交叉轴上的对齐格式,可选值为:

-
  • stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。
    说明:

    align-items样式作用在每一列的子元素上,列与列之间采用均分方式布局。

    -
    -
-

item-extent

-

<length> | <percentage>

-

-

-

-

设置内部item为固定大小,设置为百分比格式时,指相对于list的视口主轴方向长度的百分比。

-

fade-color

-

<color>

-

grey

-

-

设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。

-

scrollbar-color6+

-

<color>

-

-

-

-

设置滚动条的颜色。

-

scrollbar-width6+

-

<length>

-

-

-

-

设置滚动条的宽度。

-

scrollbar-offset6+

-

<length>

-

0

-

-

设置滚动条距离List默认位置的偏移量,只支持正数,默认位置在List右边缘,可以通过这个偏移量调整滚动条的水平位置,如果滚动条绘制在list外部,而list父组件有裁剪,会导致滚动条被裁剪。

-
+除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: -## 事件 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| divider-color5+ | <color> | transparent | 否 | item分隔线颜色,仅当list的divider属性为true时生效。 | +| divider-height5+ | <length> | 1 | 否 | item分隔线高度,仅当list的divider属性为true时生效。 | +| divider-length5+ | <length> | 主轴宽度 | 否 | item分隔线长度,不设置时最大长度为主轴宽度,具体长度取决于divider-origin,仅当list的divider属性为true时生效。 | +| divider-origin5+ | <length> | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量,仅当list的divider属性为true时生效。 | +| flex-direction | string | column | 否 | 设置flex容器主轴的方向,指定flex项如何放置在flex容器中,可选值为:
- column:主轴为纵向。
- row:主轴为横向。
其他组件默认值为row,在list组件中默认值为column。 | +| columns | number | 1 | 否 | list交叉轴方向的显示列数,默认为1列。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 设置多列时,在list交叉轴上进行均分,每一列大小相同。 | +| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式,可选值为:
- stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start:元素向交叉轴起点对齐。
- flex-end:元素向交叉轴终点对齐。
- center:元素在交叉轴居中。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > align-items样式作用在每一列的子元素上,列与列之间采用均分方式布局。 | +| item-extent | <length> \| <percentage> | - | 否 | 设置内部item为固定大小,设置为百分比格式时,指相对于list的视口主轴方向长度的百分比。 | +| fade-color | <color> | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 | +| scrollbar-color6+ | <color> | - | 否 | 设置滚动条的颜色。 | +| scrollbar-width6+ | <length> | - | 否 | 设置滚动条的宽度。 | +| scrollbar-offset6+ | <length> | 0 | 否 | 设置滚动条距离List默认位置的偏移量,只支持正数,默认位置在List右边缘,可以通过这个偏移量调整滚动条的水平位置,如果滚动条绘制在list外部,而list父组件有裁剪,会导致滚动条被裁剪。 | -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

indexerchange5+

-

{ local: booleanValue }

-

多语言索引条切换事件,仅当indexer属性为true,indexermulti为true时生效。booleanValue可能值为true或者false:

-
  • true: 当前展示本地索引。
  • false: 当前展示字母索引。
-

scroll

-

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

-

列表滑动的偏移量和状态回调。

-

stateValue: 0表示列表滑动已经停止。

-

stateValue: 1表示列表正在用户触摸状态下滑动。

-

stateValue: 2表示列表正在用户松手状态下滑动。

-

scrollbottom

-

-

-

当前列表已滑动到底部位置。

-

scrolltop

-

-

-

当前列表已滑动到顶部位置。

-

scrollend

-

-

-

列表滑动已经结束。

-

scrolltouchup

-

-

-

手指已经抬起且列表仍在惯性滑动。

-

requestitem

-

-

-

请求创建新的list-item。

-

长列表延迟加载时,可视区域外缓存的list-item数量少于cachedcount时,会触发该事件。

-

rotate7+

-

{ rotateValue: number }

-

返回表冠旋转角度增量值,仅智能穿戴支持。

-
+## 事件 -## 方法 +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -支持[通用方法](js-components-common-methods.md)外,还支持如下方法: +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| indexerchange5+ | { local: booleanValue } | 多语言索引条切换事件,仅当indexer属性为true,indexermulti为true时生效。booleanValue可能值为true或者false:
- true: 当前展示本地索引。
- false: 当前展示字母索引。 | +| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | 列表滑动的偏移量和状态回调。
stateValue: 0表示列表滑动已经停止。
stateValue: 1表示列表正在用户触摸状态下滑动。
stateValue: 2表示列表正在用户松手状态下滑动。 | +| scrollbottom | - | 当前列表已滑动到底部位置。 | +| scrolltop | - | 当前列表已滑动到顶部位置。 | +| scrollend | - | 列表滑动已经结束。 | +| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 | +| requestitem | - | 请求创建新的list-item。
长列表延迟加载时,可视区域外缓存的list-item数量少于cachedcount时,会触发该事件。 | +| rotate7+ | { rotateValue: number } | 返回表冠旋转角度增量值,仅智能穿戴支持。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

scrollTo

-

{ index: number(指定位置) }

-

list滑动到指定index的item位置。

-

scrollBy

-

ScrollParam

-

触发list滑动一段距离。

-

智慧屏特有方法。

-

scrollTop

-

{ smooth: boolean }

-

smooth缺省为false,表示直接滚动到顶部。

-

smooth为true,表示平滑滚动到顶部。

-

scrollBottom

-

{ smooth: boolean }

-

smooth缺省为false,表示直接滚动到底部。

-

smooth为true,表示平滑滚动到底部。

-

scrollPage

-

{ reverse: boolean, smooth: boolean }

-

reverse缺省值为false,表示下一页,无完整页则滚动到底部。

-

reverse为true,表示上一页,无完整页则滚动到顶部。

-

smooth缺省值为false,表示直接滚动一页。

-

smooth为true,表示平滑滚动一页。

-

scrollArrow

-

{ reverse: boolean, smooth: boolean }

-

reverse缺省值为false,表示向底部方向滑动一段距离,无足够距离则滚动到底部。

-

reverse为true,表示向顶部方向滑动一段距离,无足够距离则滚动到顶部。

-

smooth缺省值为false,表示直接滚动。

-

smooth为true,表示平滑滚动。

-

collapseGroup

-

{ groupid: string }

-

收拢指定的group。

-

groupid:需要收拢的group的id。

-

当groupid未指定时收拢所有的group。

-

expandGroup

-

{ groupid: string }

-

展开指定的group。

-

groupid:需要展开的group的id。

-

当groupid未指定时展开所有的group。

-

currentOffset

-

-

-

返回当前滑动的偏移量。返回值类型是Object,返回值说明请见表2

-
-**表 1** ScrollParam +## 方法 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

是否必选

-

默认值

-

备注

-

dx

-

number

-

-

0

-

水平方向滑动的偏移量,单位为px。

-

dy

-

number

-

-

0

-

垂直方向滑动的偏移量,单位为px。

-

smooth

-

boolean

-

-

true

-

列表位置跳转时是否有滑动动画。

-
+支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: -**表 2** currentOffset返回对象属性说明 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 | +| scrollTop | { smooth: boolean } | smooth缺省为false,表示直接滚动到顶部。
smooth为true,表示平滑滚动到顶部。 | +| scrollBottom | { smooth: boolean } | smooth缺省为false,表示直接滚动到底部。
smooth为true,表示平滑滚动到底部。 | +| scrollPage | { reverse: boolean, smooth: boolean } | reverse缺省值为false,表示下一页,无完整页则滚动到底部。
reverse为true,表示上一页,无完整页则滚动到顶部。
smooth缺省值为false,表示直接滚动一页。
smooth为true,表示平滑滚动一页。 | +| scrollArrow | { reverse: boolean, smooth: boolean } | reverse缺省值为false,表示向底部方向滑动一段距离,无足够距离则滚动到底部。
reverse为true,表示向顶部方向滑动一段距离,无足够距离则滚动到顶部。
smooth缺省值为false,表示直接滚动。
smooth为true,表示平滑滚动。 | +| collapseGroup | { groupid: string } | 收拢指定的group。
groupid:需要收拢的group的id。
当groupid未指定时收拢所有的group。 | +| expandGroup | { groupid: string } | 展开指定的group。
groupid:需要展开的group的id。
当groupid未指定时展开所有的group。 | +| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object,返回值说明请见表 currentOffset返回对象属性说明。 | + +**表1** currentOffset返回对象属性说明 + +| 名称 | 类型 | 备注 | +| -------- | -------- | -------- | +| x | number | 当前x轴滑动偏移量,单位为px。 | +| y | number | 当前y轴滑动偏移量,单位为px。 | - - - - - - - - - - - - - - - -

名称

-

类型

-

备注

-

x

-

number

-

当前x轴滑动偏移量,单位为px。

-

y

-

number

-

当前y轴滑动偏移量,单位为px。

-
## 示例 ``` -!-- index.hml --> -
- - -
- {{$item.title}} - {{$item.date}} -
-
-
+ +
+ + +
+ {{$item.title}} + {{$item.date}} +
+
+
+
``` ``` // index.js export default { - data: { - todolist: [{ - title: '刷题', - date: '2021-12-31 10:00:00', - }, { - title: '看电影', - date: '2021-12-31 20:00:00', - }], + data: { + todolist: [{ + title: '刷题', + date: '2021-12-31 10:00:00', + }, { + title: '看电影', + date: '2021-12-31 20:00:00', + }], }, } ``` ``` /* index.css */ -.container { - display: flex; - justify-content: center; - align-items: center; - width: 100%; +.container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; height: 100%; } -.todo-wrapper { - width: 100%; +.todo-wrapper { + width: 100%; height: 300px; } -.todo-item { - width: 100%; - height: 120px; +.todo-item { + width: 100%; + height: 120px; justify-content:center; } -.todo-title { - width: 100%; - height: 80px; +.todo-title { + width: 100%; + height: 80px; text-align: center; } ``` -![](figures/list.png) - +![zh-cn_image_0000001185033226](figures/zh-cn_image_0000001185033226.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md index c961452d696b142b659a519dcb391d0e6519d569..e68ebaa5625b4ab2ac95e19af110f116f4989369 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md @@ -1,457 +1,86 @@ -# panel +# panel + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 可滑动面板。提供一种轻量的内容展示的窗口,可方便的在不同尺寸中切换。属于弹出式组件。 -## 子组件 + +## 子组件 支持 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

foldable

-

-

设置可滑动面板类型,不可动态变更,可选值有:

-
  • minibar:提供minibar和类全屏展示切换效果。

    -
  • foldable:内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。

    -
  • temporary:内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。

    -
-

mode

-

string

-

full

-

-

设置初始状态,mode参数可选值为:

-
  1. mini:类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。

    -
  2. half: 类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。

    -
  3. full: 类全屏状态。

    -
-

dragbar

-

boolean

-

true

-

-

设置是否存在dragbar,true表示存在,false表示不存在。

-

fullheight

-

<length>

-

-

-

-

指定full状态下的高度,默认为屏幕尺寸 - 8px。

-

halfheight

-

<length>

-

-

-

-

指定half状态下的高度,默认为屏幕尺寸的一半。

-

miniheight

-

<length>

-

-

-

-

指定mini状态下的高度,默认为48px。

-
+除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 不支持渲染属性,包括for、if和show。 ->- 不支持focusable和disabled属性。 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | foldable | 是 | 设置可滑动面板类型,不可动态变更,可选值有:
- minibar:提供minibar和类全屏展示切换效果。
- foldable:内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。
- temporary:内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。 | +| mode | string | full | 否 | 设置初始状态,mode参数可选值为:
1. mini:类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。
2. half: 类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。
3. full: 类全屏状态。 | +| dragbar | boolean | true | 否 | 设置是否存在dragbar,true表示存在,false表示不存在。 | +| fullheight | <length> | - | 否 | 指定full状态下的高度,默认为屏幕尺寸 - 8px。 | +| halfheight | <length> | - | 否 | 指定half状态下的高度,默认为屏幕尺寸的一半。 | +| miniheight | <length> | - | 否 | 指定mini状态下的高度,默认为48px。 | -## 样式 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 不支持渲染属性,包括for、if和show。 +> +> - 不支持focusable和disabled属性。 -仅支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

padding

-

<length>

-

0

-

-
该属性可以有1到4个值:
  • 指定一个值时,该值指定四个边的内边距。

    -
  • 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。

    -
  • 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。

    -
  • 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

-

使用简写属性设置所有的外边距属性,该属性可以有1到4个值。

-
  • 只有一个值时,这个值会被指定给全部的四个边。

    -
  • 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。

    -
  • 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。

    -
  • 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

-

使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。

-

border-style

-

string

-

solid

-

-

使用简写属性设置所有边框的样式,可选值为:

-
  • dotted:显示为一系列圆点,圆点半径为border-width的一半。
  • dashed:显示为一系列短的方形虚线。
-
  • solid:显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

-

分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

-

使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。

-

border-width

-

<length>

-

0

-

-

使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

-

使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,如果要设置color和width,需要将四个方向一起设置(border-width、border-color)。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

-

分别设置左上,右上,右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

-

仅支持设置渐变样式,与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

-

设置背景颜色。

-

background-image

-

string

-

-

-

-

设置背景图片。与background-color、background不兼容;支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

-

设置背景图片的大小。

-
  • string可选值:
    • contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
    • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
    • auto:保持原图的比例不变。
    -
  • length值参数方式:

    设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式:

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

-

针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。

-
  • repeat:在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x:只在水平轴上重复绘制图片。
  • repeat-y:只在竖直轴上重复绘制图片。
  • no-repeat:不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

-
  • 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left:水平方向上最左侧。
    • right:水平方向上最右侧。
    • top:竖直方向上最顶部。
    • bottom:竖直方向上最底部。
    • center:水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。
  • 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。

-
+## 样式 -## 事件 +仅支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| padding | <length> | 0 | 否 | 该属性可以有1到4个值:
- 指定一个值时,该值指定四个边的内边距。
- 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。
- 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| padding-[start\|end] | <length> | 0 | 否 | 设置起始和末端内边距属性。 | +| margin | <length> | 0 | 否 | 使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
- 只有一个值时,这个值会被指定给全部的四个边。
- 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。
- 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。
- 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下外边距属性。 | +| margin-[start\|end] | <length> | 0 | 否 | 设置起始和末端外边距属性。 | +| border | - | 0 | 否 | 使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。 | +| border-style | string | solid | 否 | 使用简写属性设置所有边框的样式,可选值为:
- dotted:显示为一系列圆点,圆点半径为border-width的一半。
- dashed:显示为一系列短的方形虚线。
- solid:显示为一条实线。 | +| border-[left\|top\|right\|bottom]-style | string | solid | 否 | 分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。 | +| border-[left\|top\|right\|bottom] | - | - | 否 | 使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度。 | +| border-[left\|top\|right\|bottom]-width | <length> | 0 | 否 | 分别设置左、上、右、下四个边框的宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色。 | +| border-[left\|top\|right\|bottom]-color | <color> | black | 否 | 分别设置左、上、右、下四个边框的颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width,border-[left\|top\|right\|bottom]-color ,如果要设置color和width,需要将四个方向一起设置(border-width、border-color)。 | +| border-[top\|bottom]-[left\|right]-radius | <length> | - | 否 | 分别设置左上,右上,右下和左下四个角的圆角半径。 | +| background | <linear-gradient> | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md),与background-color、background-image不兼容。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容;支持本地图片资源地址。 | +| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | 否 | 设置背景图片的大小。
- string可选值:
  - contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
  - cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
  - auto:保持原图的比例不变。
- length值参数方式:
  设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
- 百分比参数方式:
  以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 | +| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。
- repeat:在水平轴和竖直轴上同时重复绘制图片。
- repeat-x:只在水平轴上重复绘制图片。
- repeat-y:只在竖直轴上重复绘制图片。
- no-repeat:不会重复绘制图片。 | +| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | 否 | - 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
  - left:水平方向上最左侧。
  - right:水平方向上最右侧。
  - top:竖直方向上最顶部。
  - bottom:竖直方向上最底部。
  - center:水平方向或竖直方向上中间位置。
- length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px)  。如果仅规定了一个值,另外一个值将是50%。
- 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
- 可以混合使用<percentage>和<length> | +| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 | + + +## 事件 仅支持如下事件: - - - - - - - - - - -

名称

-

参数

-

描述

-

sizechange

-

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

-

当可滑动面板发生状态变化时触发,mode参数可选值为:

-
  1. mini:类型为minibar和foldable时,处于最小状态;

    -
  2. half: 类型为foldable时,处于类半屏状态;

    -
  3. full: 类全屏状态。

    -
    说明:

    返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。

    -
    -
-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| sizechange | { size: { height: heightLength, width: widthLength }, mode: modeStr } | 当可滑动面板发生状态变化时触发,mode参数可选值为:
1. mini:类型为minibar和foldable时,处于最小状态;
2. half: 类型为foldable时,处于类半屏状态;
3. full: 类全屏状态。
   > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
   > 返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。 | + -## 方法 +## 方法 仅支持如下方法: - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

-

-

弹出panel可滑动面板。

-

close

-

-

-

关闭panel可滑动面板。

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| show | - | 弹出panel可滑动面板。 | +| close | - | 关闭panel可滑动面板。 | -## 示例 + +## 示例 ``` @@ -529,5 +158,4 @@ export default { } ``` -![](figures/panel6.gif) - +![zh-cn_image_0000001173164785](figures/zh-cn_image_0000001173164785.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md index f38f0c4908afea5d258dad4856b5cb5eb117a4fd..c429f43f6206e954d0ce718eabbaac90f05c119f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md @@ -1,184 +1,79 @@ -# popup +# popup + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持单个子组件节点5+。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性:↵ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

target

-

string

-

-

-

-

目标元素的id属性值,不支持动态切换。

-

placement

-

string

-

bottom

-

-

弹出窗口位置。可选值为:

-
  • left:位于目标元素左边;
  • right:位于目标元素右边;
  • top:位于目标元素上边;
  • bottom:位于目标元素下边;
  • topLeft:位于目标元素左上角;
  • topRight:位于目标元素右上角;
  • bottomLeft:位于目标元素左下角;
  • bottomRight:位于目标元素右下角。
-

keepalive5+

-

boolean

-

false

-

-

设置当前popup是否需要保留。设置为true时,点击屏幕区域或者页面切换气泡不会消失,需调用气泡组件的hide方法才可让气泡消失;设置为false时,点击屏幕区域或者页面切换气泡会自动消失。

-

clickable5+

-

boolean

-

true

-

-

popup是否使用点击弹窗,当设置为false时,只支持方法调用显示。

-

arrowoffset5+

-

<length>

-

0

-

-

popup箭头在弹窗处的偏移,默认居中,正值按照语言方向进行偏移,负值相反。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 不支持focusable属性。 - -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

mask-color

-

<color>

-

-

-

-

遮罩层的颜色,默认值为全透明。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 不支持position相关样式。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

visibilitychange

-

{ visibility: boolean }

-

当气泡弹出和消失时会触发该回调函数。

-
- -## 方法 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| target | string | - | 是 | 目标元素的id属性值,不支持动态切换。 | +| placement | string | bottom | 否 | 弹出窗口位置。可选值为:
- left:位于目标元素左边;
- right:位于目标元素右边;
- top:位于目标元素上边;
- bottom:位于目标元素下边;
- topLeft:位于目标元素左上角;
- topRight:位于目标元素右上角;
- bottomLeft:位于目标元素左下角;
- bottomRight:位于目标元素右下角。 | +| keepalive5+ | boolean | false | 否 | 设置当前popup是否需要保留。设置为true时,点击屏幕区域或者页面切换气泡不会消失,需调用气泡组件的hide方法才可让气泡消失;设置为false时,点击屏幕区域或者页面切换气泡会自动消失。 | +| clickable5+ | boolean | true | 否 | popup是否使用点击弹窗,当设置为false时,只支持方法调用显示。 | +| arrowoffset5+ | <length> | 0 | 否 | popup箭头在弹窗处的偏移,默认居中,正值按照语言方向进行偏移,负值相反。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 不支持focusable属性。 + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| mask-color | <color> | - | 否 | 遮罩层的颜色,默认值为全透明。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 不支持position相关样式。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| visibilitychange | { visibility: boolean } | 当气泡弹出和消失时会触发该回调函数。 | + + +## 方法 仅支持如下方法: - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show5+

-

-

-

弹出气泡提示。

-

hide5+

-

-

-

取消气泡提示。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->1. popup气泡弹窗属性、样式均不支持动态更新。 ->2. popup气泡弹窗的margin样式是相对于target元素进行生效的,如popup在target元素下方,此时只生效margin-top样式,popup在target元素左上方,此时只生效margin-bottom和margin-right样式。 ->3. popup的border四边样式需一致,若四边设置不一致且圆角为零,则按左、上、右、下的顺序取第一个被设置的样式,否则border不生效。 ->4. popup的target组件的click事件不生效。 - -## 示例 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| show5+ | - | 弹出气泡提示。 | +| hide5+ | - | 取消气泡提示。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 1. popup气泡弹窗属性、样式均不支持动态更新。 +> +> 2. popup气泡弹窗的margin样式是相对于target元素进行生效的,如popup在target元素下方,此时只生效margin-top样式,popup在target元素左上方,此时只生效margin-bottom和margin-right样式。 +> +> 3. popup的border四边样式需一致,若四边设置不一致且圆角为零,则按左、上、右、下的顺序取第一个被设置的样式,否则border不生效。 +> +> 4. popup的target组件的click事件不生效。 + + +## 示例 ``` @@ -232,5 +127,4 @@ export default { } ``` -![](figures/zh-cn_image_0000001178886129.png) - +![zh-cn_image_0000001178886129](figures/zh-cn_image_0000001178886129.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md index c026bdcaead2a1a83e35fb552b52a58344cac98e..c931d65811fbc3a27795028578e32a57849ac370 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md @@ -1,180 +1,60 @@ -# refresh +# refresh + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 下拉刷新容器。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

offset

-

<length>

-

-

-

-

刷新组件静止时距离父组件顶部的距离。

-

refreshing

-

boolean

-

false

-

-

用于标识刷新组件当前是否正在刷新。

-

type

-

string

-

auto

-

-

设置组件刷新时的动效。两个可选值,不支持动态修改。

-
  • auto: 默认效果,列表界面拉到顶后,列表不移动,下拉后有转圈弹出。
  • pulldown: 列表界面拉到顶后,可以继续往下滑动一段距离触发刷新,刷新完成后有回弹效果(如果子组件含有list,防止下拉效果冲突,需将list的scrolleffect设置为no)。
-

lasttime

-

boolean

-

false

-

-

是否显示上次更新时间,字符串格式为:“上次更新时间:XXXX ”,XXXX 按照时间日期显示规范显示,不可动态修改(建议type为pulldown时使用,固定距离位于内容下拉区域底部,使用时注意offset属性设置,防止出现重叠)。

-

timeoffset6+

-

<length>

-

-

-

-

设置更新时间距离父组件顶部的距离。

-

friction

-

number

-

42

-

-

下拉摩擦系数,取值范围:0-100,数值越大refresh组件跟手性高,数值越小refresh跟手性低。

-
说明:

仅手机、平板和智能穿戴设备支持。

-
-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

background-color

-

<color>

-

white

-

-

用于设置刷新组件的背景颜色。

-

progress-color

-

<color>

-

black

-

-

用于设置刷新组件的loading颜色。

-
- -## 事件 + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| offset | <length> | - | 否 | 刷新组件静止时距离父组件顶部的距离。 | +| refreshing | boolean | false | 否 | 用于标识刷新组件当前是否正在刷新。 | +| type | string | auto | 否 | 设置组件刷新时的动效。两个可选值,不支持动态修改。
- auto: 默认效果,列表界面拉到顶后,列表不移动,下拉后有转圈弹出。
- pulldown: 列表界面拉到顶后,可以继续往下滑动一段距离触发刷新,刷新完成后有回弹效果(如果子组件含有list,防止下拉效果冲突,需将list的scrolleffect设置为no)。 | +| lasttime | boolean | false | 否 | 是否显示上次更新时间,字符串格式为:“上次更新时间:XXXX ”,XXXX 按照时间日期显示规范显示,不可动态修改(建议type为pulldown时使用,固定距离位于内容下拉区域底部,使用时注意offset属性设置,防止出现重叠)。 | +| timeoffset6+ | <length> | - | 否 | 设置更新时间距离父组件顶部的距离。 | +| friction | number | 42 | 否 | 下拉摩擦系数,取值范围:0-100,数值越大refresh组件跟手性高,数值越小refresh跟手性低。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| background-color | <color> | white
| 否 | 用于设置刷新组件的背景颜色。 | +| progress-color | <color> | black
| 否 | 用于设置刷新组件的loading颜色。 | + + +## 事件 仅支持如下事件: - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

refresh

-

{ refreshing: refreshingValue }

-

下拉刷新状态变化时触发。可能值:

-
  • false:当前处于下拉刷新过程中。
  • true:当前未处于下拉刷新过程中。
-

pulldown

-

{ state: string }

-

下拉开始和松手时触发。可能值:

-
  • start:表示开始下拉。
  • end:表示结束下拉。
-
- -## 方法 - -不支持[通用方法](js-components-common-methods.md)。 - -## 示例 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| refresh | { refreshing: refreshingValue } | 下拉刷新状态变化时触发。可能值:
- false:当前处于下拉刷新过程中。
- true:当前未处于下拉刷新过程中。 | +| pulldown | { state: string } | 下拉开始和松手时触发。可能值:
- start:表示开始下拉。
- end:表示结束下拉。 | + + +## 方法 + +不支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -257,5 +137,4 @@ export default { } ``` -![](figures/zh-cn_image_0000001150719520.gif) - +![zh-cn_image_0000001150719520](figures/zh-cn_image_0000001150719520.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stack.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stack.md index efeb410e1f73ce35b0e919641377d49468689b03..7cd91997c65a3a4036a23d1a9f290e8c12a2af80 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stack.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stack.md @@ -1,32 +1,40 @@ -# stack +# stack + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 -支持[通用属性](js-components-common-attributes.md)。 +## 属性 + +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 + -## 样式 +## 样式 -支持[通用样式](js-components-common-styles.md)。 +支持[通用样式](../arkui-js/js-components-common-styles.md)。 -## 事件 -支持[通用事件](js-components-common-events.md)。 +## 事件 -## 方法 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -支持[通用方法](js-components-common-methods.md)。 +## 方法 -## 示例 +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -68,5 +76,4 @@ } ``` -![](figures/zh-cn_image_0000001127284958.png) - +![zh-cn_image_0000001127284958](figures/zh-cn_image_0000001127284958.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md index be9790a514403b09fde99a0c55258a4bc5bff300..972b8f94f023f1ab3bc9562a905922eca6d58842 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md @@ -1,227 +1,73 @@ -# stepper-item +# stepper-item + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 步骤导航器子组件,作为步骤导航器某一个步骤的内容展示组件。 -## 权限列表 + +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

label

-

Label

-

-

-

-

自定义步骤导航器底部步骤提示文本按钮属性,不支持动态修改。如果没有定义该属性,步骤导航器在中文语言环境下,使用“返回”和“下一步”文本按钮,在非中文语言环境下,使用“BACK”和“NEXT”文本按钮。针对第一个步骤,没有回退文本按钮,针对最后一个步骤,下一步文本按钮文本使用“开始”(中文语言)或者“START”(非中文语言)。

-
- -**表 1** Label对象定义 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

prevLabel

-

string

-

-

-

步骤导航器底部回退文本按钮的描述文本。

-

nextLabel

-

string

-

-

-

步骤导航器底部下一步文本按钮的描述文本。

-

status

-

string

-

normal

-

步骤导航器当前步骤的初始状态,可选值为:

-
  • normal:正常状态,右侧文本按钮正常显示,可点击进入下一个步骤。
-
  • disabled:不可用状态,右侧文本按钮灰度显示,不可点击进入下一个步骤。
-
  • waiting:等待状态,右侧文本按钮不显示,使用等待进度条,不可点击进入下一个步骤。
-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

-

文本颜色。

-

font-size

-

<length>

-

-

-

-

文本大小。

-

allow-scale

-

boolean

-

true

-

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-

font-style

-

string

-

normal

-

-

文本字体样式,可选值为:

-
  • normal: 标准的字体样式;
  • italic: 斜体的字体样式。
-

font-weight

-

number|string

-

normal

-

-

文本字体粗细,number类型取值[100, 900]的整数(被100整除),默认为400,取值越大,字体越粗。string类型取值为:lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

-

文本修饰,可选值为:

-
  • underline: 文本下划线修饰。
  • line-through: 穿过文本的修饰线。
  • none: 标准文本。
-

font-family

-

string

-

sans-serif

-

-

字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 不支持长宽样式,宽和父容器stepper一样,高是父容器stepper减去底部导航按钮的高度。 ->- 不支持posit样式。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

appear

-

-

-

当该步骤出现时触发。

-

disappear

-

-

-

当该步骤消失时触发。

-
- -## 方法 - -不支持[通用方法](js-components-common-methods.md)。 - -## 示例 - -详见[stepper示例](js-components-container-stepper.md)。 +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| label | Label | - | 否 | 自定义步骤导航器底部步骤提示文本按钮属性,不支持动态修改。如果没有定义该属性,步骤导航器在中文语言环境下,使用“返回”和“下一步”文本按钮,在非中文语言环境下,使用“BACK”和“NEXT”文本按钮。针对第一个步骤,没有回退文本按钮,针对最后一个步骤,下一步文本按钮文本使用“开始”(中文语言)或者“START”(非中文语言)。 | + +**表1** Label对象定义 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| prevLabel | string | - | 步骤导航器底部回退文本按钮的描述文本。 | +| nextLabel | string | - | 步骤导航器底部下一步文本按钮的描述文本。 | +| status | string | normal | 步骤导航器当前步骤的初始状态,可选值为:
- normal:正常状态,右侧文本按钮正常显示,可点击进入下一个步骤。
- disabled:不可用状态,右侧文本按钮灰度显示,不可点击进入下一个步骤。
- waiting:等待状态,右侧文本按钮不显示,使用等待进度条,不可点击进入下一个步骤。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | - | 否 | 文本颜色。 | +| font-size | <length> | - | 否 | 文本大小。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | +| font-style | string | normal | 否 | 文本字体样式,可选值为:
- normal: 标准的字体样式;
- italic: 斜体的字体样式。 | +| font-weight | number\|string | normal | 否 | 文本字体粗细,number类型取值[100, 900]的整数(被100整除),默认为400,取值越大,字体越粗。string类型取值为:lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 文本修饰,可选值为:
- underline: 文本下划线修饰。
- line-through: 穿过文本的修饰线。
- none: 标准文本。 | +| font-family | string | sans-serif | 否 | 字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体,会被选中作为文本的字体。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 不支持长宽样式,宽和父容器stepper一样,高是父容器stepper减去底部导航按钮的高度。 +> +> - 不支持posit样式。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| appear | - | 当该步骤出现时触发。 | +| disappear | - | 当该步骤消失时触发。 | + + +## 方法 + +不支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 + +详见[stepper示例](../arkui-js/js-components-container-stepper.md)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md index b41c50933e92d8cc97bc7527cc79defa6a8e5532..9013c0a9d49a0eebdaed3f178df6810a89db1676 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md @@ -1,125 +1,64 @@ -# stepper +# stepper + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 步骤导航器。当完成一个任务需要多个步骤时,可以使用步骤导航器展示当前进展。 -## 权限列表 + +## 权限列表 无 -## 子组件 - -仅支持子组件。 - ->![](../../public_sys-resources/icon-note.gif) **说明:** ->步骤导航器内的步骤顺序按照子组件的顺序进行排序。 - -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

index

-

number

-

-

-

设置步骤导航器步骤显示第几个stepper-item子组件。

-
- -## 样式 - -支持[通用样式](js-components-common-styles.md)。 - ->![](../../public_sys-resources/icon-note.gif) **说明:** ->stepper组件默认占满父容器大小,建议父组件使用应用窗口大小(或者父组件为根节点)来优化体验。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

finish

-

-

当步骤导航器最后一个步骤完成时触发该事件。

-

skip

-

-

当通过setNextButtonStatus方法设置当前步骤导航器可跳过时,点击右侧跳过按钮触发该事件。

-

change

-

{ prevIndex:prevIndex, index: index}

-

当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件,prevIndex表示老步骤的序号,index表示新步骤的序号。

-

next

-

{ index:index, pendingIndex: pendingIndex }

-

当用户点击下一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将于跳转的序号,该事件有返回值,返回值格式为:{ pendingIndex:pendingIndex },可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。

-

back

-

{ index:index, pendingIndex: pendingIndex }

-

当用户点击上一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将于跳转的序号,该事件有返回值,返回值格式为Object:{ pendingIndex:pendingIndex },可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。

-
- -## 方法 - -除支持[通用方法](js-components-common-methods.md)外,支持如下方法: - - - - - - - - - - - -

名称

-

参数

-

描述

-

setNextButtonStatus

-

{ status: string, label: label }

-

设置当前步骤导航器下一步文本按钮的状态,参数中status类型为string,可选值为:

-
  1. normal:正常状态,下一步文本按钮正常显示,可点击进入下一个步骤;
  2. disabled:不可用状态,下一步文本按钮灰度显示,不可点击进入下一个步骤;
  3. waiting:等待状态,下一步文本按钮不显示,使用等待进度条,不可点击进入下一个步骤。
  4. skip:跳过状态,下一步文本按钮显示跳过按钮,点击时会跳过剩下步骤。
-
- -## 示例 + +## 子组件 + +仅支持<stepper-item>子组件。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 步骤导航器内的步骤顺序按照子组件<stepper-item>的顺序进行排序。 + + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 | + + +## 样式 + +支持[通用样式](../arkui-js/js-components-common-styles.md)。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> stepper组件默认占满父容器大小,建议父组件使用应用窗口大小(或者父组件为根节点)来优化体验。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 | +| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时,点击右侧跳过按钮触发该事件。 | +| change | { prevIndex:prevIndex, index: index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件,prevIndex表示老步骤的序号,index表示新步骤的序号。 | +| next | { index:index, pendingIndex: pendingIndex } | 当用户点击下一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将于跳转的序号,该事件有返回值,返回值格式为:{ pendingIndex:pendingIndex },可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 | +| back | { index:index, pendingIndex: pendingIndex } | 当用户点击上一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将于跳转的序号,该事件有返回值,返回值格式为Object:{ pendingIndex:pendingIndex },可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 | + + +## 方法 + +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,支持如下方法: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| setNextButtonStatus | { status: string, label: label } | 设置当前步骤导航器下一步文本按钮的状态,参数中status类型为string,可选值为:
1. normal:正常状态,下一步文本按钮正常显示,可点击进入下一个步骤;
2. disabled:不可用状态,下一步文本按钮灰度显示,不可点击进入下一个步骤;
3. waiting:等待状态,下一步文本按钮不显示,使用等待进度条,不可点击进入下一个步骤。
4. skip:跳过状态,下一步文本按钮显示跳过按钮,点击时会跳过剩下步骤。 | + + +## 示例 ``` @@ -212,5 +151,4 @@ export default { } ``` -![](figures/Video_2021-03-26_154549.gif) - +![zh-cn_image_0000001127125114](figures/zh-cn_image_0000001127125114.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md index cfa71c0ab71af766d8068b4dd5eb3493b1867c71..b017870ad7902efcdddb87bb6ca136bc1faefcf8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md @@ -1,318 +1,75 @@ -# swiper +# swiper + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 滑动容器,提供切换子组件显示的能力。 -## 权限列表 +## 权限列表 无 -## 子组件 -支持除之外的子组件。 +## 子组件 + +支持除<list>之外的子组件。 + + +## 属性 -## 属性 +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 | +| autoplay | boolean | false | 否 | 子组件是否自动播放,自动播放状态下,导航点不可操作5+。 | +| interval | number | 3000 | 否 | 使用自动播放时播放的时间间隔,单位为ms。 | +| indicator | boolean | true | 否 | 是否启用导航点指示器,默认true。 | +| digital5+ | boolean | false | 否 | 是否启用数字导航点,默认为false。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 必须设置indicator时才能生效数字导航点。 | +| indicatordisabled5+ | boolean | false | 否 | 指示器是否禁止用户手势操作,设置为true时,指示器不会响应用户的点击拖拽。 | +| loop | boolean | true | 否 | 是否开启循环滑动。 | +| duration | number | - | 否 | 子组件切换的动画时长。 | +| vertical | boolean | false | 否 | 是否为纵向滑动,纵向滑动时采用纵向的指示器。 | +| cachedsize7+ | number | -1 | 否 | swiper延迟加载时item最少缓存数量。-1表示全部缓存。 | +| scrolleffect7+ | string | spring | 否 | 滑动效果。目前支持如下:
- spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
- fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化
- none:滑动到边缘后无效果。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
  > 该属性仅在loop属性为false时生效。 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

index

-

number

-

0

-

-

当前在容器中显示的子组件的索引值。

-

autoplay

-

boolean

-

false

-

-

子组件是否自动播放,自动播放状态下,导航点不可操作5+

-

interval

-

number

-

3000

-

-

使用自动播放时播放的时间间隔,单位为ms。

-

indicator

-

boolean

-

true

-

-

是否启用导航点指示器,默认true。

-

digital5+

-

boolean

-

false

-

-

是否启用数字导航点,默认为false。

-
说明:

必须设置indicator时才能生效数字导航点。

-
-

indicatordisabled5+

-

boolean

-

false

-

-

指示器是否禁止用户手势操作,设置为true时,指示器不会响应用户的点击拖拽。

-

loop

-

boolean

-

true

-

-

是否开启循环滑动。

-

duration

-

number

-

-

-

-

子组件切换的动画时长。

-

vertical

-

boolean

-

false

-

-

是否为纵向滑动,纵向滑动时采用纵向的指示器。

-

cachedsize7+

-

number

-

-1

-

-

swiper延迟加载时item最少缓存数量。-1表示全部缓存。

-

scrolleffect7+

-

string

-

spring

-

-

滑动效果。目前支持如下:

-
  • spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
  • fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化
  • none:滑动到边缘后无效果。
    说明:

    该属性仅在loop属性为false时生效。

    -
    -
-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

indicator-color

-

<color>

-

-

-

-

导航点指示器的填充颜色。

-

indicator-selected-color

-

<color>

-

#ff007dff

-

-

导航点指示器选中的颜色。

-

indicator-size

-

<length>

-

4px

-

-

导航点指示器的直径大小。

-

indicator-top|left|right|bottom

-

<length> | <percentage>

-

-

-

-

导航点指示器在swiper中的相对位置。

-

next-margin7+

-

<length> | <percentage>

-

-

-

-

后边距,用于露出后一项的一小部分。

-

previous-margin7+

-

<length> | <percentage>

-

-

-

-

前边距,用于露出前一项的一小部分。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| indicator-color | <color> | - | 否 | 导航点指示器的填充颜色。 | +| indicator-selected-color | <color> | \#ff007dff | 否 | 导航点指示器选中的颜色。 | +| indicator-size | <length> | 4px | 否 | 导航点指示器的直径大小。 | +| indicator-top\|left\|right\|bottom | <length> \| <percentage> | - | 否 | 导航点指示器在swiper中的相对位置。 | +| next-margin7+ | <length> \| <percentage> | - | 否 | 后边距,用于露出后一项的一小部分。 | +| previous-margin7+ | <length> \| <percentage> | - | 否 | 前边距,用于露出前一项的一小部分。 | -## 事件 -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: +## 事件 - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ index: currentIndex }

-

当前显示的组件索引变化时触发该事件。

-

rotation

-

{ value: rotationValue }

-

智能穿戴表冠旋转事件触发时的回调。

-

animationfinish7+

-

-

-

动画结束时触发该事件。

-
+除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: -## 方法 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { index: currentIndex } | 当前显示的组件索引变化时触发该事件。 | +| rotation | { value: rotationValue } | 智能穿戴表冠旋转事件触发时的回调。 | +| animationfinish7+ | - | 动画结束时触发该事件。 | -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: +## 方法 - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

swipeTo

-

{ index: number(指定位置) }

-

切换到index位置的子组件。

-

showNext

-

-

显示下一个子组件。

-

showPrevious

-

-

显示上一个子组件。

-
+除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: -## 示例 +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| swipeTo | { index: number(指定位置) } | 切换到index位置的子组件。 | +| showNext | 无 | 显示下一个子组件。 | +| showPrevious | 无 | 显示上一个子组件。 | + + +## 示例 ``` @@ -397,5 +154,6 @@ export default { } ``` -![](figures/4-0.gif) +![zh-cn_image_0000001167823326](figures/zh-cn_image_0000001167823326.gif) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md index 6234c0678915521727aa08dbf301aeaf5d1057db..1d3a494dd2077d1fedccd6e3a07bcf07f97399b8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md @@ -1,59 +1,44 @@ -# tab-bar +# tab-bar -<[tabs](js-components-container-tabs.md)\>的子组件,用来展示tab的标签区,子组件排列方式为横向排列。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -## 权限列表 +<[tabs](../arkui-js/js-components-container-tabs.md)>的子组件,用来展示tab的标签区,子组件排列方式为横向排列。 + +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| mode | string | scrollable | 否 | 设置组件宽度的可延展性。可选值为:
- scrollable:子组件宽度为实际设置的宽度,当宽度之和(包括margin边距)大于tab-bar的宽度时,子组件可以横向滑动。
- fixed:子组件宽度均分tab-bar的宽度。 | + + +## 样式 - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

mode

-

string

-

scrollable

-

-

设置组件宽度的可延展性。可选值为:

-
  • scrollable:子组件宽度为实际设置的宽度,当宽度之和(包括margin边距)大于tab-bar的宽度时,子组件可以横向滑动。
  • fixed:子组件宽度均分tab-bar的宽度。
-
+支持[通用样式](../arkui-js/js-components-common-styles.md)。 -## 样式 -支持[通用样式](js-components-common-styles.md)。 +## 事件 -## 事件 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -支持[通用事件](js-components-common-events.md)。 -## 方法 +## 方法 -支持[通用方法](js-components-common-methods.md)。 +支持[通用方法](../arkui-js/js-components-common-methods.md)。 -## 示例 -详见[tabs示例](js-components-container-tabs.md#section14993155318710)。 +## 示例 +详见[tabs示例](../arkui-js/js-components-container-tabs.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md index 0fc30eb91f185f8feac2191e068dcd32324bf753..fe4a72df6b7c96013d4ce252e914d9a06034c83a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md @@ -1,54 +1,39 @@ -# tab-content +# tab-content -<[tabs](js-components-container-tabs.md)\>的子组件,用来展示tab的内容区,高度默认充满tabs剩余空间,子组件排列方式为横向排列,当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度,否则无法显示。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -## 权限列表 +<[tabs](../arkui-js/js-components-container-tabs.md)>的子组件,用来展示tab的内容区,高度默认充满tabs剩余空间,子组件排列方式为横向排列,当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度,否则无法显示。 + +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| scrollable | boolean | true | 否 | 是否可以通过左右滑动进行页面切换。默认为true,设置为false后,页面的切换只能通过tab-bar的点击实现。 | + - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

scrollable

-

boolean

-

true

-

-

是否可以通过左右滑动进行页面切换。默认为true,设置为false后,页面的切换只能通过tab-bar的点击实现。

-
+## 样式 -## 样式 +支持[通用样式](../arkui-js/js-components-common-styles.md)。 -支持[通用样式](js-components-common-styles.md)。 -## 事件 +## 事件 -支持[通用事件](js-components-common-events.md)。 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -## 示例 -详见[tabs示例](js-components-container-tabs.md#section14993155318710)。 +## 示例 +详见[tabs示例](../arkui-js/js-components-container-tabs.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md index 73d2d2daaaf7fe72e81e184feb2795bfdc5d1beb..93ce100f89815bdad0f1ce4fdf8795d6a067743a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md @@ -1,86 +1,45 @@ -# tabs +# tabs + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 tab页签容器。 -## 权限列表 +## 权限列表 无 -## 子组件 - -仅支持最多一个<[tab-bar](js-components-container-tab-bar.md)\>和最多一个<[tab-content](js-components-container-tab-content.md)\>。 - -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

index

-

number

-

0

-

-

当前处于激活态的tab索引。

-

vertical

-

boolean

-

false

-

-

是否为纵向的tab,默认为false,可选值为:

-
  • false:tabbar和tabcontent上下排列。
  • true:tabbar和tabcontent左右排列。
-
- -## 样式 - -支持[通用样式](js-components-common-styles.md)。 - -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ index: indexValue }

-

tab页签切换后触发。

-
说明:

动态修改index值不会触发该回调。

-
-
- -## 示例 + +## 子组件 + +仅支持最多一个<[tab-bar](../arkui-js/js-components-container-tab-bar.md)>和最多一个<[tab-content](../arkui-js/js-components-container-tab-content.md)>。 + + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| index | number | 0 | 否 | 当前处于激活态的tab索引。 | +| vertical | boolean | false | 否 | 是否为纵向的tab,默认为false,可选值为:
- false:tabbar和tabcontent上下排列。
- true:tabbar和tabcontent左右排列。 | + + +## 样式 + +支持[通用样式](../arkui-js/js-components-common-styles.md)。 + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { index: indexValue } | tab页签切换后触发。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 动态修改index值不会触发该回调。 | + + +## 示例 ``` @@ -149,5 +108,4 @@ export default { } ``` -![](figures/tab.gif) - +![zh-cn_image_0000001127125116](figures/zh-cn_image_0000001127125116.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container.md b/zh-cn/application-dev/reference/arkui-js/js-components-container.md index 99afacd50843e05e926f5e3d30edc33e4cbac539..b3a1fada257c961a99359701dd10c804a6fcdf3e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container.md @@ -1,37 +1,37 @@ -# 容器组件 +# 容器组件 -- **[badge](js-components-container-badge.md)** -- **[dialog](js-components-container-dialog.md)** -- **[div](js-components-container-div.md)** +- **[badge](js-components-container-badge.md)** -- **[form](js-components-container-form.md)** +- **[dialog](js-components-container-dialog.md)** -- **[list](js-components-container-list.md)** +- **[div](js-components-container-div.md)** -- **[list-item](js-components-container-list-item.md)** +- **[form](js-components-container-form.md)** -- **[list-item-group](js-components-container-list-item-group.md)** +- **[list](js-components-container-list.md)** -- **[panel](js-components-container-panel.md)** +- **[list-item](js-components-container-list-item.md)** -- **[popup](js-components-container-popup.md)** +- **[list-item-group](js-components-container-list-item-group.md)** -- **[refresh](js-components-container-refresh.md)** +- **[panel](js-components-container-panel.md)** -- **[stack](js-components-container-stack.md)** +- **[popup](js-components-container-popup.md)** -- **[stepper](js-components-container-stepper.md)** +- **[refresh](js-components-container-refresh.md)** -- **[stepper-item](js-components-container-stepper-item.md)** +- **[stack](js-components-container-stack.md)** -- **[swiper](js-components-container-swiper.md)** +- **[stepper](js-components-container-stepper.md)** -- **[tabs](js-components-container-tabs.md)** +- **[stepper-item](js-components-container-stepper-item.md)** -- **[tab-bar](js-components-container-tab-bar.md)** +- **[swiper](js-components-container-swiper.md)** -- **[tab-content](js-components-container-tab-content.md)** +- **[tabs](js-components-container-tabs.md)** +- **[tab-bar](js-components-container-tab-bar.md)** +- **[tab-content](js-components-container-tab-content.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md index 8ac685f138c7c4b31388b86a69814b67dae1769c..1d70ef0cf7611959c54d33e941dda4ace6326f28 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md @@ -1,7 +1,6 @@ -# 基本用法 +# 基本用法 自定义组件是用户根据业务需求,将已有的组件组合,封装成的新组件,可以在工程中多次调用,从而提高代码的可读性。自定义组件通过element引入到宿主页面,使用方法如下: - ```
@@ -9,8 +8,8 @@
``` -结合if-else使用自定义组件的示例: +结合if-else使用自定义组件的示例: ``` @@ -20,45 +19,17 @@
``` -- name属性指自定义组件名称\(非必填\),组件名称对大小写不敏感,默认使用小写。src属性指自定义组件hml文件路径\(必填\),若没有设置name属性,则默认使用hml文件名作为组件名。 -- 事件绑定:自定义组件中绑定子组件事件使用\(on|@\)child1语法,子组件中通过this.$emit\('child1', \{ params: '传递参数' \}\)触发事件并进行传值,父组件执行bindParentVmMethod方法并接收子组件传递的参数。 - - >![](../../public_sys-resources/icon-note.gif) **说明:** - >子组件中使用驼峰命名法命名的事件,在父组件中绑定时需要使用短横线分隔命名形式,例如:@children-event表示绑定子组件的childrenEvent事件,如 @children-event="bindParentVmMethod"。 +- name属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写。src属性指自定义组件hml文件路径(必填),若没有设置name属性,则默认使用hml文件名作为组件名。 -**表 1** 对象 +- 事件绑定:自定义组件中绑定子组件事件使用(on|@)child1语法,子组件中通过this.$emit('child1', { params: '传递参数' })触发事件并进行传值,父组件执行bindParentVmMethod方法并接收子组件传递的参数。 + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** + > 子组件中使用驼峰命名法命名的事件,在父组件中绑定时需要使用短横线分隔命名形式,例如:\@children-event表示绑定子组件的childrenEvent事件,如 \@children-event="bindParentVmMethod"。 - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

data

-

Object/Function

-

页面的数据模型,类型是对象或者函数,如果类型是函数,返回值必须是对象。属性名不能以$或_开头,不要使用保留字for, if, show, tid。

-

data与private和public不能重合使用。(Rich)

-

props

-

Array/Object

-

props用于组件之间的通信,可以通过<tag xxxx='value'>方式传递给组件;props名称必须用小写,不能以$或_开头,不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。

-

computed

-

Object

-

计算属性,用于在读取或设置时,进行预先处理,其结果会被缓存。计算属性名不能以$或_开头,不要使用保留字。

-
+**表1** 对象 +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| data | Object/Function | 页面的数据模型,类型是对象或者函数,如果类型是函数,返回值必须是对象。属性名不能以$或_开头,不要使用保留字for, if, show, tid。
data与private和public不能重合使用。(Rich) | +| props | Array/Object | props用于组件之间的通信,可以通过<tag xxxx='value'>方式传递给组件;props名称必须用小写,不能以$或_开头,不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。 | +| computed | Object | 计算属性,用于在读取或设置时,进行预先处理,其结果会被缓存。计算属性名不能以$或_开头,不要使用保留字。 | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md index 2d90c7f8884e0d71c2bab15c203d06291630c969..2127b2ab2029d8f79667e3b613a51c40a0e9ce32 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md @@ -1,7 +1,8 @@ -# 事件参数 +# 事件参数 子组件也可以通过绑定的事件向上传递参数,在自定义事件上添加传递参数的示例如下: + ```
@@ -10,6 +11,7 @@
``` + ``` // comp.js export default { @@ -20,8 +22,10 @@ export default { } ``` + 子组件向上传递参数text,父组件接收时通过e.detail来获取参数: + ```
@@ -30,6 +34,7 @@ export default {
``` + ``` // xxx.js export default { @@ -41,4 +46,3 @@ export default { }, } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md index 37859f0bdc844ce60933aa8af7f9567866f2b68d..1f717b06caf73930e4bd415c68d6a301839ed43d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md @@ -1,7 +1,8 @@ -# 自定义事件 +# 自定义事件 子组件comp定义如下: + ```
@@ -10,6 +11,7 @@
``` + ``` /* comp.css */ .item { @@ -26,6 +28,7 @@ } ``` + ``` // comp.js export default { @@ -39,8 +42,10 @@ export default { } ``` + 引入子组件的示例如下: + ``` @@ -49,6 +54,7 @@ export default {
``` + ``` /* xxx.css */ .container { @@ -59,10 +65,10 @@ export default { } ``` + ``` // xxx.js export default { textClicked () {}, } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md index e4f6ad79419a23bf61e5dfbc7df524224ae47bf4..959fa1d089e8c60221555fae000d2dd4f3d896e1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md @@ -1,87 +1,24 @@ -# 生命周期定义 +# 生命周期定义 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API Version 5 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->从API Version 5 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 我们为自定义组件提供了一系列生命周期回调方法,便于开发者管理自定义组件的内部逻辑。生命周期主要包括:onInit,onAttached,onDetached,onLayoutReady,onDestroy,onPageShow和onPageHide。下面我们依次介绍一下各个生命周期回调的时机。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

触发时机

-

onInit

-

Function

-

初始化自定义组件

-

自定义组件初始化生命周期回调,当自定义组件创建时,触发该回调,主要用于自定义组件中必须使用的数据初始化,该回调只会触发一次调用。

-

onAttached

-

Function

-

自定义组件装载

-

自定义组件被创建后,加入到Page组件树时,触发该回调,该回调触发时,表示组件将被进行显示,该生命周期可用于初始化显示相关数据,通常用于加载图片资源、开始执行动画等场景。

-

onLayoutReady

-

Function

-

自定义组件布局完成

-

自定义组件插入Page组件树后,将会对自定义组件进行布局计算,调整其内容元素尺寸与位置,当布局计算结束后触发该回调。

-

onDetached

-

Function

-

自定义组件摘除

-

自定义组件摘除时,触发该回调,常用于停止动画或异步逻辑停止执行的场景。

-

onDestroy

-

Function

-

自定义组件销毁

-

自定义组件销毁时,触发该回调,常用于资源释放。

-

onPageShow

-

Function

-

自定义组件Page显示

-

自定义组件所在Page显示后,触发该回调。

-

onPageHide

-

Function

-

自定义组件Page隐藏

-

自定义组件所在Page隐藏后,触发该回调。

-
-## 示例 +| 属性 | 类型 | 描述 | 触发时机 | +| -------- | -------- | -------- | -------- | +| onInit | Function | 初始化自定义组件 | 自定义组件初始化生命周期回调,当自定义组件创建时,触发该回调,主要用于自定义组件中必须使用的数据初始化,该回调只会触发一次调用。 | +| onAttached | Function | 自定义组件装载 | 自定义组件被创建后,加入到Page组件树时,触发该回调,该回调触发时,表示组件将被进行显示,该生命周期可用于初始化显示相关数据,通常用于加载图片资源、开始执行动画等场景。 | +| onLayoutReady | Function | 自定义组件布局完成 | 自定义组件插入Page组件树后,将会对自定义组件进行布局计算,调整其内容元素尺寸与位置,当布局计算结束后触发该回调。 | +| onDetached | Function | 自定义组件摘除 | 自定义组件摘除时,触发该回调,常用于停止动画或异步逻辑停止执行的场景。 | +| onDestroy | Function | 自定义组件销毁 | 自定义组件销毁时,触发该回调,常用于资源释放。 | +| onPageShow | Function | 自定义组件Page显示 | 自定义组件所在Page显示后,触发该回调。 | +| onPageHide | Function | 自定义组件Page隐藏 | 自定义组件所在Page隐藏后,触发该回调。 | + + +## 示例 ``` @@ -113,4 +50,3 @@ export default { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md index 6e48255e0e20b5e727d291c39dd00f9039ffa75b..c92c4399ead3451fae3f0cf306a22f706601514a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md @@ -1,6 +1,7 @@ -# Props +# Props + +自定义组件可以通过props声明属性,父组件通过设置属性向子组件传递参数,props支持类型包括:String,Number,Boolean,Array,Object,Function。camelCase (驼峰命名法) 的 prop 名,在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式,即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props,通过父组件向下传递参数的示例如下: -自定义组件可以通过props声明属性,父组件通过设置属性向子组件传递参数,props支持类型包括:String,Number,Boolean,Array,Object,Function。camelCase \(驼峰命名法\) 的 prop 名,在外部父组件传递参数时需要使用 kebab-case \(短横线分隔命名\) 形式,即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props,通过父组件向下传递参数的示例如下: ``` @@ -9,6 +10,7 @@ ``` + ``` // comp.js export default { @@ -16,6 +18,7 @@ export default { } ``` + ``` @@ -24,10 +27,12 @@ export default { ``` ->![](../../public_sys-resources/icon-note.gif) **说明:** ->自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。 -## 添加默认值 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。 + + +## 添加默认值 子组件可以通过固定值default设置默认值,当父组件没有设置该属性时,将使用其默认值。此情况下props属性必须为对象形式,不能用数组形式,示例如下: @@ -59,7 +64,8 @@ export default { ``` -## 数据单向性 + +## 数据单向性 父子组件之间数据的传递是单向的,只能从父组件传递给子组件,子组件不能直接修改父组件传递下来的值,可以将props传入的值用data接收后作为默认值,再对data的值进行修改。 @@ -78,7 +84,8 @@ export default { } ``` -## $watch 感知数据改变 + +## $watch 感知数据改变 如果需要观察组件中属性变化,可以通过$watch方法增加属性变化回调。使用方法如下: @@ -95,7 +102,8 @@ export default { } ``` -## computed 计算属性 + +## computed 计算属性 自定义组件中经常需要在读取或设置某个属性时进行预先处理,提高开发效率,此种情况就需要使用computed字段。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发,使用方式如下: @@ -130,4 +138,3 @@ export default { ``` 这里声明的第一个计算属性message默认只有getter函数,message的值会取决于objTitle的值的变化。getter函数只能读取不能改变设值,当需要赋值给计算属性的时候可以提供一个setter函数,如示例中的notice。 - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md index 2a8c3934e4996dda2caa395e5270e1abfe917937..a318bbf7355eb926977a1809f8631f1a475b7541 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md @@ -1,9 +1,10 @@ -# slot插槽 +# slot插槽 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->从API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 -## 默认插槽 + +## 默认插槽 自定义组件中通过slot标签来承载父组件中定义的内容,使用slot标签可以更加灵活的控制自定义组件的内容元素,使用方式如下: @@ -16,7 +17,6 @@ ``` 引用该自定义组件方式如下: - ``` @@ -27,7 +27,8 @@ ``` -## 具名插槽 + +## 具名插槽 当自定义组件中需要使用多个插槽时,可通过对插槽命名的方式进行区分,当填充插槽内容时,通过声明插槽名称,将内容加到对应的插槽中。 @@ -41,7 +42,6 @@ ``` 引用该自定义组件方式如下: - ``` @@ -53,6 +53,5 @@ ``` ->![](../../public_sys-resources/icon-note.gif) **说明:** ->name 和 slot 属性不支持绑定动态数据。 - +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> name 和 slot 属性不支持绑定动态数据。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom.md index 4b91521dce6e38f3a24b4c9c4b172fa90ede5602..04d47d810da15e6231acdfabb016d5ee00ed6439 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom.md @@ -1,15 +1,15 @@ -# 自定义组件 +# 自定义组件 -- **[基本用法](js-components-custom-basic-usage.md)** -- **[自定义事件](js-components-custom-events.md)** -- **[Props](js-components-custom-props.md)** +- **[基本用法](js-components-custom-basic-usage.md)** -- **[事件参数](js-components-custom-event-parameter.md)** +- **[自定义事件](js-components-custom-events.md)** -- **[slot插槽](js-components-custom-slot.md)** +- **[Props](js-components-custom-props.md)** -- **[生命周期定义](js-components-custom-lifecycle.md)** +- **[事件参数](js-components-custom-event-parameter.md)** +- **[slot插槽](js-components-custom-slot.md)** +- **[生命周期定义](js-components-custom-lifecycle.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md index ae70830fb1c0f98cf1e8e910e839cf067daf4aa8..8c15ecf94c577e1e547f7b6f652f95a39d58367e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md @@ -1,44 +1,44 @@ -# 基本概念 +# 基本概念 -提供栅格布局效果,通过栅格系统进行元素布局,主要提供栅格容器组件。 +提供栅格布局效果,通过栅格系统进行元素布局,主要提供<grid-container><grid-row><grid-col>栅格容器组件。 -栅格系统作为一种辅助布局的定位工具,在平面设计和网站设计都起到了很好的作用,对移动设备对界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有: -1. 给布局提供一种可循的规律,解决多尺寸多设备的动态布局问题。 +栅格系统作为一种辅助布局的定位工具,在平面设计和网站设计都起到了很好的作用,对移动设备对界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有: -2. 给系统提供一种统一的定位标注,保证各模块各设备的布局一致性。 -3. 给应用提供一种灵活的间距调整方法,满足特殊场景布局调整的可能性。 +1. 给布局提供一种可循的规律,解决多尺寸多设备的动态布局问题。 +2. 给系统提供一种统一的定位标注,保证各模块各设备的布局一致性。 -## 栅格系统的概念 +3. 给应用提供一种灵活的间距调整方法,满足特殊场景布局调整的可能性。 -栅格系统有Margins、Gutters、Columns三个属性。 -1. Margins: +## 栅格系统的概念 - 是用来控制元素距离屏幕最边缘的距离关系,可以根据设备的不同尺寸,定义不同的Margin值作为断点系统中的统一规范。 +栅格系统有Margins、Gutters、Columns三个属性。 -2. Gutters: +1. Margins: - 是用来控制元素和元素之间的距离关系,可以根据设备的不同尺寸,定义不同的Gutters值作为断点系统中的统一规范。为了保证较好的视觉效果,Gutters通常的取值不会大于Margins的取值。 + 是用来控制元素距离屏幕最边缘的距离关系,可以根据设备的不同尺寸,定义不同的Margin值作为断点系统中的统一规范。 -3. Columns: +2. Gutters: - 是用来辅助布局的主要定位工具,不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的宽度在保证Margins和Gutters符合规范的情况下,根据实际设备的宽度和Columns数量自动计算每一个Columns的宽度。![](figures/zh-cn_image_0000001127125136.png) + 是用来控制元素和元素之间的距离关系,可以根据设备的不同尺寸,定义不同的Gutters值作为断点系统中的统一规范。为了保证较好的视觉效果,Gutters通常的取值不会大于Margins的取值。 - **栅格断点系统** +3. Columns: - 栅格系统定义了不同水平宽度设备对应Columns的数量关系,形成了一套断点规则定义。 + 是用来辅助布局的主要定位工具,不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的宽度在保证Margins和Gutters符合规范的情况下,根据实际设备的宽度和Columns数量自动计算每一个Columns的宽度。![zh-cn_image_0000001127125136](figures/zh-cn_image_0000001127125136.png) - 栅格系统以水平分辨率值作为断点依据,不同的设备根据自身当前水平宽度px值\(配置了autoDesignWidth为true\)在不同的断点范围内的情况,显示不同数量的栅格数。 + **栅格断点系统** - xs: 0<水平分辨率<320时:2 Columns栅格; + 栅格系统定义了不同水平宽度设备对应Columns的数量关系,形成了一套断点规则定义。 - sm: 320<=水平分辨率<600时:4 Columns栅格; + 栅格系统以水平分辨率值作为断点依据,不同的设备根据自身当前水平宽度px值(配置了autoDesignWidth为true)在不同的断点范围内的情况,显示不同数量的栅格数。 - md: 600<=水平分辨率<840时:8 Columns栅格; + xs: 0<水平分辨率<320时:2 Columns栅格; - lg: 840<=水平分辨率时:12 Columns栅格; + sm: 320<=水平分辨率<600时:4 Columns栅格; + md: 600<=水平分辨率<840时:8 Columns栅格; + lg: 840<=水平分辨率时:12 Columns栅格; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md index 76a19eae4f7615deab2bd5c4551cf6fcd87af18e..288ddd88a9923a9ca6a68973802993b10fe5b336 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md @@ -1,253 +1,66 @@ -# grid-col +# grid-col + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 grid-col是栅格布局容器grid-row的子容器组件。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持。 -## 属性 -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| xs | number\|object | - | 否 | 在分辨率为xs模式下,设置该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0} | +| sm | number\|object | - | 否 | 在分辨率为sm模式下,该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0} | +| md | number\|object | - | 否 | 在分辨率为md模式下,该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0} | +| lg | number\|object | - | 否 | 在分辨率为lg模式下,该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0} | +| span | number | 1 | 否 | 在未设置明确断点时,默认占用列数 | +| offset | number | 0 | 否 | 未设置具体分辨率模式下偏移时,当前元素延容器布局方向,默认偏移的列数 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

xs

-

number|object

-

-

-

-

在分辨率为xs模式下,设置该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0}

-

sm

-

number|object

-

-

-

-

在分辨率为sm模式下,该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0}

-

md

-

number|object

-

-

-

-

在分辨率为md模式下,该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0}

-

lg

-

number|object

-

-

-

-

在分辨率为lg模式下,该项占用列数与偏移列数,当值为number类型时,仅设置列数,也可通过object同时设置占用列数与偏移列数,如{"span": 1, "offset": 0}

-

span

-

number

-

1

-

-

在未设置明确断点时,默认占用列数

-

offset

-

number

-

0

-

-

未设置具体分辨率模式下偏移时,当前元素延容器布局方向,默认偏移的列数

-
-## 样式 +## 样式 -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-direction

-

string

-

row

-

-

flex容器主轴方向。可选项有:

-
  • column:垂直方向从上到下
  • row:水平方向从左到右
-

flex-wrap

-

string

-

nowrap

-

-

flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:

-
  • nowrap:不换行,单行显示。
  • wrap:换行,多行显示。
-

justify-content

-

string

-

flex-start

-

-

flex容器当前行的主轴对齐格式。可选项有:

-
  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。
-

align-items

-

string

-

stretch

-

-

flex容器当前行的交叉轴对齐格式,可选值为:

-
  • stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

-

交叉轴中有额外的空间时,多行内容对齐格式,可选值为:

-
  • flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-

display

-

string

-

flex

-

-

确定该元素视图框的类型,该值暂不支持动态修改。可选值为:

-
  • flex:弹性布局
  • grid:网格布局
  • none:不渲染此元素
-

grid-template-[columns|rows]

-

string

-

1行1列

-

-

用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。

-

示例:如设置grid-template-columns为:

-

(1) 50px 100px 60px:分三列,第一列50px,第二列100px,第三列60px;

-

(2) 1fr 1fr 2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;

-

(3) 30% 20% 50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;

-

(4) repeat(2,100px):分两列,第一列100px,第二列100px;

-

(5) auto 1fr 1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。

-

grid-[columns|rows]-gap

-

<length>

-

0

-

-

用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。

-

grid-row-[start|end]

-

number

-

-

-

-

用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。

-

grid-column-[start|end]

-

number

-

-

-

-

用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:
- column:垂直方向从上到下
- row:水平方向从左到右 | +| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:
- nowrap:不换行,单行显示。
- wrap:换行,多行显示。 | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:
- flex-start:项目位于容器的开头。
- flex-end:项目位于容器的结尾。
- center:项目位于容器的中心。
- space-between:项目位于各行之间留有空白的容器内。
- space-around:项目位于各行之前、之间、之后都留有空白的容器内。 | +| align-items | string | stretch | 否 | flex容器当前行的交叉轴对齐格式,可选值为:
- stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start:元素向交叉轴起点对齐。
- flex-end:元素向交叉轴终点对齐。
- center:元素在交叉轴居中。 | +| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
- flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | +| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
- flex:弹性布局
- grid:网格布局
- none:不渲染此元素 | +| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。
示例:如设置grid-template-columns为:
(1) 50px 100px 60px:分三列,第一列50px,第二列100px,第三列60px;
(2) 1fr 1fr 2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;
(3) 30% 20% 50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;
(4) repeat(2,100px):分两列,第一列100px,第二列100px;
(5) auto 1fr 1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 | +| grid-[columns\|rows]-gap | <length> | 0 | 否 | 用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 | +| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 | +| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 | ->![](../../public_sys-resources/icon-note.gif) **说明:** ->不支持宽度相关样式。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 不支持宽度相关样式。 -## 事件 -支持[通用事件](js-components-common-events.md)。 +## 事件 -## 方法 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -支持[通用方法](js-components-common-methods.md)。 -## 示例 +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 ``` @@ -300,5 +113,4 @@ export default { } ``` -![](figures/grid.gif) - +![zh-cn_image_0000001192960596](figures/zh-cn_image_0000001192960596.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md index 3e76f756fc28f489f9623b63933e5795942a15b4..eeac8459fa3584f5bc22adb03ed213f1b0051933 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md @@ -1,275 +1,76 @@ -# grid-container +# grid-container + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。 -## 权限列表 +## 权限列表 无 -## 子组件 -仅支持。 +## 子组件 + +仅支持<grid-row>。 + + +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下属性: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| columns | string \| number | auto | 否 | 设置当前布局总列数,使用string类型时仅支持auto,配置为auto时按照当前的sizetype决定总列数:
- xs:2列
- sm:4列
- md:8列
- lg:12列 | +| sizetype | string | auto | 否 | 设置当前栅格使用的响应尺寸类型,支持xs, sm, md, lg类型,使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。 | +| gutter | <length> | 24px | 否 | 设置Gutter宽度 | +| gridtemplate6+ | string | default | 否 | 当设置了columns和sizetype属性为auto时,可以设置栅格容器的布局模板,通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins,详见表 gridtemplate可选值说明。 | -## 属性 +**表1** gridtemplate可选值说明6+ -除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性: +| | 模板值 | 可响应的**栅格断点系统** | Columns | Margins(px) | Gutters(px) | +| -------- | -------- | -------- | -------- | -------- | -------- | +| 默认栅格 | default | xs | 2 | 12 | 12 | +| | | sm | 4 | 24 | 24 | +| | | md | 8 | 32 | 24 | +| | | lg | 12 |48|24| +| 宫格布局栅格 | grid | sm(0<设备水平分辨率<600px) | 4 | 24 | 12 | +| | | md | 8 |32|12| +| | | lg | 12 |48|12| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

columns

-

string | number

-

auto

-

-

设置当前布局总列数,使用string类型时仅支持auto,配置为auto时按照当前的sizetype决定总列数:

-
  • xs:2列
  • sm:4列
  • md:8列
  • lg:12列
-

sizetype

-

string

-

auto

-

-

设置当前栅格使用的响应尺寸类型,支持xs, sm, md, lg类型,使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。

-

gutter

-

<length>

-

24px

-

-

设置Gutter宽度

-

gridtemplate6+

-

string

-

default

-

-

当设置了columns和sizetype属性为auto时,可以设置栅格容器的布局模板,通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins,详见可选值说明

-
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> 本章中px单位是在js标签中配置了autoDesignWidth为true。6+ -**表 1** gridtemplate可选值说明6+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  

模板值

-

可响应的栅格断点系统

-

Columns

-

Margins(px)

-

Gutters(px)

-

默认栅格

-

default

-

xs

-

2

-

12

-

12

-

sm

-

4

-

24

-

24

-

md

-

8

-

32

-

24

-

lg

-

12

-

48

-

24

-

宫格布局栅格

-

grid

-

sm(0<设备水平分辨率<600px)

-

4

-

24

-

12

-

md

-

8

-

32

-

12

-

lg

-

12

-

48

-

12

-
+## 样式 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 本章中px单位是在js标签中配置了autoDesignWidth为true。6+ +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: -## 样式 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:
- flex-start:项目位于容器的开头。
- flex-end:项目位于容器的结尾。
- center:项目位于容器的中心。
- space-between:项目位于各行之间留有空白的容器内。
- space-around:项目位于各行之前、之间、之后都留有空白的容器内。 | +| align-items | string | stretch | 否 | flex容器当前行的交叉轴对齐格式,可选值为:
- stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start:元素向交叉轴起点对齐。
- flex-end:元素向交叉轴终点对齐。
- center:元素在交叉轴居中。 | +| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
- flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

justify-content

-

string

-

flex-start

-

-

flex容器当前行的主轴对齐格式。可选项有:

-
  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。
-

align-items

-

string

-

stretch

-

-

flex容器当前行的交叉轴对齐格式,可选值为:

-
  • stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

-

交叉轴中有额外的空间时,多行内容对齐格式,可选值为:

-
  • flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-
+## 事件 -## 事件 +支持[通用事件](../arkui-js/js-components-common-events.md)。 -支持[通用事件](js-components-common-events.md)。 -## 方法 +## 方法 -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

getColumns

-

-

-

返回栅格容器列数

-

getColumnWidth

-

-

-

返回栅格容器column宽度

-

getGutterWidth

-

-

-

返回栅格容器gutter宽度

-

getSizeType

-

-

-

返回当前容器响应尺寸类型(xs|sm|md|lg)

-
+| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| getColumns | - | 返回栅格容器列数 | +| getColumnWidth | - | 返回栅格容器column宽度 | +| getGutterWidth | - | 返回栅格容器gutter宽度 | +| getSizeType | - | 返回当前容器响应尺寸类型(xs\|sm\|md\|lg) | -## 示例 -详见[grid-col示例](js-components-grid-col.md#section2021865273710)。 +## 示例 +详见[grid-col示例](../arkui-js/js-components-grid-col.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md index 8e83bc573eec1279ca838f14a77762408b2d9b21..ffd6bb56ea2f26a5b596d323ff8f28e00a2033f5 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md @@ -1,98 +1,50 @@ -# grid-row +# grid-row + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 5开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 grid-row是栅格布局容器grid-container的子容器组件,使用flex横向布局,排列每个grid-col容器,justify-content与align-items默认为flex-start,支持折行显示。 -## 权限列表 +## 权限列表 无 -## 子组件 - -仅支持。 - -## 属性 - -支持[通用属性](js-components-common-attributes.md)。 - -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-wrap

-

string

-

nowrap

-

-

flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:

-
  • nowrap:不换行,单行显示。
  • wrap:换行,多行显示。
-

justify-content

-

string

-

flex-start

-

-

flex容器当前行的主轴对齐格式。可选项有:

-
  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。
-

align-items

-

string

-

flex-start

-

-

flex容器当前行的交叉轴对齐格式,可选值为:

-
  • stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

-

交叉轴中有额外的空间时,多行内容对齐格式,可选值为:

-
  • flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->不支持宽度相关样式。 - -## 事件 - -支持[通用事件](js-components-common-events.md)。 - -## 方法 - -支持[通用方法](js-components-common-methods.md)。 - -## 示例 - -详见[grid-col示例](js-components-grid-col.md#section2021865273710)。 +## 子组件 + +仅支持<grid-col>。 + + +## 属性 + +支持[通用属性](../arkui-js/js-components-common-attributes.md)。 + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:
- nowrap:不换行,单行显示。
- wrap:换行,多行显示。 | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:
- flex-start:项目位于容器的开头。
- flex-end:项目位于容器的结尾。
- center:项目位于容器的中心。
- space-between:项目位于各行之间留有空白的容器内。
- space-around:项目位于各行之前、之间、之后都留有空白的容器内。 | +| align-items | string | flex-start | 否 | flex容器当前行的交叉轴对齐格式,可选值为:
- stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start:元素向交叉轴起点对齐。
- flex-end:元素向交叉轴终点对齐。
- center:元素在交叉轴居中。 | +| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
- flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 不支持宽度相关样式。 + + +## 事件 + +支持[通用事件](../arkui-js/js-components-common-events.md)。 + + +## 方法 + +支持[通用方法](../arkui-js/js-components-common-methods.md)。 + + +## 示例 + +详见[grid-col示例](../arkui-js/js-components-grid-col.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid.md index f0657b7133f688ba305e6bd005ccb00dd156d078..03adf7973f4891cd858fd6d68ecb3503de07066a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid.md @@ -1,11 +1,11 @@ -# 栅格组件 +# 栅格组件 -- **[基本概念](js-components-grid-basic-concepts.md)** -- **[grid-container](js-components-grid-container.md)** -- **[grid-row](js-components-grid-row.md)** +- **[基本概念](js-components-grid-basic-concepts.md)** -- **[grid-col](js-components-grid-col.md)** +- **[grid-container](js-components-grid-container.md)** +- **[grid-row](js-components-grid-row.md)** +- **[grid-col](js-components-grid-col.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md index d026b711485c8e93fa21e8e315979ced3528b210..90071c93594d6a2ddbe6726a3f44ae49da643cb5 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md @@ -1,236 +1,75 @@ -# video +# video -视频播放组件。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 需要在config.json配置 -> ``` -> "configChanges": ["orientation"] -> ``` +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> +> - 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 需要在config.json配置 +> ``` +> "configChanges": ["orientation"] +> ``` + +视频播放组件。 -## 权限列表 -## 子组件 +## 子组件 不支持。 -## 属性 - -除支持[通用属性](js-components-common-attributes.md)外,还支持如下样式: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

muted

-

boolean

-

false

-

-

视频是否静音播放。

-

src

-

string

-

-

-

-

播放视频内容的路径。

-

autoplay

-

boolean

-

false

-

-

视频是否自动播放。

-

controls

-

boolean

-

true

-

-

控制视频播放的控制栏是否显示,如果设置为false,则不显示控制栏。默认为true,由系统决定显示或隐藏控制栏。

-
- -## 样式 - -除支持[通用样式](js-components-common-styles.md)外,还支持如下样式: - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

object-fit

-

string

-

contain

-

-

视频源的缩放类型,如果poster设置了值,那么此配置还会影响视频海报的缩放类型,可选值参考表1

-
- -**表 1** object-fit 类型说明 - - - - - - - - - - -

类型

-

描述

-

fill

-

不保持宽高比进行放大缩小,使得图片填充满显示边界。

-
- -## 事件 - -除支持[通用事件](js-components-common-events.md)外,还支持如下事件: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

prepared

-

{ duration: value }5+

-

视频准备完成时触发该事件,通过duration可以获取视频时长,单位为s。

-

start

-

-

-

播放时触发该事件。

-

pause

-

-

-

暂停时触发该事件。

-

finish

-

-

-

播放结束时触发该事件。

-

error

-

-

-

播放失败时触发该事件。

-

seeking

-

{ currenttime: value }

-

操作进度条过程时上报时间信息,单位为s。

-

seeked

-

{ currenttime: value }

-

操作进度条完成后,上报播放时间信息,单位为s。

-

timeupdate

-

{ currenttime: value }

-

播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。

-
- -## 方法 - -除支持[通用方法](js-components-common-methods.md)外,还支持如下方法: - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

请求播放视频。

-

pause

-

-

-

请求暂停播放视频。

-

setCurrentTime

-

{ currenttime: value }

-

指定视频播放的进度位置,单位为s。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明:** ->在attached组件生命周期回调后,可以调用上述组件方法。 +## 属性 + +除支持[通用属性](../arkui-js/js-components-common-attributes.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| muted | boolean | false | 否 | 视频是否静音播放。 | +| src | string | - | 否 | 播放视频内容的路径。 | +| autoplay | boolean | false | 否 | 视频是否自动播放。 | +| controls | boolean | true | 否 | 控制视频播放的控制栏是否显示,如果设置为false,则不显示控制栏。默认为true,由系统决定显示或隐藏控制栏。 | + + +## 样式 + +除支持[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| object-fit | string | contain | 否 | 视频源的缩放类型,如果poster设置了值,那么此配置还会影响视频海报的缩放类型,可选值参考表 object-fit 类型说明。 | + +**表1** object-fit 类型说明 + +| 类型 | 描述 | +| -------- | -------- | +| fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 | + + +## 事件 + +除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| prepared | { duration: value }5+ | 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为s。 | +| start | - | 播放时触发该事件。 | +| pause | - | 暂停时触发该事件。 | +| finish | - | 播放结束时触发该事件。 | +| error | - | 播放失败时触发该事件。 | +| seeking | { currenttime: value } | 操作进度条过程时上报时间信息,单位为s。 | +| seeked | { currenttime: value } | 操作进度条完成后,上报播放时间信息,单位为s。 | +| timeupdate | { currenttime: value } | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 | + + +## 方法 + +除支持[通用方法](../arkui-js/js-components-common-methods.md)外,还支持如下方法: + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| start | - | 请求播放视频。 | +| pause | - | 请求暂停播放视频。 | +| setCurrentTime | { currenttime: value } | 指定视频播放的进度位置,单位为s。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 在attached组件生命周期回调后,可以调用上述组件方法。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-media.md b/zh-cn/application-dev/reference/arkui-js/js-components-media.md index 3f561002ae7651e323b68aebb88077649738e20c..ab7993298a082ac12e1ebcc2223238794f11d296 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-media.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-media.md @@ -1,5 +1,5 @@ -# 媒体组件 +# 媒体组件 -- **[video](js-components-media-video.md)** +- **[video](js-components-media-video.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md index b0d01e9f97f8139c573318340e9ac73ab03a3cea..0a9654cadd1bd4bd616663e8abc0362c3a6a3bcb 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md @@ -1,198 +1,42 @@ -# animate +# animate -设置svg组件的属性动画。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +设置svg组件的属性动画。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

attributeName

-

string

-

-

-

-

设置需要进行动效的属性名。

-

begin

-

<time>

-

0

-

-

设置动效的延迟时间。

-

支持输入ms(毫秒)、s(秒)、m(分),默认为s(秒),其他格式不支持

-

dur

-

<time>

-

0

-

-

设置动效持续时间,如果dur没设置,按照end-begin的结果作为持续时间,小于等于0时,动效不触发。

-

支持输入ms(毫秒)、s(秒)、m(分),默认为s(秒),其他格式不支持

-

end

-

<time>

-

0

-

-

设置动效多久时间后结束。支持输入ms(毫秒)、s(秒)、m(分),默认为s(秒),其他格式不支持

-

repeatCount

-

<number | indefinite>

-

1

-

-

设置动画播放的次数,默认无限次播放(indefinite),可通过设置为数值1仅播放一次。

-

fill

-

<freeze | remove>

-

remove

-

-

设置动画结束时的状态。

-

calcMode

-

<discrete | linear | paced | spline>

-

linear

-

-

设置动画的插值模式。

-

discrete:阶跃,from值直接跳转到to的值;

-

linear:线性;

-

paced:线性,设置此项后keyTimes和keyPoints值无效

-

spline:自定义贝塞尔曲线,spline点定义在keyTimes属性中,每个时间间隔控制点由keySplines定义

-

keyTimes

-

string

-

-

-

-

设置关键帧动画的开始时间,值为0~1之间的数值用分号隔开,比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一

-

keySplines

-

string

-

-

-

-

与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线,曲线之间用分号隔开。曲线内的两个控制掉格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1

-

by

-

number

-

-

-

-

在动画中对某一指定属性,添加相对偏移值,from默认为原属性值。

-

from

-

string

-

-

-

-

设置需要进行动画的属性的开始值。

-

如果已经设置了values属性,则from失效。

-

to

-

string

-

-

-

-

设置需要进行动画的属性的结束值。

-

如果已经设置了values属性,则to都失效。

-

values

-

string

-

-

-

-

设置一组动画的变化值。格式为value1;value2;value3。

-
+## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| attributeName | string | - | 否 | 设置需要进行动效的属性名。 | +| begin | <time> | 0 | 否 | 设置动效的延迟时间。
支持输入ms(毫秒)、s(秒)、m(分),默认为s(秒),其他格式不支持 | +| dur | <time> | 0 | 否 | 设置动效持续时间,如果dur没设置,按照end-begin的结果作为持续时间,小于等于0时,动效不触发。
支持输入ms(毫秒)、s(秒)、m(分),默认为s(秒),其他格式不支持 | +| end | <time> | 0 | 否 | 设置动效多久时间后结束。支持输入ms(毫秒)、s(秒)、m(分),默认为s(秒),其他格式不支持 | +| repeatCount | <number \| indefinite> | 1 | 否 | 设置动画播放的次数,默认无限次播放(indefinite),可通过设置为数值1仅播放一次。 | +| fill | <freeze \| remove> | remove | 否 | 设置动画结束时的状态。 | +| calcMode | <discrete \| linear \| paced \| spline> | linear | 否 | 设置动画的插值模式。
discrete:阶跃,from值直接跳转到to的值;
linear:线性;
paced:线性,设置此项后keyTimes和keyPoints值无效
spline:自定义贝塞尔曲线,spline点定义在keyTimes属性中,每个时间间隔控制点由keySplines定义 | +| keyTimes | string | - | 否 | 设置关键帧动画的开始时间,值为0~1之间的数值用分号隔开,比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一 | +| keySplines | string | - | 否 | 与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线,曲线之间用分号隔开。曲线内的两个控制掉格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1 | +| by | number | - | 否 | 在动画中对某一指定属性,添加相对偏移值,from默认为原属性值。 | +| from | string | - | 否 | 设置需要进行动画的属性的开始值。
如果已经设置了values属性,则from失效。 | +| to | string | - | 否 | 设置需要进行动画的属性的结束值。
如果已经设置了values属性,则to都失效。 | +| values | string | - | 否 | 设置一组动画的变化值。格式为value1;value2;value3。 | + -## 示例 +## 示例 ``` @@ -206,7 +50,9 @@ ``` -![](figures/animate-1.gif) + +![zh-cn_image_0000001173324703](figures/zh-cn_image_0000001173324703.gif) + ``` @@ -220,7 +66,9 @@ ``` -![](figures/1-3.gif) + +![zh-cn_image_0000001167662852](figures/zh-cn_image_0000001167662852.gif) + ``` @@ -233,7 +81,9 @@ ``` -![](figures/animate-3.gif) + +![zh-cn_image_0000001127284938](figures/zh-cn_image_0000001127284938.gif) + ``` @@ -265,5 +115,5 @@ ``` -![](figures/animate-4.gif) +![zh-cn_image_0000001127125126](figures/zh-cn_image_0000001127125126.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md index ddb8f30d57873b357fcd5034c0f8839ec3ac21be..0c6874915cdc24d394332d087e97a38b9ff26a05 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md @@ -1,71 +1,33 @@ -# animateMotion +# animateMotion -路径动效。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +路径动效。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 - -支持animate属性\(values不生效\)和以下表格中的属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

keyPoints

-

string

-

-

-

-

一组关键帧的点位置,每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。

-

path

-

string

-

-

-

-

定义运动的路径,使用与path组件d属性相同的语法。

-

rotate

-

[auto | auto-reverse | <number>]

-

auto

-

-

-

设置动画对象的旋转方向

-
- -## 示例 + +## 属性 + +支持animate属性(values不生效)和以下表格中的属性。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| keyPoints | string | - | 是 | 一组关键帧的点位置,每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。 | +| path | string | - | 是 | 定义运动的路径,使用与path组件d属性相同的语法。 | +| rotate | [auto \| auto-reverse \| <number>] | auto | - | 设置动画对象的旋转方向 | + + +## 示例 ``` @@ -89,5 +51,5 @@ ``` -![](figures/2-4.gif) +![zh-cn_image_0000001213381209](figures/zh-cn_image_0000001213381209.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md index 47f29efe330e6aa6b675c73793b682223b910f31..cae336c9b05042825aac304e7d661c443e38829f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md @@ -1,51 +1,34 @@ -# animateTransform +# animateTransform + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 transform动效,支持的组件范围: -, , , , , , , ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 不支持。 -## 属性 + +## 属性 支持animate属性和以下表格中的属性。 - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

[translate | scale | rotate | skewX | skewY]

-

-

-

-

设置transform动画的类型

-
- -## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | [translate \| scale \| rotate \| skewX \| skewY] | - | 是 | 设置transform动画的类型 | + + +## 示例 ``` @@ -106,10 +89,13 @@ transform动效,支持的组件范围: } ``` -![](figures/animate-transform.gif) + +![zh-cn_image_0000001127285004](figures/zh-cn_image_0000001127285004.gif) + 动画叠加 + ```
@@ -144,6 +130,7 @@ transform动效,支持的组件范围:
``` + ``` /* xxx.css */ .container { @@ -161,10 +148,13 @@ transform动效,支持的组件范围: } ``` -![](figures/animate-transform2.gif) + +![zh-cn_image_0000001127125192](figures/zh-cn_image_0000001127125192.gif) + 涉及组件示例 + ```
@@ -211,6 +201,7 @@ transform动效,支持的组件范围:
``` + ``` /* xxx.css */ .container { @@ -228,5 +219,6 @@ transform动效,支持的组件范围: } ``` -![](figures/animate-transform3.gif) + +![zh-cn_image_0000001173324765](figures/zh-cn_image_0000001173324765.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md index ddbd7afe877068b275c2358e052566f7ead8538d..7ee5c552aa7540d8d2be194c726cc3e675e38c48 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md @@ -1,82 +1,34 @@ -# circle +# circle -圆形形状。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +圆形形状。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 - -支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

cx

-

<length>|<percentage>

-

0

-

-

设置圆心的x轴坐标。支持属性动画

-

cy

-

<length>|<percentage>

-

0

-

-

设置圆心的y轴坐标。支持属性动画

-

r

-

<length>|<percentage>

-

0

-

-

设置圆的半径。支持属性动画

-
- -## 示例 + +## 属性 + +支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| cx | <length>\|<percentage> | 0 | 否 | 设置圆心的x轴坐标。支持属性动画。 | +| cy | <length>\|<percentage> | 0 | 否 | 设置圆心的y轴坐标。支持属性动画。 | +| r | <length>\|<percentage> | 0 | 否 | 设置圆的半径。支持属性动画。 | + + +## 示例 ``` @@ -88,5 +40,5 @@ ``` -![](figures/zh-cn_image_0000001173164853.png) +![zh-cn_image_0000001173164853](figures/zh-cn_image_0000001173164853.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md index 83a90a2823b2153fe91d6950e8e83f525e148a43..4a07df766144fb030132dbf03a0eaa061896542d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md @@ -1,175 +1,21 @@ -# 通用属性 +# 通用属性 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

fill

-

<color>

-

black

-

-

使用简写属性设置元素的填充色。支持属性动画。

-

fill-opacity

-

number

-

1

-

-

填充色的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。

-

fill-rule

-

nonzero | evenodd

-

nonzero

-

-

nonzero:非零规则; evenodd:奇偶规则

-

opacity

-

number

-

1

-

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。

-

stroke

-

<color>

-

-

-

-

设置形状轮廓的颜色。支持属性动画。

-

stroke-dasharray

-

<string>

-

-

-

-

指定短划线和缺口的长度。格式为[length length length length],短划线和缺口的长度中间空格隔开成对出现。

-

stroke-dashoffset

-

<length>

-

0

-

-

设置关联虚线数组渲染时的偏移量。支持属性动画

-

stroke-linejoin

-

[bevel | miter | round]

-

miter

-

-

进行描边时在路径的拐角处使用的形状。

-

bevel:使用斜角连接路径段;

-

miter:使用尖角连接路径段;

-

round:使用圆角连接路径段。

-

stroke-linecap

-

[butt | round | square]

-

butt

-

-

路径描边时在它们的结尾处使用的形状。

-

butt:不在路径两端扩展;

-

round:在路径的末端延伸半个圆,直径等于线度。

-

square:在路径的末端延伸半个圆,宽度等于线宽的一半,高度等于线宽。

-

stroke-miterlimit

-

number

-

4

-

-

设置将锐角绘制成斜角的极限值。支持属性动画

-

stroke-opacity

-

number

-

1

-

-

轮廓线条的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画

-

stroke-width

-

<length>

-

1px

-

-

设置轮廓线条的宽度。支持属性动画

-

transform

-

<string>

-

-

-

-

设置组件以及子组件的坐标变换参数。

-

支持以下格式:

-

translate(<x> [<y>]) :沿x[y]轴方向平移

-

scale(<x> [<y>]) :沿x[y]轴缩放

-

rotate(<a> [<x> <y>]) :以(x,y)点进行旋转a度角

-

skewX(<a>) :沿x轴倾斜a度角的变换

-

skewY(<a>) :沿y轴倾斜a度角的变换

-
+| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| fill | <color> | black | 否 | 使用简写属性设置元素的填充色。支持属性动画。 | +| fill-opacity | number | 1 | 否 | 填充色的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。 | +| fill-rule | nonzero \| evenodd | nonzero | 否 | nonzero:非零规则; evenodd:奇偶规则 | +| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。 | +| stroke | <color> | - | 否 | 设置形状轮廓的颜色。支持属性动画。 | +| stroke-dasharray | <string> | - | 否 | 指定短划线和缺口的长度。格式为[length length length length],短划线和缺口的长度中间空格隔开成对出现。 | +| stroke-dashoffset | <length> | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 | +| stroke-linejoin | [bevel \| miter \| round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。
bevel:使用斜角连接路径段;
miter:使用尖角连接路径段;
round:使用圆角连接路径段。 | +| stroke-linecap | [butt \| round \| square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。
butt:不在路径两端扩展;
round:在路径的末端延伸半个圆,直径等于线度。
square:在路径的末端延伸半个圆,宽度等于线宽的一半,高度等于线宽。 | +| stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 | +| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画 | +| stroke-width | <length> | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 | +| transform | <string> | - | 否 | 设置组件以及子组件的坐标变换参数。
支持以下格式:
translate(<x> [<y>]) :沿x[y]轴方向平移
scale(<x> [<y>]) :沿x[y]轴缩放
rotate(<a> [<x> <y>]) :以(x,y)点进行旋转a度角
skewX(<a>) :沿x轴倾斜a度角的变换
skewY(<a>) :沿y轴倾斜a度角的变换 | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md index 46fd26dd93fee920c9c7606af6eab6b98528c9e2..9c69504f6a8a8488958f9c088fc7755359c5ae65 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md @@ -1,93 +1,35 @@ -# ellipse +# ellipse -椭圆形状。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +椭圆形状。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 - -支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

cx

-

<length>|<percentage>

-

0

-

-

设置椭圆的x轴坐标。支持属性动画

-

cy

-

<length>|<percentage>

-

0

-

-

设置椭圆的y轴坐标。支持属性动画

-

rx

-

<length>|<percentage>

-

0

-

-

设置椭圆x轴的半径。支持属性动画

-

ry

-

<length>|<percentage>

-

0

-

-

设置椭圆y轴的半径。支持属性动画

-
- -## 示例 + +## 属性 + +支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| cx | <length>\|<percentage> | 0 | 否 | 设置椭圆的x轴坐标。支持属性动画 | +| cy | <length>\|<percentage> | 0 | 否 | 设置椭圆的y轴坐标。支持属性动画 | +| rx | <length>\|<percentage> | 0 | 否 | 设置椭圆x轴的半径。支持属性动画 | +| ry | <length>\|<percentage> | 0 | 否 | 设置椭圆y轴的半径。支持属性动画 | + + +## 示例 ``` @@ -99,5 +41,5 @@ ``` -![](figures/zh-cn_image_0000001173164793.png) +![zh-cn_image_0000001173164793](figures/zh-cn_image_0000001173164793.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md index 78b0f4c506ec7fecaa21fbf93196b0c9fe62590c..ae898c10942f3eb31793a5cfcaeb4705fd94fc2c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md @@ -1,93 +1,35 @@ -# line +# line -绘制线条。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +绘制线条。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 + +## 属性 支持所列的Svg组件通用属性和以下表格的属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

x1

-

<length>|<percentage>

-

-

-

-

设置线条起点的x轴坐标。支持属性动画

-

y1

-

<length>|<percentage>

-

-

-

-

设置线条起点的y轴坐标。支持属性动画

-

x2

-

<length>|<percentage>

-

-

-

-

设置线条终点的x轴坐标。支持属性动画

-

y2

-

<length>|<percentage>

-

-

-

-

设置线条终点的y轴坐标。支持属性动画

-
- -## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| x1 | <length>\|<percentage> | - | 否 | 设置线条起点的x轴坐标。支持属性动画。 | +| y1 | <length>\|<percentage> | - | 否 | 设置线条起点的y轴坐标。支持属性动画。 | +| x2 | <length>\|<percentage> | - | 否 | 设置线条终点的x轴坐标。支持属性动画。 | +| y2 | <length>\|<percentage> | - | 否 | 设置线条终点的y轴坐标。支持属性动画。 | + + +## 示例 ``` @@ -103,5 +45,5 @@ ``` -![](figures/zh-cn_image_0000001127284954.png) +![zh-cn_image_0000001127284954](figures/zh-cn_image_0000001127284954.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md index 287f8897618ef53411a5b1e9b6ca600dd8a78136..ba7ba55af69649a3eeb813b18b6e24a5111726c4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md @@ -1,62 +1,32 @@ -# path +# path -绘制路径。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +绘制路径。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 - -支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性,设置的通用属性会传递给子组件。 - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

d

-

string

-

-

-

-

设置路径的形状。包含一组字符指令,大写字母为绝对路径,小写字符为相对路径。

-

字母指令表示的意义如下:

-
  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto
  • A/a = elliptical Arc
  • Z/z = closepath
-
- -## 示例 + +## 属性 + +支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性,设置的通用属性会传递给子组件。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| d | string | - | 否 | 设置路径的形状。包含一组字符指令,大写字母为绝对路径,小写字符为相对路径。
字母指令表示的意义如下:
- M/m = moveto
- L/l = lineto
- H/h = horizontal lineto
- V/v = vertical lineto
- C/c = curveto
- S/s = smooth curveto
- Q/q = quadratic Belzier curve
- T/t = smooth quadratic Belzier curveto
- A/a = elliptical Arc
- Z/z = closepath | + + +## 示例 ``` @@ -69,5 +39,5 @@ ``` -![](figures/zh-cn_image_0000001173164891.png) +![zh-cn_image_0000001173164891](figures/zh-cn_image_0000001173164891.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md index edd2d806a4d385c2c9710d13d500164e0d4888db..1f4c4870badaeef483b402e52a2ba7ff5cb280df 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md @@ -1,62 +1,32 @@ -# polygon +# polygon -绘制多边形。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +绘制多边形。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 - -支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

points

-

string

-

-

-

-

设置多边形的多个坐标点

-

格式为[x1,y1 x2,y2 x3,y3]。

-

支持属性动画,如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样,则无效

-
- -## 示例 + +## 属性 + +支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| points | string | - | 否 | 设置多边形的多个坐标点
格式为[x1,y1 x2,y2 x3,y3]。
支持属性动画,如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样,则无效 | + + +## 示例 ``` @@ -68,5 +38,5 @@ ``` -![](figures/zh-cn_image_0000001173324721.png) +![zh-cn_image_0000001173324721](figures/zh-cn_image_0000001173324721.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md index 1d34290e28c8fdbbbf6a6ce227a85922f61a1b24..4b39e2e6192a6f6b12914fa9a2fcf0efeb752a4b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md @@ -1,62 +1,32 @@ -# polyline +# polyline -绘制折线。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +绘制折线。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 + +## 属性 支持所列的Svg组件通用属性和以下表格的属性。 - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

points

-

string

-

-

-

-

设置折线的多个坐标点

-

格式为[x1,y1 x2,y2 x3,y3]。

-

支持属性动画,如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样,则无效

-
- -## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| points | string | - | 否 | 设置折线的多个坐标点
格式为[x1,y1 x2,y2 x3,y3]。
支持属性动画,如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样,则无效 | + + +## 示例 ``` @@ -68,5 +38,5 @@ ``` -![](figures/zh-cn_image_0000001173164845.png) +![zh-cn_image_0000001173164845](figures/zh-cn_image_0000001173164845.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md index 06b2c9bf17b8b55e5d68996e7052c9d600f1a0d6..5acb102656db19d94b4aa713cf78725e49318504 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md @@ -1,115 +1,37 @@ -# rect +# rect -用于绘制矩形、圆角矩形。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +用于绘制矩形、圆角矩形。 -## 权限列表 +## 权限列表 无 -## 子组件 + +## 子组件 支持animate、animateMotion、animateTransform。 -## 属性 - -支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

width

-

<length>|<percentage>

-

0

-

-

设置矩形的宽度。支持属性动画

-

height

-

<length>|<percentage>

-

0

-

-

设置矩形的高度。支持属性动画

-

x

-

<length>|<percentage>

-

0

-

-

设置矩形左上角x轴坐标。支持属性动画

-

y

-

<length>|<percentage>

-

0

-

-

设置矩形左上角y轴坐标。支持属性动画

-

rx

-

<length>|<percentage>

-

0

-

-

设置矩形圆角x方向半径。支持属性动画

-

ry

-

<length>|<percentage>

-

0

-

-

设置矩形圆角y方向半径。支持属性动画

-
- -## 示例 + +## 属性 + +支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| width | <length>\|<percentage> | 0 | 否 | 设置矩形的宽度。支持属性动画 | +| height | <length>\|<percentage> | 0 | 否 | 设置矩形的高度。支持属性动画 | +| x | <length>\|<percentage> | 0 | 否 | 设置矩形左上角x轴坐标。支持属性动画 | +| y | <length>\|<percentage> | 0 | 否 | 设置矩形左上角y轴坐标。支持属性动画 | +| rx | <length>\|<percentage> | 0 | 否 | 设置矩形圆角x方向半径。支持属性动画 | +| ry | <length>\|<percentage> | 0 | 否 | 设置矩形圆角y方向半径。支持属性动画 | + + +## 示例 ``` @@ -124,5 +46,5 @@ ``` -![](figures/0.png) +![zh-cn_image_0000001212053183](figures/zh-cn_image_0000001212053183.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md index 778a5a80b4fd16ef350e80fee55a81172fe58d6c..34b96424911c9594abf9762fe4ccbef11ef9e741 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md @@ -1,184 +1,49 @@ -# text +# text 文本,用于呈现一段信息。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->- 文本的展示内容需要写在元素标签内,可嵌套tspan子元素标签分段,可嵌套textPath子元素标签按指定路径绘制。 ->- 只支持被父元素标签svg嵌套。 ->- 只支持默认字体sans-serif。 -## 权限列表 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 文本的展示内容需要写在元素标签内,可嵌套tspan子元素标签分段,可嵌套textPath子元素标签按指定路径绘制。 +> +> - 只支持被父元素标签svg嵌套。 +> +> - 只支持默认字体sans-serif。 + +## 权限列表 无 -## 子组件 + +## 子组件 支持tspan、textpath、animate、animateTransform。 -## 属性 -支持以下表格中的属性。 +## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

x

-

<length>|<percentage>

-

0

-

-

设置组件左上角x轴坐标

-

y

-

<length>|<percentage>

-

0

-

-

设置组件左上角y轴坐标

-

dx

-

<length>|<percentage>

-

0

-

-

设置文本x轴偏移

-

dy

-

<length>|<percentage>

-

0

-

-

设置文本y轴偏移

-

rotate

-

number

-

0

-

-

字体以左下角为圆心旋转角度,正数顺时针,负数逆时针

-

font-size

-

<length>

-

30px

-

-

设置文本的尺寸。

-

fill

-

<color>

-

black

-

-

字体填充颜色

-

fill-opacity

-

number

-

1.0

-

-

字体填充透明度

-

opacity

-

number

-

1

-

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。

-

stroke

-

<color>

-

black

-

-

绘制字体边框并指定颜色

-

stroke-width

-

number

-

1px

-

-

字体边框宽度

-

stroke-opacity

-

number

-

1.0

-

-

字体边框透明度

-
+支持以下表格中的属性。 -## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| x | <length>\|<percentage> | 0 | 否 | 设置组件左上角x轴坐标 | +| y | <length>\|<percentage> | 0 | 否 | 设置组件左上角y轴坐标 | +| dx | <length>\|<percentage> | 0 | 否 | 设置文本x轴偏移 | +| dy | <length>\|<percentage> | 0 | 否 | 设置文本y轴偏移 | +| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度,正数顺时针,负数逆时针 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| fill | <color> | black | 否 | 字体填充颜色 | +| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | +| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。 | +| stroke | <color> | black | 否 | 绘制字体边框并指定颜色 | +| stroke-width | number | 1px | 否 | 字体边框宽度 | +| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | + + +## 示例 ``` /* xxx.css */ @@ -209,7 +74,7 @@ ``` -![](figures/text-part1.png) +![zh-cn_image_0000001173324697](figures/zh-cn_image_0000001173324697.png) 属性动画示例 @@ -238,7 +103,7 @@ ``` -![](figures/text-animate-part1.gif) +![zh-cn_image_0000001173324699](figures/zh-cn_image_0000001173324699.gif) ``` @@ -253,7 +118,7 @@ ``` -![](figures/text-animate-part2.gif) +![zh-cn_image_0000001173164783](figures/zh-cn_image_0000001173164783.gif) ``` @@ -272,5 +137,4 @@ ``` -![](figures/text-animate-part3.gif) - +![zh-cn_image_0000001127125122](figures/zh-cn_image_0000001127125122.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md index 083819fcf9490f8c4715e01a2905c787dcc4ebaa..eb9ffb6b56a46074c29f4017ba3a0b2fcd78ade6 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -1,165 +1,49 @@ -# textPath +# textPath 沿路径绘制文本。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->- 按指定的路径绘制文本,可嵌套子标签tspan分段。 ->- 只支持被父元素标签text嵌套。 -## 权限列表 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 按指定的路径绘制文本,可嵌套子标签tspan分段。 +> +> - 只支持被父元素标签text嵌套。 + +## 权限列表 无 -## 子组件 + +## 子组件 tspan。 -## 属性 + +## 属性 + 支持以下表格中的属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

path

-

string

-

0

-

-

设置路径的形状。

-

字母指令表示的意义如下:

-
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
-

startOffset

-

<length>|<percentage>

-

0

-

-

设置文本沿path绘制的起始偏移。

-

font-size

-

<length>

-

30px

-

-

设置文本的尺寸。

-

fill

-

<color>

-

black

-

-

字体填充颜色

-

by

-

number

-

-

-

-

相对被指定动画的属性偏移值,from默认为原属性值。

-

opacity

-

number

-

1

-

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。

-

fill-opacity

-

number

-

1.0

-

-

字体填充透明度

-

stroke

-

<color>

-

black

-

-

绘制字体边框并指定颜色

-

stroke-width

-

number

-

1px

-

-

字体边框宽度

-

stroke-opacity

-

number

-

1.0

-

-

字体边框透明度

-
- -## 示例 - -textspan属性示例,textpath文本内容沿着属性path中的路径绘制文本,起点偏移20%的path长度。(绘制的元素曲线仅做参照) + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| path | string | 0 | 是 | 设置路径的形状。
字母指令表示的意义如下:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath | +| startOffset | <length>\|<percentage> | 0 | 否 | 设置文本沿path绘制的起始偏移。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| fill | <color> | black | 否 | 字体填充颜色 | +| by | number | - | 否 | 相对被指定动画的属性偏移值,from默认为原属性值。 | +| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。 | +| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | +| stroke | <color> | black | 否 | 绘制字体边框并指定颜色 | +| stroke-width | number | 1px | 否 | 字体边框宽度 | +| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | + + +## 示例 + +textspan属性示例,textpath文本内容沿着属性path中的路径绘制文本,起点偏移20%的path长度。(绘制的元素<path>曲线仅做参照) ``` /* xxx.css */ @@ -186,7 +70,7 @@ textspan属性示例,textpath文本内容沿着属性path中的路径绘制文 ``` -![](figures/textPath-part1.png) +![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png) textpath与tspan组合示例与效果图 @@ -206,7 +90,7 @@ textpath与tspan组合示例与效果图 ``` -![](figures/textPath-part2.png) +![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png) ``` @@ -226,7 +110,7 @@ textpath与tspan组合示例与效果图 ``` -![](figures/textPath-part3.png) +![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png) ``` @@ -247,7 +131,7 @@ textpath与tspan组合示例与效果图 ``` -![](figures/textPath-part4.png) +![zh-cn_image_0000001127284930](figures/zh-cn_image_0000001127284930.png) startOffset属性动画,文本绘制时起点偏移从10%运动到40%,不绘制超出path长度范围的文本。 @@ -279,7 +163,7 @@ startOffset属性动画,文本绘制时起点偏移从10%运动到40%,不绘 ``` -![](figures/textpath-animate1.gif) +![zh-cn_image_0000001127125118](figures/zh-cn_image_0000001127125118.gif) textpath与tspan组合属性动画与效果图 @@ -310,13 +194,13 @@ textpath与tspan组合属性动画与效果图 ``` -![](figures/textpath-animate2.gif) +![zh-cn_image_0000001173324693](figures/zh-cn_image_0000001173324693.gif) -\(1\) "tspan attribute x|rotate" 文本绘制起点偏移从50px运动到100px,顺时针旋转0度到360度。 +(1) "tspan attribute x|rotate" 文本绘制起点偏移从50px运动到100px,顺时针旋转0度到360度。 -\(2\) "tspan attribute dx|opacity" 在 "tspan static." 绘制结束后再开始绘制,向后偏移量从0%运动到30%,透明度从浅到深变化。 +(2) "tspan attribute dx|opacity" 在 "tspan static." 绘制结束后再开始绘制,向后偏移量从0%运动到30%,透明度从浅到深变化。 -\(3\) "tspan move" 在上一段tspan绘制完成后,向后偏移5%的距离进行绘制,呈现跟随前一段tspan运动的效果。 +(3) "tspan move" 在上一段tspan绘制完成后,向后偏移5%的距离进行绘制,呈现跟随前一段tspan运动的效果。 textpath与tspan组合属性动画与效果图 @@ -346,15 +230,15 @@ textpath与tspan组合属性动画与效果图 ``` -![](figures/textpath-animate3.gif) +![zh-cn_image_0000001173164779](figures/zh-cn_image_0000001173164779.gif) -\(1\) "This is TextPath." 在path上无偏移绘制第一段文本内容,大小30px,颜色"\#D2691E"。 +(1) "This is TextPath." 在path上无偏移绘制第一段文本内容,大小30px,颜色"\#D2691E"。 -\(2\) "tspan attribute fill|fill-opacity" 相对上一段文本结束后偏移20px,颜色从蓝到红,透明度从浅到深。 +(2) "tspan attribute fill|fill-opacity" 相对上一段文本结束后偏移20px,颜色从蓝到红,透明度从浅到深。 -\(3\) "tspan attribute font-size" 绘制起点相对上一段结束后偏移20px,起点静止,字体大小从10px到50px,整体长度持续拉长。 +(3) "tspan attribute font-size" 绘制起点相对上一段结束后偏移20px,起点静止,字体大小从10px到50px,整体长度持续拉长。 -\(4\) "Single tspan" 在上一段的尾部做水平绘制,呈现跟随上一段运动的效果。 +(4) "Single tspan" 在上一段的尾部做水平绘制,呈现跟随上一段运动的效果。 textpath与tspan组合属性动画与效果图 @@ -383,9 +267,8 @@ textpath与tspan组合属性动画与效果图 ``` -![](figures/textpath-animate4.gif) - -\(1\) "tspan attribute stroke" 轮廓颜色从红色逐渐转变成绿色。 +![zh-cn_image_0000001127284924](figures/zh-cn_image_0000001127284924.gif) -\(2\) "tspan attribute stroke-width-opacity" 轮廓宽度从细1px转变粗5px,透明度从浅到深。 +(1) "tspan attribute stroke" 轮廓颜色从红色逐渐转变成绿色。 +(2) "tspan attribute stroke-width-opacity" 轮廓宽度从细1px转变粗5px,透明度从浅到深。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md index c89915027092da110534ea95b9a39942eb23c092..0a1cb24abbce6d468d31e08aba802c1d1c4b3367 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md @@ -1,179 +1,46 @@ -# tspan +# tspan ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->- 文本的展示内容需要写在元素标签内,可嵌套子元素标签tspan分段。 ->- 文本分段,只支持被父元素标签svg嵌套。 +添加文本样式。 -## 权限列表 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 文本的展示内容需要写在元素标签内,可嵌套子元素标签tspan分段。 +> +> - 文本分段,只支持被父元素标签svg嵌套。 + +## 权限列表 无 -## 子组件 + +## 子组件 支持tspan。 + 支持以下表格中的属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

x

-

<length>|<percentage>

-

0

-

-

设置组件左上角x轴坐标

-

y

-

<length>|<percentage>

-

0

-

-

设置组件左上角y轴坐标。作为textpath子组件时失效。

-

dx

-

<length>|<percentage>

-

0

-

-

设置文本x轴偏移

-

dy

-

<length>|<percentage>

-

0

-

-

设置文本y轴偏移。作为textpath子组件时失效。

-

rotate

-

number

-

0

-

-

字体以左下角为圆心旋转角度,正数顺时针,负数逆时针

-

font-size

-

<length>

-

30px

-

-

设置文本的尺寸。

-

fill

-

<color>

-

black

-

-

字体填充颜色

-

opacity

-

number

-

1

-

-

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。

-

fill-opacity

-

number

-

1.0

-

-

字体填充透明度

-

stroke

-

<color>

-

black

-

-

绘制字体边框并指定颜色

-

stroke-width

-

number

-

1px

-

-

字体边框宽度

-

stroke-opacity

-

number

-

1.0

-

-

字体边框透明度

-
-## 示例 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| x | <length>\|<percentage> | 0 | 否 | 设置组件左上角x轴坐标。 | +| y | <length>\|<percentage> | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 | +| dx | <length>\|<percentage> | 0 | 否 | 设置文本x轴偏移。 | +| dy | <length>\|<percentage> | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 | +| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度,正数顺时针,负数逆时针。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| fill | <color> | black | 否 | 字体填充颜色。 | +| opacity | number | 1 | 否 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画。 | +| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 | +| stroke | <color> | black | 否 | 绘制字体边框并指定颜色。 | +| stroke-width | number | 1px | 否 | 字体边框宽度。 | +| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 | + + +## 示例 ``` /* xxx.css */ @@ -206,7 +73,7 @@ ``` -![](figures/tspan-part1.png) +![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png) 属性动画示例 @@ -244,7 +111,7 @@ ``` -![](figures/tspan-animate-part1.gif) +![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif) ``` @@ -261,7 +128,7 @@ ``` -![](figures/tspan-animate-part2.gif) +![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif) ``` @@ -277,7 +144,7 @@ ``` -![](figures/tspan-animate-part3.gif) +![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif) ``` @@ -300,5 +167,4 @@ ``` -![](figures/tspan-animate-part4.gif) - +![zh-cn_image_0000001127125200](figures/zh-cn_image_0000001127125200.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md index 261829752b595e3c5a294a7a285f455786490b13..85eeaf0f798849d7f018066e8f7344d6339e2d40 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md @@ -1,104 +1,38 @@ -# svg +# svg 基础容器,主要作为svg的根节点使用,也可以在svg中嵌套使用。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->- 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->- svg父组件或者svg组件需要定义宽高值,否则不进行绘制。 -## 权限列表 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> - 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - svg父组件或者svg组件需要定义宽高值,否则不进行绘制。 + +## 权限列表 无 -## 子组件 + +## 子组件 支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。 -## 属性 - -支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性,设置的通用属性会传递给子组件。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

-

组件的唯一标识。

-

width

-

<length>|<percentage>

-

-

-

-

设置组件的宽度

-

height

-

<length>|<percentage>

-

-

-

-

设置组件的高度

-

x

-

<length>|<percentage>

-

-

-

-

设置当前svg的x轴坐标,根svg节点无效

-

y

-

<length>|<percentage>

-
  

-

设置当前svg的y轴坐标,根svg节点无效

-

viewBox

-

string

-

-

-

-

设置当前svg的视口。支持的格式为<number number number number>,4个参数分别表示min-x, min-y, width and height,viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。

-
- -## 示例 + +## 属性 + +支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性,设置的通用属性会传递给子组件。 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| width | <length>\|<percentage> | - | 否 | 设置组件的宽度。 | +| height | <length>\|<percentage> | - | 否 | 设置组件的高度。 | +| x | <length>\|<percentage> | - | 否 | 设置当前svg的x轴坐标,根svg节点无效。 | +| y | <length>\|<percentage> | | 否 | 设置当前svg的y轴坐标,根svg节点无效。 | +| viewBox | string | - | 否 | 设置当前svg的视口。支持的格式为<number number number number>,4个参数分别表示min-x, min-y, width and height,viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。 | + + +## 示例 ``` @@ -118,5 +52,5 @@ ``` -![](figures/zh-cn_image_0000001173164789.png) +![zh-cn_image_0000001173164789](figures/zh-cn_image_0000001173164789.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components.md b/zh-cn/application-dev/reference/arkui-js/js-components.md index 611910fda1fbd94fb415ad74e628255f01c1b5bf..c6f4fa44f91fae98d13f762a9a4133a68d17f395 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components.md @@ -1,17 +1,17 @@ -# 组件 +# 组件 -- **[通用](js-components-common.md)** -- **[容器组件](js-components-container.md)** -- **[基础组件](js-components-basic.md)** +- **[通用](js-components-common.md)** -- **[媒体组件](js-components-media.md)** +- **[容器组件](js-components-container.md)** -- **[画布组件](js-components-canvas.md)** +- **[基础组件](js-components-basic.md)** -- **[栅格组件](js-components-grid.md)** +- **[媒体组件](js-components-media.md)** -- **[svg组件](js-svg.md)** +- **[画布组件](js-components-canvas.md)** +- **[栅格组件](js-components-grid.md)** +- **[svg组件](js-svg.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md index 3839b5cfc0ca3c7efdb5384a16673c5f02a45267..d653c4fd91115bae20695536326c9e2563aeb7c7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md @@ -1,333 +1,223 @@ -# OffscreenCanvasRenderingContext2D对象 +# OffscreenCanvasRenderingContext2D对象 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ->![](../../public_sys-resources/icon-note.gif) **说明:** ->从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制,绘制对象可以是矩形、文本、图片等 -## 属性 + +## 属性 除支持与CanvasRenderingContext2D对象相同的属性外,还支持如下属性: - - - - - - - - - - -

属性

-

类型

-

描述

-

filter

-

string

-

设置图像的滤镜。

-

支持的滤镜效果如下:

-
  • blur:给图像设置高斯模糊
  • brightness:给图片应用一种线性乘法,使其看起来更亮或更暗
  • contrast:调整图像的对比度
  • drop-shadow:给图像设置一个阴影效果
  • grayscale:将图像转换为灰度图像
  • hue-rotate:给图像应用色相旋转
  • invert:反转输入图像
  • opacity:转化图像的透明程度
  • saturate:转换图像饱和度
  • sepia:将图像转换为深褐色
-
- -- 示例 - - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow(){ - var ctx = this.$refs.canvasId.getContext('2d'); - var offscreen = new OffscreenCanvas(360, 500); - var offCanvas2 = offscreen.getContext("2d"); - var img = new Image(); - img.src = 'common/images/flower.jpg'; - offCanvas2.drawImage(img, 0, 0, 100, 100); - offCanvas2.filter = 'blur(5px)'; - offCanvas2.drawImage(img, 100, 0, 100, 100); - - offCanvas2.filter = 'grayscale(50%)'; - offCanvas2.drawImage(img, 200, 0, 100, 100); - - offCanvas2.filter = 'hue-rotate(90deg)'; - offCanvas2.drawImage(img, 0, 100, 100, 100); - - offCanvas2.filter = 'invert(100%)'; - offCanvas2.drawImage(img, 100, 100, 100, 100); - - offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; - offCanvas2.drawImage(img, 200, 100, 100, 100); - - offCanvas2.filter = 'brightness(0.4)'; - offCanvas2.drawImage(img, 0, 200, 100, 100); - - offCanvas2.filter = 'opacity(25%)'; - offCanvas2.drawImage(img, 100, 200, 100, 100); - - offCanvas2.filter = 'saturate(30%)'; - offCanvas2.drawImage(img, 200, 200, 100, 100); - - offCanvas2.filter = 'sepia(60%)'; - offCanvas2.drawImage(img, 0, 300, 100, 100); - - offCanvas2.filter = 'contrast(200%)'; - offCanvas2.drawImage(img, 100, 300, 100, 100); - var bitmap = offscreen.transferToImageBitmap(); - ctx.transferFromImageBitmap(bitmap); - } +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| filter | string | 设置图像的滤镜。
支持的滤镜效果如下:
- blur:给图像设置高斯模糊
- brightness:给图片应用一种线性乘法,使其看起来更亮或更暗
- contrast:调整图像的对比度
- drop-shadow:给图像设置一个阴影效果
- grayscale:将图像转换为灰度图像
- hue-rotate:给图像应用色相旋转
- invert:反转输入图像
- opacity:转化图像的透明程度
- saturate:转换图像饱和度
- sepia:将图像转换为深褐色 | + +- 示例 + ``` + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow(){ + var ctx = this.$refs.canvasId.getContext('2d'); + var offscreen = new OffscreenCanvas(360, 500); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/flower.jpg'; + offCanvas2.drawImage(img, 0, 0, 100, 100); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 100, 0, 100, 100); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 200, 0, 100, 100); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 100, 100, 100); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 100, 100, 100, 100); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 200, 100, 100, 100); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 200, 100, 100); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 100, 200, 100, 100); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 200, 200, 100, 100); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 300, 100, 100); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 100, 300, 100, 100); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); } - ``` + } + ``` - ![](figures/c3.png) + ![zh-cn_image_0000001152773860](figures/zh-cn_image_0000001152773860.png) -## 方法 +## 方法 除支持与CanvasRenderingContext2D对象相同的方法外,还支持如下方法: -### isPointInPath -isPointInPath\(path?: Path2D, x: number, y: number\): boolean +### isPointInPath + +isPointInPath(path?: Path2D, x: number, y: number): boolean 判断指定点是否在路径的区域内。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

path

-

Path2D

-

-

可选对象,指定用来判断的路径。若没有设置,则使用当前路径。

-

x

-

number

-

-

待判断点的x轴坐标。

-

y

-

number

-

-

待判断点的y轴坐标。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

boolean

-

指定点是否在路径的区域内。

-
- -- 示例 - - ``` - -
- In path:{{textValue}} - -
- ``` - - ``` - // xxx.js - export default { - data: { - textValue: 0 - }, - onShow(){ - var canvas = this.$refs.canvas.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); - - offscreenCanvasCtx.rect(10, 10, 100, 100); - offscreenCanvasCtx.fill(); - this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); - - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); - } +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | path | Path2D | 否 | 可选对象,指定用来判断的路径。若没有设置,则使用当前路径。 | + | x | number | 是 | 待判断点的x轴坐标。 | + | y | number | 是 | 待判断点的y轴坐标。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | boolean | 指定点是否在路径的区域内。 | + +- 示例 + ``` + +
+ In path:{{textValue}} + +
+ ``` + + ``` + // xxx.js + export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.fill(); + this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); } - ``` + } + ``` - ![](figures/zh-cn_image_0000001224354967.png) + ![zh-cn_image_0000001224354967](figures/zh-cn_image_0000001224354967.png) -### isPointInStroke +### isPointInStroke -isPointInStroke\(path?: Path2D, x: number, y: number\): boolean +isPointInStroke(path?: Path2D, x: number, y: number): boolean 判断指定点是否在路径的边缘线上。 -- 参数 - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

参数类型

-

必填

-

描述

-

path

-

Path2D

-

-

可选对象,指定用来判断的路径。若没有设置,则使用当前路径。

-

x

-

number

-

-

待判断点的x轴坐标。

-

y

-

number

-

-

待判断点的y轴坐标。

-
- -- 返回值 - - - - - - - - - -

类型

-

说明

-

boolean

-

指定点是否在路径的区域内。

-
- -- 示例 - - ``` - -
- In path:{{textValue}} - -
- ``` - - ``` - // xxx.js - export default { - data: { - textValue: 0 - }, - onShow(){ - var canvas = this.$refs.canvas.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); - - offscreenCanvasCtx.rect(10, 10, 100, 100); - offscreenCanvasCtx.stroke(); - this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); - - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); - } - } - ``` - - ![](figures/zh-cn_image_0000001178875308.png) - - -### resetTransform - -resetTransform\(\): void - -- 示例 - - ``` - -
- In path:{{textValue}} - -
- ``` - - ``` - //xxx.js - export default { - data:{ - textValue:0 - }, - onShow(){ - var canvas = this.$refs.canvas.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); - - offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); - offscreenCanvasCtx.fillStyle = 'gray'; - offscreenCanvasCtx.fillRect(40, 40, 50, 20); - offscreenCanvasCtx.fillRect(40, 90, 50, 20); - - // Non-skewed rectangles - offscreenCanvasCtx.resetTransform(); - offscreenCanvasCtx.fillStyle = 'red'; - offscreenCanvasCtx.fillRect(40, 40, 50, 20); - offscreenCanvasCtx.fillRect(40, 90, 50, 20); - - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); - } - } - ``` - - ![](figures/zh-cn_image_0000001179035242.png) - +- 参数 + | 参数名 | 参数类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | path | Path2D | 否 | 可选对象,指定用来判断的路径。若没有设置,则使用当前路径。 | + | x | number | 是 | 待判断点的x轴坐标。 | + | y | number | 是 | 待判断点的y轴坐标。 | + +- 返回值 + | 类型 | 说明 | + | -------- | -------- | + | boolean | 指定点是否在路径的区域内。 | + +- 示例 + ``` + +
+ In path:{{textValue}} + +
+ ``` + + ``` + // xxx.js + export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.stroke(); + this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + } + ``` + + ![zh-cn_image_0000001178875308](figures/zh-cn_image_0000001178875308.png) + + +### resetTransform + +resetTransform(): void + +- 示例 + ``` + +
+ In path:{{textValue}} + +
+ ``` + + ``` + //xxx.js + export default { + data:{ + textValue:0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); + offscreenCanvasCtx.fillStyle = 'gray'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); + + // Non-skewed rectangles + offscreenCanvasCtx.resetTransform(); + offscreenCanvasCtx.fillStyle = 'red'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + } + ``` + + ![zh-cn_image_0000001179035242](figures/zh-cn_image_0000001179035242.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-svg.md b/zh-cn/application-dev/reference/arkui-js/js-svg.md index b308a4d49cffb56963874cb9f9c5643d83da14bf..ee133a95eaf926f2964a0fafe3fa75e4d1551fe8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-svg.md +++ b/zh-cn/application-dev/reference/arkui-js/js-svg.md @@ -1,33 +1,33 @@ -# svg组件 +# svg组件 -- **[通用属性](js-components-svg-common-attributes.md)** -- **[svg](js-components-svg.md)** -- **[rect](js-components-svg-rect.md)** +- **[通用属性](js-components-svg-common-attributes.md)** -- **[circle](js-components-svg-circle.md)** +- **[svg](js-components-svg.md)** -- **[ellipse](js-components-svg-ellipse.md)** +- **[rect](js-components-svg-rect.md)** -- **[path](js-components-svg-path.md)** +- **[circle](js-components-svg-circle.md)** -- **[line](js-components-svg-line.md)** +- **[ellipse](js-components-svg-ellipse.md)** -- **[polyline](js-components-svg-polyline.md)** +- **[path](js-components-svg-path.md)** -- **[polygon](js-components-svg-polygon.md)** +- **[line](js-components-svg-line.md)** -- **[text](js-components-svg-text.md)** +- **[polyline](js-components-svg-polyline.md)** -- **[tspan](js-components-svg-tspan.md)** +- **[polygon](js-components-svg-polygon.md)** -- **[textPath](js-components-svg-textpath.md)** +- **[text](js-components-svg-text.md)** -- **[animate](js-components-svg-animate.md)** +- **[tspan](js-components-svg-tspan.md)** -- **[animateMotion](js-components-svg-animatemotion.md)** +- **[textPath](js-components-svg-textpath.md)** -- **[animateTransform](js-components-svg-animatetransform.md)** +- **[animate](js-components-svg-animate.md)** +- **[animateMotion](js-components-svg-animatemotion.md)** +- **[animateTransform](js-components-svg-animatetransform.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-caution.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-caution.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-danger.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-danger.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-note.gif b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-note.gif new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-note.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-notice.gif new file mode 100644 index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-notice.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-tip.gif new file mode 100644 index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-tip.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-warning.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/public_sys-resources/icon-warning.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 61d0b41a286338e50499afa987dfdee14afcbac0..821bad6125b810a5cceb8a999f9e6af219f9945c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,4 +1,4 @@ -# reference/arkui-ts +# 基于TS扩展的声明式开发范式 - 组件 - 通用