提交 62a278f1 编写于 作者: 关明月 提交者: Gitee

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into OpenHarmony-3.1-Release

Signed-off-by: N关明月 <guanmingyue@huawei.com>
# Security
- Access Control
- [Access Control Overview](accesstoken-overview.md)
- [Access Control Development](accesstoken-guidelines.md)
- [Permission List](permission-list.md)
- [Access Control (Permission) Overview](accesstoken-overview.md)
- [Access Control (Permission) Development](accesstoken-guidelines.md)
- [Application Permission List](permission-list.md)
- User Authentication
- [User Authentication Overview](userauth-overview.md)
......
# Access Control Development
# Access Control (Permission) Development
## When to Use
In this example, the app requires the **ohos.permission.PERMISSION1** and **ohos.permission.PERMISSION2** permissions to implement core functions.
- The ability privilege level (APL) of the app is normal.
- The level of **ohos.permission.PERMISSION1** is normal, and the authorization mode is system_grant.
- The level of **ohos.permission.PERMISSION2** is system_basic, and the authorization mode is user_grant.
- The level of **ohos.permission.PERMISSION1** is **normal**, and the authorization mode is **system_grant**.
- The level of **ohos.permission.PERMISSION2** is **system_basic**, and the authorization mode is **user_grant**.
> **Precautions**
> **Caution**
>
> In this scenario, the required permissions include a user_grant permission. You can check whether the caller has the required permission through permission verification.
>
......@@ -35,7 +35,7 @@ Declare the permissions required by the app one by one in the **config.json** fi
| name | Name of the permission. |
| reason | Reason for requesting the permission. This field is mandatory for a user_grant permission.|
| usedScene | Scenario of the permission. This field is mandatory for a user_grant permission.|
| abilities | Abilities that use the permission. The value is an array. |
| ability | Abilities that use the permission. The value is an array. |
| when | Time when the permission is used. The value can be **inuse** (the permission can be used only in the foreground) or **always** (the permission can be used in foreground and background).|
**Example**
......@@ -43,12 +43,12 @@ Declare the permissions required by the app one by one in the **config.json** fi
```json
{
"module" : {
"requestPermissions":[
"reqPermissions":[
{
"name" : "ohos.permission.PERMISSION1",
"reason": "$string:reason",
"usedScene": {
"abilities": [
"ability": [
"FormAbility"
],
"when":"inuse"
......@@ -58,7 +58,7 @@ Declare the permissions required by the app one by one in the **config.json** fi
"name" : "ohos.permission.PERMISSION2",
"reason": "$string:reason",
"usedScene": {
"abilities": [
"ability": [
"FormAbility"
],
"when":"always"
......@@ -111,7 +111,7 @@ Therefore, before allowing the app to call the API protected by the **ohos.permi
If the verification result indicates that the app has the permission, the app can access the target API. Otherwise, the app needs to request user authorization and then proceeds based on the authorization result. For details, see [Access Control Overview](accesstoken-overview.md).
> **Precautions**
> **Caution**
>
> The permissions authorized by user are not permanent, because the user may revoke the authorization at any time. Therefore, even if the user has granted the requested permission to an app, the app's permission must be verified before the app calls an API protected by the permission.
......@@ -124,21 +124,18 @@ The procedure is as follows:
3. Proceed based on the permission verification result.
```js
// OnWindowStageCreate lifecycle of the ability
onWindowStageCreate() {
var context = this.context
import featureAbility from '@ohos.ability.featureAbility';
onStart() {
var context = featureAbility.getContext()
let array:Array<string> = ["ohos.permission.PERMISSION2"];
// requestPermissionsFromUser determines whether to invoke a pop-up window based on the permission authorization status.
context.requestPermissionsFromUser(array).then(function(data) {
console.log("data type:" + typeof(data));
console.log("data:" + data);
console.log("data permissions:" + data.permissions);
console.log("data result:" + data.authResults);
}, (err) => {
console.error('Failed to start ability', err.code);
});
context.requestPermissionsFromUser(array, 1, (err, data)=>{
console.info("====>requestdata====>" + JSON.stringify(data));
console.info("====>requesterrcode====>" + JSON.stringify(err.code));
}
}
```
> **NOTE**<br>
> For details about how to use **requestPermissionsFromUser**, see [API Reference](../reference/apis/js-apis-ability-context.md).
# Access Control Overview
# Access Control (Permission) Overview
## Introduction
AccessTokenManager (ATM) implements unified app permission management based on access tokens on OpenHarmony.
By default, apps can access limited system resources. However, in some cases, an app needs to access excess data (including personal data) and functions of the system or another app to implement extended functions. The system or apps must also share their data or functions through interfaces in an explicit manner. OpenHarmony uses app permissions to perform access control and prevent improper or malicious use of these data or functions.
......@@ -14,6 +13,18 @@ Without the required permissions, an app cannot access or perform operations on
Currently, ATM verifies app permissions based on the token identity (Token ID). A token ID identifies an app. The ATM manages app permissions based on the app's token ID.
## Basic Principles for Permission Management
Observe the following principles for permission management:
- Provide clear description about the app functions and scenarios for each permission required by the app so that users can clearly know why and when these permissions are required. Do not induce or mislead users' authorization. The permissions on an app must comply with the description provided in the app.
- Use the principle of least authority for user permissions. Allow only necessary permissions for service functions.
- When an app is started for the first time, avoid frequently displaying dialog boxes to request permissions. Allow the app to apply for permissions only when it needs to use the corresponding service functions.
- If a user rejects to authorize a permission, the user can still use functions irrelevant to this permission and can register and access the app.
- Provide no more message if a user rejects the authorization required by a function. Provide onscreen instructions to direct the user to grant the permission in **Settings** if the user triggers this function again or needs to use this function.
- All the permissions granted to apps must come from the [Application Permission List](permission-list.md). Custom permissions are not allowed for apps currently.
## Permission Workflow
Determine the permissions required for an app to access data or perform an operation. Declare the required permissions in the app installation package.
......@@ -26,37 +37,15 @@ The figure below shows the permission workflow.
![](figures/figure1.png)
## When to Use
1. You can refer to the following figure to determine whether an app can apply for a permission.
### Example Scenarios
![](figures/permission-application-process.png)
The following describes two common scenarios.
1. See [Permission Levels](#permission-levels) for details about the mapping between the application Ability Privilege Level (APL) and permission level.
- **Video playback apps**
2. The permission authorization modes include user_grant (permission granted by the user) and system_grant (permission granted by the system). For details, see [Permission Authorization Modes](#permission-authorization-mode).
Video playback apps need to use multimedia functions and read and write media files stored on storage devices. Therefore, the apps must have at least the following permissions:
* ohos.permission.READ_MEDIA (allowing the apps to read external media files)
* ohos.permission.WRITE_MEDIA (allowing the apps to read and write external media files)
- **Photography apps**
Photography apps need to use the camera function. Before accessing the camera service, the apps must have the following permission:
ohos.permission.CAMERA (allowing the apps to use the camera to take photos and record videos)
### Basic Principles
Observe the following principles for permission management:
- Provide clear description about the app functions and scenarios for each permission required by the app so that users can clearly know why and when these permissions are required. Do not induce or mislead users' authorization. The permissions on an app must comply with the description provided in the app.
- Use the principle of least authority for user permissions. Allow only necessary permissions for service functions.
- When an app is started for the first time, avoid frequently displaying dialog boxes to request permissions. Allow the app to apply for permissions only when it needs to use the corresponding service functions.
- If a user rejects to authorize a permission, the user can still use functions irrelevant to this permission and can register and access the app.
- Provide no more message if a user rejects the authorization required by a function. Provide onscreen instructions to direct the user to grant the permission in **Settings** if the user triggers this function again or needs to use this function.
- All the permissions granted to apps must come from the Permission List. Custom permissions are not allowed for apps currently.
3. A low-level app can have a high-level permission by using the Access Control List (ACL). For details, see [ACL](#acl).
## Permission Levels
......@@ -64,7 +53,7 @@ To protect user privacy, ATM defines different permission levels based on the se
### App APLs
The ability privilege level (APL) defines the priority of the app permission requested. Apps of different APLs can apply for permissions of different levels.
The APL defines the priority of the app permission requested. Apps of different APLs can apply for permissions of different levels.
The table below describes the APLs.
......@@ -76,7 +65,28 @@ The table below describes the APLs.
By default, apps are of the normal APL.
For the app of the system_basic or system_core APL, declare the app APL in the **apl** field in the app's profile, and use the profile signing tool to generate a certificate when developing the app installation package. For details about the signing process, see [Hapsigner Guide](hapsigntool-guidelines.md).
For the app of the system_basic or system_core APL, declare the APL in the **apl** field of **bundle-info** in the app's profile when developing the application installation package.
Then, use the [hapsigner](hapsigntool-guidelines.md) tool to generate a certificate or use DevEco Studio to [have your app automatically signed](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-auto-configuring-signature-information-0000001271659465#section161281722111).
> **CAUTION**<br>The method of declaring the app's APL in its profile applies only to the application or service in debug phase. For a commercial app, apply for a release certificate and profile in the corresponding app market.
Example:
This example shows only the modification of the **apl** field. Set other fields based on service requirements.
```json
{
"bundle-info" : {
"developer-id": "OpenHarmony",
"development-certificate": "Base64 string",
"distribution-certificate": "Base64 string",
"bundle-name": "com.OpenHarmony.app.test",
"apl": "system_basic",
"app-feature": "hos_normal_app"
},
}
```
### Levels of Permissions
......@@ -92,7 +102,7 @@ The permissions open to apps vary with the permission level. The permission leve
The system_basic permission allows access to resources related to basic operating system services. The basic services are basic functions provided or preconfigured by the system, such as system setting and identity authentication. Access to these resources may have considerable risks to user privacy and other apps.
The permissions of this level are available only to the apps of the system_basic APL.
The permissions of this level are available only to apps of the system_basic or system_core APL.
- **system_core**
......@@ -100,33 +110,6 @@ The permissions open to apps vary with the permission level. The permission leve
The permissions of this type are not open to any app currently.
### ACL
As described above, permission levels and app APLs are in one-to-one correspondence. In principle, **an app with a lower APL cannot apply for higher permissions by default**.
The Access Control List (ACL) makes low-level apps have high-level permissions.
**Example**
The APL of app A is normal. App A needs to have permission B (system_basic level) and permission C (normal level).
In this case, you can use the ACL to grant permission B to app A.
For details, see [Using the ACL](#using-the-acl).
For details about whether the ACL is enabled for a permission, see [Permission List](permission-list.md).
### Using the ACL
If the permission required by an app has higher level than the app's APL, you can use the ACL to grant the permissions required.
In addition to the preceding [authorization processes](#authorization-processes), you must declare the ACL.
In other words, in addition to declaring the required permissions in the **config.json** file, you must [declare the ACL](accesstoken-guidelines.md#declaring-the-acl) in the app's profile. The subsequent steps of authorization are the same.
**NOTICE**
Declare the target ACL in the **acls** field of the app's profile in the app installation package, and generate a certificate using the profile signing tool. For details about the signing process, see [Hapsigner Guide](hapsigntool-guidelines.md).
## Permission Authorization Modes
Permissions can be classified into the following types based on the authorization mode:
......@@ -143,7 +126,7 @@ Permissions can be classified into the following types based on the authorizatio
This type of permissions must be declared in the app installation package and authorized by users dynamically during the running of the app. The app has the permission only after user authorization.
For example, in the [Permission List](permission-list.md), the permissions for the microphone and camera are user_grant. The list provides reasons for using the permissions.
For example, in the [Application Permission List](permission-list.md), the permissions for the microphone and camera are user_grant. The list provides reasons for using the permissions.
The user_grant permission list must also be presented on the details page of the app in the app store.
......@@ -151,15 +134,15 @@ Permissions can be classified into the following types based on the authorizatio
The process for an app obtaining the required permissions varies depending on the permission authorization mode.
- For a system_grant permission, you need to [declare the permission](accesstoken-guidelines.md) in the **config.json** file. The permission will be pre-granted when the app is installed.
- For a system_grant permission, you need to [declare the permission](accesstoken-guidelines.md#declaring-permissions) in the configuration file. The permission will be pre-granted when the app is installed.
- For a user_grant permission, you need to [declare the permission](accesstoken-guidelines.md) in the **config.json** file, and a dialog box needs to be displayed to request user authorization during the running of the app.
- For a user_grant permission, you need to [declare the permission](accesstoken-guidelines.md#declaring-permissions) in the configuration file and trigger user authorization through a dialog box during the running of the app.
### Permission Authorization Process (user_grant)
The procedure is as follows:
1. In the **config.json** file, declare the permissions required by the app. For details, see [Access Control Development](accesstoken-guidelines.md).
1. In the configuration file, declare the permissions required by the app. For details, see [Access Control Development](accesstoken-guidelines.md).
2. Associate the object that requires the permissions in the app with the target permissions. In this way, the user knows the operations to be granted with the specified permissions.
......@@ -170,7 +153,45 @@ The procedure is as follows:
**Precautions**
- Check the app's permission each time before the operation requiring the permission is performed.
- To check whether a user has granted specific permissions to your app, use the [verifyAccessToken](../reference/apis/js-apis-abilityAccessCtrl.md) method. This method returns [PERMISSION_GRANTED](../reference/apis/js-apis-abilityAccessCtrl.md) or [PERMISSION_DENIED](../reference/apis/js-apis-abilityAccessCtrl.md). For details about the sample code, see [Access Control Development](accesstoken-guidelines.md).
- Users must be able to understand and control the authorization of user_grant permissions. During the running process, the app requiring user authorization must proactively call the API to dynamically request the authorization. Then, the system displays a dialog box asking the user to grant the requested permission. The user will determine whether to grant the permission based on the running context of the app.
- The permission authorized is not permanent, because the user may revoke the authorization at any time. Therefore, even if the user has granted the requested permission to the app, the app must check for the permission before calling the API controlled by this permission.
## ACL
As described above, permission levels and app APLs are in one-to-one correspondence. In principle, **an app with a lower APL cannot apply for higher permissions by default**.
The ACL makes low-level apps have high-level permissions.
**Example**
The APL of app A is normal. App A needs to have permission B (system_basic level) and permission C (normal level).
In this case, you can use the ACL to grant permission B to app A.
For details, see [Using the ACL](#using-the-acl).
For details about whether a permission can be enabled through the ACL, see the [Application Permission List](permission-list.md).
### Using the ACL
If the permission required by an app has higher level than the app's APL, you can use the ACL to grant the permissions required.
In addition to the preceding [authorization processes](#authorization-processes), you must declare the ACL.
In other words, in addition to declaring the required permissions in the app's configuration file, you must declare the permissions higher than the app's APL [using the ACL](accesstoken-guidelines.md#declaring-the-acl) in the app's profile. The subsequent steps of authorization are the same.
**NOTICE**
When developing an app installation package, you must declare the allowed ACLs in the **acls** field in the app's profile. Then, use the [hapsigner](hapsigntool-guidelines.md) tool to generate a certificate.
> **CAUTION**<br>The method of declaring the app's APL in its profile applies only to the application or service in debug phase. For a commercial app, apply for a release certificate and profile in the corresponding app market.
```json
{
"acls": {
"allowed-acls": [
"ohos.permission.PERMISSION"
]
},
}
```
# Permission List
# Application Permission List
On the basis of the [principles for app permission management](accesstoken-overview.md#basic-principles), apply for permissions for an app by following the procedure illustrated in the figure below.
Before applying for required permissions, read and understand the [permission workflow](accesstoken-overview.md#permission-workflow). Then, determine whether the app can apply for the target permissions based on the table below.
![](figures/permission-application-process.png)
1. For details about the mapping between the app's ability privilege level (APL) and permission level, see [Permission Levels](accesstoken-overview.md#permission-levels).
2. Permissions can be authorized by the user (user_grant) or the system (system_grant). For details, see [Permission Authorization Modes](accesstoken-overview.md#permission-authorization-modes).
3. In principle, an app with a lower APL cannot apply for higher permissions by default. The Access Control List (ACL) makes low-level apps have high-level permissions. For details, see [ACL](accesstoken-overview.md#acl).
The following lists the permissions defined by the system. For details about permission usage examples, see [Access Control Development](accesstoken-guidelines.md).
For details about permission usage examples, see [Access Control (Permission) Development](accesstoken-guidelines.md).
| Permission | APL | Authorization Mode | Enable ACL| Description |
| -------------------------------------------------------- | ------------ | ------------ | ------- | ------------------------------------------------------------ |
......@@ -83,7 +77,6 @@ The following lists the permissions defined by the system. For details about per
| ohos.permission.SET_ABILITY_CONTROLLER | system_basic | system_grant | TRUE | Allows an app to set the start and stop of an ability. |
| ohos.permission.USE_USER_IDM | system_basic | system_grant | FALSE | Allows an app to access the system identity credential information. |
| ohos.permission.MANAGE_USER_IDM | system_basic | system_grant | FALSE | Allows an app to use the system identity credential management capability to enroll, modify, and delete PINs, face images, and fingerprints.|
| ohos.permission.ACCESS_BIOMETRIC | normal | system_grant | TRUE | Allows an app to use biometric recognition for identity authentication. |
| ohos.permission.ACCESS_USER_AUTH_INTERNAL | system_basic | system_grant | FALSE | Allows an app to use the system identity authentication capability to authenticate or identify users. |
| ohos.permission.ACCESS_PIN_AUTH | system_basic | system_grant | FALSE | Allows a system app to call the PIN input APIs to present a password input dialog box for users.|
| ohos.permission.GET_RUNNING_INFO | system_basic | system_grant | TRUE | Allows an app to obtain running status information. |
......
......@@ -303,6 +303,8 @@ setValue(dataAbilityHelper: DataAbilityHelper, name: string, value: object, call
将数据项名称及数据项的值保存到数据库中。使用callback异步回调。
**系统接口**:此接口为系统接口。
**系统能力**:SystemCapability.Applications.settings.Core
**参数**
......@@ -333,6 +335,8 @@ setValue(dataAbilityHelper: DataAbilityHelper, name: string, value: object): Pro
将数据项名称及数据项的值保存到数据库中。使用Promise异步回调。
**系统接口**:此接口为系统接口。
**系统能力**:SystemCapability.Applications.settings.Core
**参数**
......@@ -392,7 +396,7 @@ enableAirplaneMode(enable: boolean, callback: AsyncCallback\<void>): void
## settings.enableAirplaneMode
enableAirplaneMode(enable: boolean): Promise<void>
enableAirplaneMode(enable: boolean): Promise\<void>
启用或禁用飞行模式。使用Promise异步回调。
......
# Progress
进度条,用于显示内容加载或操作处理进度。
进度条组件,用于显示内容加载或操作处理等进度。
> **说明:**
>
......@@ -32,20 +32,20 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?:
| 名称 | 描述 |
| ---------------------- | ---------------------------------------- |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式,环形圆环逐渐填充完成过程。 |
| Eclipse | 圆形样式,展现类似月圆月缺的进度展示效果,从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式,类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式,头尾两端处,进度条由弧形变成直线和直线变成弧形的过程;中段处,进度条正常往右走的过程。 |
| Ring<sup>8+</sup> | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
| Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
| Capsule<sup>8+</sup> | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。 |
## ProgressStyle枚举说明
| 名称 | 描述 |
| ---------------------- | ------------------------------------------------------------ |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式,环形圆环逐渐填充完成过程。 |
| Eclipse | 圆形样式,展现类似月圆月缺的进度展示效果,从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式,类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式,头尾两端处,进度条由弧形变成直线和直线变成弧形的过程;中段处,进度条正常往右走的过程。 |
| Ring | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
| Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
| ScaleRing | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
| Capsule | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。 |
## 属性
......
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
......@@ -19,25 +15,25 @@
Select(options: Array\<SelectOption\>)
**SelectOption对象说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ----------------------------------- | ---- | ---- | ------- |
| value | [ResourceStr](ts-types.md#resourcestr8) | 是 | - | 下拉选项内容。 |
| icon | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 下拉选项图片。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ----------------------------------- | ---- | ------- |
| value | [ResourceStr](ts-types.md#resourcestr8) | 是 | 下拉选项内容。 |
| icon | [ResourceStr](ts-types.md#resourcestr8) | 否 | 下拉选项图片。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------------------------------------------- | ------ | ----------------------------------------------- |
| selected | number | - | 设置下拉菜单初始选择项的索引,第一项的索引为0。 |
| value | string | - | 设置下拉按钮本身的文本显示。 |
| font | [Font](ts-types.md#font) | - | 设置下拉按钮本身的文本样式: |
| fontColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](ts-types.md#font) | - | 设置下拉菜单选中项的文本样式: |
| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单项的文本样式: |
| optionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置下拉菜单项的文本颜色。 |
| 名称 | 参数类型 | 描述 |
| ----------------------- | ------------------------------------------- | --------------------------------------------- |
| selected | number | 设置下拉菜单初始选项的索引,第一项的索引为0。 |
| value | string | 设置下拉按钮本身的文本显示。 |
| font | [Font](ts-types.md#font) | 设置下拉按钮本身的文本样式。 |
| fontColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](ts-types.md#font) | 设置下拉菜单选中项的文本样式。 |
| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | 设置下拉菜单项的文本样式。 |
| optionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置下拉菜单项的文本颜色。 |
## 事件
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
......@@ -23,15 +18,15 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------------------- | ------------------------------------- | ---- | ------------------ | -------------------------------------- |
| value | number | 否 | 0 | 当前进度值。 |
| min | number | 否 | 0 | 设置最小值。 |
| max | number | 否 | 100 | 设置最大值。 |
| step | number | 否 | 1 | 设置Slider滑动跳动值,当设置相应的step时,Slider为间歇滑动。 |
| style | SliderStyle | 否 | SliderStyle.OutSet | 设置Slider的滑块样式。 |
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis枚举说明) | 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 |
| reverse<sup>8+</sup> | boolean | 否 | false | 设置滑动条取值范围是否反向。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------------------- | --------------------------------- | ---- | ------------------------------------------------------------ |
| value | number | 否 | 当前进度值。<br/>默认值:0 |
| min | number | 否 | 设置最小值。<br/>默认值:0 |
| max | number | 否 | 设置最大值。<br/>默认值:100 |
| step | number | 否 | 设置滑动条滑动步长。<br/>默认值:1 |
| style | SliderStyle | 否 | 设置滑动条的滑块样式。<br/>默认值:SliderStyle.OutSet |
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值:Axis.Horizontal |
| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向。<br/>**说明:**设置为false时,水平方向滑动条为从左向右滑动,竖直方向滑动条从上向下滑动,设置为true时,水平方向滑动条为从右向左滑动,竖直方向滑动条从下向上滑动。<br/>默认值:false |
## SliderStyle枚举说明
......@@ -44,16 +39,16 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------- | ------- | ----- | ----------------- |
| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置滑块的颜色。 |
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置滑轨的背景颜色。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | false | 设置当前是否显示步长刻度值。 |
| showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 |
| trackThickness | [Length](ts-types.md#length) | - | 设置滑轨的粗细。 |
| maxLabel | string | - | 设置最大标号时使用。 |
| minLabel | string | - | 设置最小标号时使用。 |
| 名称 | 参数类型 | 描述 |
| ------------- | ------- | ----------------- |
| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑块的颜色。 |
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的背景颜色。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值:false |
| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值:false |
| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 |
| maxLabel | string | 设置最大标签。 |
| minLabel | string | 设置最小标签。 |
## 事件
......
# Scroll
滚动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滚动。
滑动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滑动。
> **说明:**
>
> - 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> - 该组件回弹的前提是要有滚动。内容小于一屏时,没有回弹效果。
## 权限列表
> - 该组件回弹的前提是要有滑动。内容小于一屏时,没有回弹效果。
## 子组件
......@@ -25,13 +20,13 @@ Scroll(scroller?: Scroller)
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | --------- |
| scrollable | ScrollDirection | ScrollDirection.Vertical | 设置滚动方法。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | 设置滚动条状态。 |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | - | 设置滚动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | - | 设置滚动条的宽度。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | EdgeEffect.Spring | 设置滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 |
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | --------- |
| scrollable | ScrollDirection | 设置滑动方法。<br/>默认值:ScrollDirection.Vertical |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。<br/>默认值:BarState.Off |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滑动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滑动条的宽度。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.Spring |
## ScrollDirection枚举说明
......@@ -52,7 +47,7 @@ Scroll(scroller?: Scroller)
## Scroller
滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动,目前支持绑定到List、Scroll、ScrollBar上。
滑动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滑动,目前支持绑定到List、Scroll、ScrollBar上。
### 导入对象
......@@ -71,38 +66,38 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| xOffset | number&nbsp;\|&nbsp;string | 是 | - | 水平滑动偏移。 |
| yOffset | number&nbsp;\|&nbsp;string | 是 | - | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;<br/>} | 否 | | 动画配置:<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;动曲线设置。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | number&nbsp;\|&nbsp;string | 是 | 水平滑动偏移。 |
| yOffset | number&nbsp;\|&nbsp;string | 是 | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;<br/>} | 否 | 动画配置:<br/>-&nbsp;duration:&nbsp;滑动时长设置。<br/>-&nbsp;curve:&nbsp;动曲线设置。 |
### scrollEdge
scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void
动到容器边缘。
动到容器边缘。
### scrollPage
scrollPage(value: { next: boolean, direction?: Axis }): void
动到下一页或者上一页。
动到下一页或者上一页。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------------------------- | ---- | ------ | --------------------------------------------------- |
| next | boolean | 是 | - | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction | [Axis](ts-appendix-enums.md#axis) | 否 | - | 设置滚动方向为水平或竖直方向。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | --------------------------------- | ---- | --------------------------------------------------- |
| next | boolean | 是 | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动方向为水平或竖直方向。 |
### currentOffset
currentOffset()
返回当前的动偏移量。
返回当前的动偏移量。
### scrollToIndex
......@@ -117,9 +112,9 @@ scrollToIndex(value: number): void
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 要滑动到的列表项在列表中的索引值。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 要滑动到的列表项在列表中的索引值。 |
## 示例
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含子组件。
......@@ -23,9 +18,9 @@ SideBarContainer( type?: SideBarContainerType )
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | -------------------- | ---- | -------------------------- | ----------- |
| type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------------- | ---- | ------------------------------------------------------------ |
| type | SideBarContainerType | 否 | 设置侧边栏的显示类型。<br/>默认值:SideBarContainerType.Embed |
## SideBarContainerType枚举说明
......@@ -36,32 +31,32 @@ SideBarContainer( type?: SideBarContainerType )
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | ----------- | ---- | ------------- |
| showSideBar | boolean | true | 设置是否显示侧边栏。 |
| controlButton | ButtonStyle | - | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | true | 设置是否显示控制按钮。 |
| sideBarWidth | number | 200 | 设置侧边栏的宽度。 |
| minSideBarWidth | number | 200 | 设置侧边栏最小宽度。 |
| maxSideBarWidth | number | 280 | 设置侧边栏最大宽度。 |
| 名称 | 参数类型 | 描述 |
| ----------------- | ----------- | -------------------------------------------- |
| showSideBar | boolean | 设置是否显示侧边栏。<br/>默认值:true |
| controlButton | ButtonStyle | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | 设置是否显示控制按钮。<br/>默认值:true |
| sideBarWidth | number | 设置侧边栏的宽度。<br/>默认值:200,单位vp |
| minSideBarWidth | number | 设置侧边栏最小宽度。<br/>默认值:200,单位vp |
| maxSideBarWidth | number | 设置侧边栏最大宽度。<br/>默认值:280,单位vp |
## ButtonStyle对象说明
| 名称 | 参数类型 | 必填 | 默认值 | 描述 |
| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| left | number | 否 | 16 | 设置侧边栏控制按钮距离容器左界限的间距。 |
| top | number | 否 | 48 | 设置侧边栏控制按钮距离容器上界限的间距。 |
| width | number | 否 | 32 | 设置侧边栏控制按钮的宽度。 |
| height | number | 否 | 32 | 设置侧边栏控制按钮的高度。 |
| icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](arkui-ts/ts-types.md#resource) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](arkui-ts/ts-types.md#resource) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](arkui-ts/ts-types.md#resource) <br/>} | 否 | - | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
| 名称 | 参数类型 | 必填 | 描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| left | number | 否 | 设置侧边栏控制按钮距离容器左界限的间距。<br/>默认值:16,单位vp |
| top | number | 否 | 设置侧边栏控制按钮距离容器上界限的间距。<br/>默认值:48,单位vp |
| width | number | 否 | 设置侧边栏控制按钮的宽度。<br/>默认值:32,单位vp |
| height | number | 否 | 设置侧边栏控制按钮的高度。<br/>默认值:32,单位vp |
| icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](arkui-ts/ts-types.md#resource) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](arkui-ts/ts-types.md#resource) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](arkui-ts/ts-types.md#resource) <br/>} | 否 | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
## 事件
| 名称 | 功能描述 |
| ------------------------------------- | ------------------------------------------------------------ |
| onChange(callback: boolen) =&gt; void | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> true表示显示,false表示隐藏。 |
| 名称 | 功能描述 |
| -------------------------------------- | ------------------------------------------------------------ |
| onChange(callback: boolean) =&gt; void | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> true表示显示,false表示隐藏。 |
## 示例
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含子组件。
......@@ -23,9 +18,9 @@ Stack(value?: {alignContent?: Alignment})
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ------------------------------------------- | ---- | ------ | ------------------------------ |
| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 否 | Center | 设置子组件在容器内的对齐方式。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 否 | 设置子组件在容器内的对齐方式。<br/>默认值:Alignment.Center |
## 示例
......
......@@ -26,23 +26,23 @@ Swiper(value?:{controller?: SwiperController})
不支持[Menu控制](ts-universal-attributes-menu.md)
| 名称 | 参数类型 | 描述 |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | 设置当前在容器中显示的子组件的索引值。<br/>默认值:0 |
| autoPlay | boolean | 子组件是否自动播放,自动播放状态下,导航点不可操作。<br/>默认值:false |
| interval | number | 使用自动播放时播放的时间间隔,单位为毫秒。<br/>默认值:3000 |
| indicator | boolean | 是否启用导航点指示器。<br/>默认值:true |
| loop | boolean | 是否开启循环。<br>设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。<br/>默认值:true |
| duration | number | 子组件切换的动画时长,单位为毫秒。<br/>默认值:400 |
| vertical | boolean | 是否为纵向滑动。<br/>默认值:false |
| itemSpace | number \| string | 设置子组件与子组件之间间隙。<br/>默认值:0 |
| displayMode | SwiperDisplayMode | 设置子组件显示模式。<br/>默认值:SwiperDisplayMode.Stretch |
| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值:1 |
| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值:false |
| displayCount<sup>8+</sup> | number&nbsp;\|&nbsp;string | 设置一页中显示子组件的个数,设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。<br/>默认值:1 |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动到边缘时的显示效果。<br/>默认值:EdgeEffect.Spring |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值:Curve.Ease |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置indicator样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;mask:&nbsp;设置是否显示导航点蒙层样式。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
| 名称 | 参数类型 | 描述 |
| --------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| index | number | 设置当前在容器中显示的子组件的索引值。<br/>默认值:0 |
| autoPlay | boolean | 子组件是否自动播放,自动播放状态下,导航点不可操作。<br/>默认值:false |
| interval | number | 使用自动播放时播放的时间间隔,单位为毫秒。<br/>默认值:3000 |
| indicator | boolean | 是否启用导航点指示器。<br/>默认值:true |
| loop | boolean | 是否开启循环。<br> 设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。<br/>默认值:true |
| duration | number | 子组件切换的动画时长,单位为毫秒。<br/>默认值:400 |
| vertical | boolean | 是否为纵向滑动。<br/>默认值:false |
| itemSpace | number \| string | 设置子组件与子组件之间间隙。<br/>默认值:0 |
| displayMode | SwiperDisplayMode | 设置子组件显示模式。<br/>默认值:SwiperDisplayMode.Stretch |
| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值:1 |
| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值:false |
| displayCount<sup>8+</sup> | number&nbsp;\|&nbsp;string | 设置一页中显示子组件的个数,设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。<br/>默认值:1 |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动到边缘时的显示效果。<br/>默认值:EdgeEffect.Spring |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值:Curve.Ease |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置导航点样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;mask:&nbsp;设置是否显示导航点蒙层样式。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
## SwiperDisplayMode枚举说明
| 名称 | 描述 |
......@@ -50,6 +50,14 @@ Swiper(value?:{controller?: SwiperController})
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ------------------------------------------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以通过触摸事件继续滑动一段距离,松手后回弹。 |
| Fade | 滑动到边缘后,可以通过触摸事件继续滑动一段阴影,松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
## SwiperController
Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然后通过它控制翻页。
......@@ -82,7 +90,7 @@ finishAnimation(callback?: () => void): void
### onChange
onChange(event: (index: number) => void)
onChange(event:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)
当前显示的组件索引变化时触发该事件。
......
# 共享元素转场
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
设置页面间转场时共享元素的转场动效。
共享元素转场支持页面间的转场,如当前页面的图片转场至下一页面中。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id,则转场过程中会进行共享元素转场,配置为空字符串时不会有共享元素转场效果。 |
- options参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| duration | number | 1000 | 否 | 单位为毫秒,默认动画时长为1000毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 默认曲线为线性,有效值参见Curve说明。 |
| delay | number | 0 | 否 | 单位为毫秒,默认不延时播放。 |
| 名称 | 参数 | 参数描述 |
| -------- | -------- | -------- |
| sharedTransition | id:&nbsp;string,<br/>{<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number,<br/>motionPath?: <br/>{<br/>path: string,<br/>form?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。<br/>-&nbsp; id:设置组件的id。<br/>-&nbsp; duration:单位为毫秒,默认动画时长为1000毫秒。<br/>-&nbsp;curve:默认曲线为Linear,有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。<br/>-&nbsp;delay:单位为毫秒,默认不延时播放。<br/>-&nbsp;motionPath:运动路径信息。<br/>-&nbsp;path:设置路径。<br/>-&nbsp;from:设置起始值。<br/>-&nbsp;to:设置终止值。<br/>-&nbsp;rotatable:是否旋转。<br/>-&nbsp;zIndex:设置Z轴。<br/>-&nbsp;type:动画类型。 |
## 示例
示例功能为两个页面,共享元素转场页面图片点击后转场至页面B的图片。
示例代码为点击图片跳转页面时,显示共享元素图片的自定义转场动效。
```ts
// xxx.ets
......
......@@ -2,24 +2,18 @@
> **说明:**
> - 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> - 仅当父组件是Flex组件时生效。
## 权限列表
> - 仅当父组件是 Flex、Column、Row 时生效。
## 属性
| 名称 | 参数说明 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| flexBasis | 'auto'&nbsp;\|&nbsp;Length | 'auto' | 此属性所在的组件在Flex容器中主轴方向上基准尺寸。 |
| flexGrow | number | 0 | Flex容器的剩余空间分配给此属性所在组件的比例。 |
| flexShrink | number | 1 | Flex容器压缩尺寸分配给此属性所在组件的比例。 |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Auto | 覆盖Flex布局容器中alignItems默认配置。 |
| 名称 | 参数说明 | 描述 |
| -------- | -------- | -------- |
| flexBasis | string&nbsp;\|&nbsp;number | 设置组件在父容器主轴方向上的基准尺寸。<br/>默认值:'auto'(表示组件在主轴方向上的基准尺寸为组件原本的大小) |
| flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。<br/>默认值:0 |
| flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。<br/>默认值:1 |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式,覆盖Flex布局容器中alignItems默认配置。<br/>默认值:ItemAlign.Auto |
## 示例
......
......@@ -4,11 +4,6 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性
......@@ -73,3 +68,5 @@ struct ImageEffectsExample {
}
}
```
<img src="figures/image-effect.png" alt="image-effect" />
\ No newline at end of file
......@@ -5,21 +5,16 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ------------------------------------ | ---------------------------------------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | Center | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。 |
| direction | [Direction](ts-appendix-enums.md#direction) | Auto | 设置元素水平方向的布局,可选值参照Direction枚举说明。 |
| position | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | - | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。 |
| offset | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 |
| 名称 | 参数类型 | 描述 |
| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。<br/>默认值:Alignment.Center |
| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值:Direction.Auto |
| position | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 使用绝对定位,设置元素锚点相对于父容器顶部起点的偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| offset | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
## 示例
......
......@@ -5,20 +5,15 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| --------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量,表示旋转轴,正角度为顺时针转动,负角度为逆时针转动,默认值为0,同时可以通过centerX和centerY设置旋转的中心点。 |
| translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离,距离的正负控制平移的方向,默认值为0。 |
| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。 |
| transform | matrix:&nbsp;Matrix4 | - | 设置当前组件的变换矩阵。 |
| 名称 | 参数类型 | 描述 |
| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerX?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?:&nbsp;number&nbsp;\|&nbsp;string<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量,表示旋转轴,正角度为顺时针转动,负角度为逆时针转动,默认值为0,同时可以通过centerX和centerY设置旋转的中心点。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} |
| translate | {<br/>x?:&nbsp;number&nbsp;\|&nbsp;string,<br/>y?:&nbsp;number&nbsp;\|&nbsp;string,<br/>z?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离,距离的正负控制平移的方向,默认值为0。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} |
| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。<br/>默认值:<br/>{<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} |
| transform | matrix:&nbsp;Matrix4 | 设置当前组件的变换矩阵。 |
## 示例
......
......@@ -5,17 +5,12 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ------------- |
| onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 |
| onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 |
| 名称 | 支持冒泡 | 功能描述 |
| ------------------------------------------------ | -------- | -------------------------- |
| onAppear(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 |
| onDisappear(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 |
## 示例
......
......@@ -5,17 +5,12 @@
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 事件
| **名称** | **支持冒泡** | **功能描述** |
| ---------------------------------------- | -------- | --------------- |
| onFocus(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(callback:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
| **名称** | **支持冒泡** | **功能描述** |
| -------------------------------------------- | ------------ | ------------------------------ |
| onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
> **说明:**
> 支持焦点事件的组件:Button、Text、Image、List、Grid。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册