@@ -39,14 +39,14 @@ There are two types of modules by usage scenario:
> Actually, a build of the shared library generates a HAR as well as an HSP. The HAR contains the interfaces exported from the HSP and is used by other modules in the application to reference the features of the HSP. For convenience purposes, it is usually considered that a shared library is built into an HSP.
The table below lists the differences between the HAR and HSP.
| Shared Package Type| Build and Running | Release and Reference|
| Shared Package Type| Build and Running | Release and Reference|
| -------- | ---- | --- |
| HAR | The code and resources in the HAR are built with the invoking module, and if there are multiple invoking modules, the build product contains multiple copies of the same code and resources.<br>Note: When [building a HAR](https://gitee.com/openharmony/docs/blob/master/en/application-dev/quick-start/har-package.md#building-a-har), you are advised to enable the obfuscation capability to protect code assets.| In addition to being referenced within an application, a HAR can be independently packaged and released to the [OHPM central repository](https://ohpm.openharmony.cn/#/en/home) or [OHPM private repository](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-ohpm-repo) for reference by other applications.|
| HAR | The code and resources in the HAR are built with the invoking module, and if there are multiple invoking modules, the build product contains multiple copies of the same code and resources.<br>Note: When [building a HAR](https://gitee.com/openharmony/docs/blob/master/en/application-dev/quick-start/har-package.md#building-a-har), you are advised to enable the obfuscation capability to protect code assets.| In addition to being referenced within an application, a HAR can be independently packaged and released to the [OHPM central repository](https://ohpm.openharmony.cn/#/en/home) or [OHPM private repository](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-ohpm-repo) for reference by other applications.|
| HSP | The code and resources in the HSP are built independently, and the build product contains only one copy of the code and resources.| Generally, the HSP is packaged with the application. Intra-application HSP and [integrated HSP](integrated-hsp.md) are supported. The intra-app HSP can only be referenced in an application; the integrated HSP can be published to the OHPM private repository and referenced in cross-applications.<br>**NOTE**<br>The integrated HSP is an intermediate form of the in-app HSP. It can only be compiled and built and cannot be installed independently. When an integrated HSP is built and released to the OHPM private repository, it is not coupled with a specific bundle name. When an integrated HSP is used, the toolchain automatically replaces the bundle name of the integrated HSP with that of the host application and generates a new HSP as the installation package of the host application. This new HSP functions as an in-app HSP of the host HAP.|
**Figure 1** HAR and HSP in the App Pack
## Selecting a Package Type
@@ -75,6 +75,6 @@ You can select a package type for development based on application requirements.
> **NOTE**
>
> - If the HAR supports the declaration of the **pages** tag, when the HAR is packaged into the HAP or HSP, the relative paths of **pages** existing in the HAR and HAP/HSP may be duplicated, disabling the specific routing page from being identified. Therefore, the configuration file of a HAR does not support declaration of the **pages** tag. Still, it can include pages, which can be redirected through [Navigation](../ui/arkts-navigation-navigation.md#routing-operations).
> - If the HAR supports the declaration of the **pages** tag, when the HAR is packaged into the HAP or HSP, the relative paths of **pages** existing in the HAR and HAP/HSP may be duplicated, disabling the specific routing page from being identified. Therefore, the configuration file of a HAR does not support declaration of the **pages** tag. Still, it can include pages, which can be redirected through **Navigation**.
> - As the HSP supports only intra-application sharing, a HAR that depends on any HSP can be shared only within the same application. Do not release such a HAR to a second-party or third-party repository for other applications to use: Using it in other applications will result in build failures.
> - HAR and HSP do not support cyclic dependency or dependency transfer. For details, see the constraints in [HAR](har-package.md#constraints) and [HSP](in-app-hsp.md#constraints).
@@ -23,7 +23,7 @@ A Harmony Archive (HAR) is a static shared package that can contain code, C++ li
> If the [startAbility](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startability) API is used to start the UIAbility in the HAR, the value of **moduleName** in the API parameter must be the module name of the [HAP](hap-package.md) or [HSP](in-app-hsp.md) that depends on the HAR.
- Since API version 18, HAR supports the declaration of the [ExtensionAbility](../application-models/extensionability-overview.md) component in the configuration file. However, ExtensionAbility with entry capabilities (that is, **entity.system.home** and **ohos.want.action.home** configured for the **skill** tag) is not supported. For details about how to configure an ExtensionAbility in a HAR, see [Adding an ExtensionAbility to a Module](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-add-new-ability#section18891639459). For API version 17 and earlier versions, the [ExtensionAbility](../application-models/extensionability-overview.md) component cannot be declared in the configuration file.
- A HAR does not support the declaration of the [pages](./module-configuration-file.md#pages) tag in the configuration file. Still, it can include pages, which can be redirected through [routing operations](../ui/arkts-navigation-navigation.md#routing-operations).
- A HAR does not support the declaration of the [pages](./module-configuration-file.md#pages) tag in the configuration file. Still, it can include pages, which can be redirected through **Navigation**.
- A HAR does not support referencing resources in the **AppScope** folder. This is because the content in the **AppScope** folder is not packaged into the HAR during building.
- As the HSP supports only intra-application sharing, a HAR that depends on any HSP can be shared only within the same application. Do not release such a HAR to a second-party or third-party repository for other applications to use; otherwise, build failures will occur.
- When multiple HAPs or HSPs reference the same HAR, the application package may contain multiple copies of code and resource files for the HAPs or HSPs, resulting in an unwelcome large package size.
@@ -21,35 +21,35 @@ The HSP has requirements on the consistency of bundle names and signatures. Inst
1. In the **module.json5** file of the HSP module, change the value of the **type** field to **har** and delete the **deliveryWithInstall** and **pages** fields.
@@ -39,13 +39,13 @@ A Harmony Shared Package (HSP) is a dynamic shared package that can contain code
## Creating an HSP
Create an HSP module for calling C++ code on DevEco Studio and turn on **Enable native** on the **Configure New Module** page. For details, see [Creating an HSP Module](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-hsp#section7717162312546). The following uses the **library** module as an example. The basic project directory structure is as follows:
```
```txt
MyApplication
├── library
│ ├── src
│ │ └── main
| | ├── cpp
| | | ├── CMakeLists.txt // Configuration file for compiling native C++ code
| | | ├── CMakeLists.txt // Configuration file for compiling C++ code
| | | └── napi_init.cpp // C++ file for initializing the NAPI module
│ │ ├── ets
│ │ │ └── pages
@@ -90,13 +90,10 @@ Declare the APIs exposed to external systems in the entry file **index.ets**.
``` TypeScript
// library/index.ets
// [EndExclude in_app_hsp_010]
export { MyTitleBar } from './src/main/ets/components/MyTitleBar';
// [StartExclude in_app_hsp_010]
```
### Exporting Classes and Methods
Use **export** to export classes and methods. The sample code is as follows:
@@ -121,13 +118,11 @@ export function minus(a: number, b: number): number {
Declare the APIs exposed to external systems in the entry file **index.ets**.
export { nativeMulti } from './src/main/ets/utils/nativeTest';
```
### Accessing Resources in an HSP Through $r
More often than not, you may need to use resources, such as strings and images, in components. For components in an HSP, such resources are typically placed in the HSP package, rather than in the package where the HSP is invoked, for the purpose of complying with the principle of high cohesion and low coupling.
@@ -169,15 +161,15 @@ if you use **Image("../../resources/base/media/example.png")**, the image actual
import { Log, add, MyTitleBar, ResManager, nativeMulti } from 'library';
@@ -465,7 +453,7 @@ export struct Library_Menu {
Add the **route_map.json** file (**library/src/main/resources/base/profile/route_map.json**) to the **library** module.
```
```json
{
"routerMap": [
{
@@ -502,4 +490,4 @@ Configure the **route_map.json** file in the **library/src/main/module.json5** f
```
The navigation feature is used for page redirection and return. For details, see [Page Navigation](../ui/arkts-navigation-navigation.md#routing-operations).
The navigation feature is used for page redirection and return.
@@ -23,55 +23,56 @@ Multiple applications in a group can use the same dynamic shared package. To red
## Development Instructions
1. Project configuration for creators: Set the **useNormalizedOHMUrl** field to **true** in the project-level **build-profile.json5** file to configure the integrated HSP.
2. Module configuration for creators: Set the **integratedHsp** field to **true** in the module-level [build-profile.json5](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-hvigor-build-profile) file to specify an HSP module to be built as the integrated HSP module.
> Before installing and running an application, the user must configure the project signature information. For details, see [Configuring a Debug Signature](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-signing).
> **NOTE**
> Before installing and running an application, the user must configure the project signature information. For details, see [Configuring a Debug Signature](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-signing).
An Object type is a base type for all reference types. Any value, including values of primitive types (they will be automatically boxed), can be directly assigned to variables of the type Object. The Object type is used to represent types other than the primitive types.
An Object type is a base type for all reference types. Any value, including values of primitive types (they will be automatically boxed), can be directly assigned to variables of the type Object.
The Object type is used to represent types other than the primitive types.
```typescript
let o1: Object = 'Alice';
let o2: Object = ['a', 'b'];
let o3: Object = 1;
let o4: object = [1, 2, 3];
```
**Array type**
@@ -270,7 +274,7 @@ let emptyData: NullableObject = null;
### Operators
Assignment operators
**Assignment operators**
Simple assignment operator **=** is used as in **x = y**.
@@ -368,7 +372,7 @@ if (bird instanceof Animal) {
### Statements
**If statement**
**if statement**
An **if** statement is used to execute a sequence of statements when a logical condition is true, or another set of statements (if provided) otherwise.
The **else** part can also contain more **if** statements.
@@ -399,7 +403,7 @@ if (s2.length != 0) {
}
```
**Switch statement**
**switch statement**
A **switch** statement is used to execute a sequence of statements that match the value of a **switch** expression.
The **for** statement is executed repeatedly until the specified loop exit condition result is **false**.
@@ -491,7 +495,7 @@ for (let i = 0; i < 10; i += 2) {
}
```
**For-of statement**
**for-of statement**
You can use the **for-of** statement to iterate over iterable types such as array, Set, Map, and string. A **for-of** statement looks as follows:
@@ -509,7 +513,7 @@ for (let ch of 'a string object') {
}
```
**While statement**
**while statement**
The **while** statement executes **statements** as long as the value of **condition** is **true**. A **while** statement looks as follows:
@@ -530,7 +534,7 @@ while (n < 3) {
}
```
**Do-while statement**
**do-while statement**
If the value of **condition** is truthy (a value that is considered **true**), the **statements** is executed repeatedly. A **do-while** statement looks as follows:
@@ -549,7 +553,7 @@ do {
} while (i < 10)
```
**Break statement**
**break statement**
A **break** statement is used to terminate any loop statement or the **switch** statement.
@@ -580,7 +584,7 @@ label: while (true) {
}
```
**Continue statement**
**continue statement**
A **continue** statement stops the execution of the current loop iteration and passes control to the next iteration.
@@ -596,7 +600,7 @@ for (let x = 0; x < 100; x++) {
}
```
**Throw and Try statements**
**throw and try statements**
A **throw** statement is used to throw an exception or an error:
The last parameter of a function can be a rest parameter in the format of **...restArgs**. It allows functions to take unlimited number of arguments of any specified type.
The last parameter of a function can be a rest parameter in the format of **...restName: Type[]**. It allows a function to receive a variable-length array for processing variable-quantity parameter inputs.
```typescript
function sum(...numbers: number[]): number {
@@ -1136,7 +1140,7 @@ class MyDate implements DateInterface {
**Access to super**
The keyword **super** can be used to access instance fields, instance methods and constructors from the super class. It is often used to extend basic functionality of child class with the required behavior taken from the super class:
The **super** keyword can be used to access the methods and constructors of the super class. It is often used to extend basic functionality of child class with the required behavior taken from the super class:
```typescript
class RectangleSize {
@@ -1161,7 +1165,6 @@ class FilledRectangle extends RectangleSize {
@@ -241,7 +241,7 @@ Application icons cannot be hidden from the home screen:
The system strictly controls applications without icons to prevent malicious applications from deliberately configuring no icon to block uninstall attempts.
Setting the application icon to be displayed on the home screen:<br>Set **icon**, **label**, and **skills** under **abilities** in the **config.json** file. Make sure the **skills** configuration contains **action.system.home** and **entity.system.home**.
@@ -17,7 +17,7 @@ Resources are classified into the following types based on their sources:
Resource files used during application development must be stored in specified directories for management. There are two types of resource directories, namely, resource directories and resource group directories. The resource directories are the **base**, qualifiers, **rawfile**, and **resfile** directories. The resource group directories are the **element**, **media**, and **profile** directories.
```
```text
resources
|---base // Default directory.
| |---element
@@ -249,7 +249,7 @@ If the **attr** attribute is not configured, a string is translated by default.
### Constraints
The **attr** attribute applies to the string, strarray, and plural resources in the **base** directory.
```
```text
resources
|---base
| |---element
@@ -401,7 +401,7 @@ The following shows the **attr** attribute configured in **string**. The **strin
> **NOTE**
>
> The HSP module name must be placed in the brackets ([]). If the **rawfile** directory contains multiple levels of folders, the path must start from the first level, for example, `$rawfile('[hsp].oneDir/twoDir/icon.png')`. When `$r` or `$rawfile` is used for cross-HSP resource access, resource verification is not available at compile time, and you need to manually check that the target resources exist in the corresponding location.
> The HSP module name must be placed in the brackets ([]). If the **rawfile** directory contains multiple levels of folders, the path must start from the first level, for example, `$rawfile('[hsp].firstDir/secondDir/icon.png')`. When `$r` or `$rawfile` is used for cross-HSP resource access, resource verification is not available at compile time, and you need to manually check that the target resources exist in the corresponding location.
### System Resources
@@ -678,7 +678,7 @@ The **module.json5** file in the cross-application overlay resource package supp
If the **module.json5** file of a module contains the **targetModuleName** and **targetPriority fields** during project creation on DevEco Studio, the module is identified as a module with the overlay feature in the installation phase. Modules with the overlay feature generally provide an overlay resource file for other modules on the device, so that the module specified by **targetModuleName** can display different colors, labels, themes, and the like by using the overlay resource file in a running phase.
@@ -25,7 +25,7 @@ For more details, see [Introduction to ArkUI](../ui/arkui-overview.md).
### Application Model
The application model is the abstraction of capabilities required by an application. It provides components and mechanisms required for running the application. By adhering to a unified model, you can streamline application development, making it more efficient and straightforward. For details, see [Elements of the Application Model](../application-models/application-models.md#elements-of-the-application-model).
The application model abstracts the capabilities required by an application and provides components and mechanisms required for running the application. By adhering to a unified model, you can streamline application development, making it more efficient and straightforward. For details, see [Elements of the Application Model](../application-models/application-models.md#elements-of-the-application-model).
Along its evolution, OpenHarmony has provided two application models:
# Building the First ArkTS Application in Stage Model
<!--Kit: Common-->
<!--Subsystem: Common-->
<!--Owner: @ge-yafang-->
<!--Designer: @ge-yafang-->
<!--Tester: @ge-yafang-->
<!--Adviser: @ge-yafang-->
<!--Kit: Common-->
<!--Subsystem: Common-->
<!--Owner: @ge-yafang-->
<!--Designer: @ge-yafang-->
<!--Tester: @ge-yafang-->
<!--Adviser: @ge-yafang-->
## Creating an ArkTS Project
@@ -210,7 +223,7 @@
You can implement page redirection through the [page router](../reference/apis-arkui/js-apis-router.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below.
To deliver better transition effects, use [Navigation](../ui/arkts-navigation-navigation.md).
To deliver better transition effects, use **Navigation**.
1. Implement redirection from the first page to the second page.
@@ -1300,8 +1300,7 @@ Binds to or updates the specified styled string.
>
> Since API version 15, the **TextController** object retains the styled string. Once it is bound to a **Text** component, the stored content is automatically applied and rendered.
>
> This behavior difference is especially relevant when you set styled strings in the [aboutToAppear](./ts-custom-component-lifecycle.md#abouttoappear) lifecycle callback. It is ineffective in API version 14 and earlier, but works as expected since API version 15. For best practices, see [Creating and Applying a StyledString Object](../../../ui/arkts-styled-string.md#creating-and-applying-a-styledstring-object).
> This behavior difference is especially relevant when you set styled strings in the [aboutToAppear](./ts-custom-component-lifecycle.md#abouttoappear) lifecycle callback. It is ineffective in API version 14 and earlier, but works as expected since API version 15. For best practices, see [Creating and Applying a StyledString or MutableStyledString Object](../../../ui/arkts-styled-string.md#creating-and-applying-a-styledstring-or-mutablestyledstring-object).
### getLayoutManager<sup>12+</sup>
@@ -2175,7 +2174,7 @@ struct TextExample11 {
### Example 12: Setting Custom Menu Extensions
This example implements custom menu extension items for text using the [editMenuOptions](#editmenuoptions12) API (available since API version 12), allowing configuration of text content, icons, and callbacks. Menu data can also be configured through the [onPrepareMenu](ts-text-common.md#onpreparemenu20) callback (available since API version 20).
This example implements custom menu extension items for text using the [editMenuOptions](#editmenuoptions12) API (available since API version 12), allowing configuration of text content, icons, and callbacks. Menu data can also be configured through the [OnPrepareMenuCallback](ts-text-common.md#onpreparemenucallback20) callback (available since API version 20).
This example implements custom menu extension items for text using the [editMenuOptions](#editmenuoptions12) API (available since API version 12), allowing configuration of text content, icons, and callbacks. Menu data can also be configured through the [onPrepareMenu](ts-text-common.md#onpreparemenu20) callback (available since API version 20).
This example implements custom menu extension items for text using the [editMenuOptions](#editmenuoptions12) API (available since API version 12), allowing configuration of text content, icons, and callbacks. Menu data can also be configured through the [OnPrepareMenuCallback](ts-text-common.md#onpreparemenucallback20) (available since API version 20).
Defines a struct for third-party accessibility provider callback functions, which third-party platforms need to implement. These functions are registered with the system side through **OH_ArkUI_AccessibilityProviderRegisterCallback**.
@@ -34,7 +38,7 @@ Defines a struct for third-party accessibility provider callback functions, whic
Defines the callback function struct for third-party operation providers in multi-instance scenarios. These functions should be implemented by third-party platforms and registered with the system using **OH_ArkUI_AccessibilityProviderRegisterCallbackWithInstance**.
@@ -34,7 +38,7 @@ Defines the callback function struct for third-party operation providers in mult
Configures grid layout attributes for specific components including **List**, **Flex**, **Select**, and **Swiper**.
@@ -24,4 +28,4 @@ Configures grid layout attributes for specific components including **List**, **
| -- | -- |
| int32_t rowCount | Number of rows of the component.|
| int32_t columnCount | Number of columns of the component.|
| int32_t selectionMode | Selection mode. The value **0** indicates single-row selection, and other values indicate multi-row selection.|
| int32_t selectionMode | Selection mode. If the value is **0**, only a single row in the grid can be selected. If the value is not 0, multiple rows can be selected.|
| brand | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Brand color.<br>Affected components: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md) |
| brand | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Brand color.<br>**Affected components**: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md) |
| warning | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Warning color.<br>Affected components: [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12),<br>[Badge](./arkui-ts/ts-container-badge.md), [Button](./arkui-ts/ts-basic-components-button.md) |
| alert | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Alert color.<br>Affected components: None |
| confirm | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Confirmation color.<br>Affected components: None |
| fontPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary font color.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog) and [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog)<br>[ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog),<br>[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [Swiper](./arkui-ts/ts-container-swiper.md), [Text](./arkui-ts/ts-basic-components-text.md),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md),<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Select](./arkui-ts/ts-basic-components-select.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md),<br>[ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Menu](./arkui-ts/ts-basic-components-menu.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md),<br>[Search](./arkui-ts/ts-basic-components-search.md), [Counter](./arkui-ts/ts-container-counter.md), [TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md),<br>[TextPicker](./arkui-ts/ts-basic-components-textpicker.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| fontSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary font color.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md),<br>[TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| fontTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary font color.<br>Affected components: [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md) |
| fontFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level font color.<br>Affected components: None |
| fontEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis font color.<br>Affected components: [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog), [ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog) and [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)<br>[SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md),<br>[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Button](./arkui-ts/ts-basic-components-button.md),<br>[Select](./arkui-ts/ts-basic-components-select.md), [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md), [TextPicker](./arkui-ts/ts-basic-components-textpicker.md) |
| fontOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary inverted font color used on color background.<br>Affected components: [Badge](./arkui-ts/ts-container-badge.md), [Button](./arkui-ts/ts-basic-components-button.md) and [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
| fontOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary inverted font color used on color background.<br>Affected components: None|
| fontOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary inverted font color used on color background.<br>Affected components: None|
| fontOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level inverted font color used on color background.<br>Affected components: None|
| iconPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary icon color.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Swiper](./arkui-ts/ts-container-swiper.md) and [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| iconSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary icon color.<br>Affected components: [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md) and [LoadingProgress](./arkui-ts/ts-basic-components-loadingprogress.md)<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| iconTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary icon color.<br>Affected components: [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md) |
| iconFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level icon color.<br>Affected components: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md) and [Radio](./arkui-ts/ts-basic-components-radio.md) |
| iconEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis icon color.<br>Affected components: [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md) |
| iconSubEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Color of the emphasis auxiliary icon.<br>Affected components: None |
| iconOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary inverted icon color used on color background.<br>Affected components: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)|
| iconOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary inverted icon color used on color background.<br>Affected components: [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
| iconOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary inverted icon color used on color background.<br>Affected components: None|
| iconOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level inverted icon color used on color background.<br>Affected components: [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md)|
| backgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary background color (solid, opaque).<br>Affected components: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [QRCode](./arkui-ts/ts-basic-components-qrcode.md) |
| backgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary background color (solid, opaque).<br>Affected components: None |
| backgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary background color (solid, opaque).<br>Affected components: None |
| backgroundFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level background color (solid, opaque).<br>Affected components: None |
| backgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis background color (solid, opaque).<br>Affected components: [Progress](./arkui-ts/ts-basic-components-progress.md), [Button](./arkui-ts/ts-basic-components-button.md) and [Slider](./arkui-ts/ts-basic-components-slider.md) |
| compForegroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Foreground.<br>Affected components: [QRCode](./arkui-ts/ts-basic-components-qrcode.md) |
| compBackgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | White background.<br>Affected components: none |
| compBackgroundPrimaryTran | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | White transparent background.<br>Affected components: none |
| compBackgroundPrimaryContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Always-on background.<br>Affected components: [Toggle](./arkui-ts/ts-basic-components-toggle.md) and [Slider](./arkui-ts/ts-basic-components-slider.md) |
| compBackgroundGray | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Gray background.<br>Affected components: none |
| compBackgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary background.<br>Affected components: [Swiper](./arkui-ts/ts-container-swiper.md) and [Slider](./arkui-ts/ts-basic-components-slider.md) |
| compBackgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary background.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Progress](./arkui-ts/ts-basic-components-progress.md) and [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Button](./arkui-ts/ts-basic-components-button.md), [Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md),<br>[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md) |
| compBackgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis background.<br>Affected components: [Swiper](./arkui-ts/ts-container-swiper.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md) and [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)<br>[Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md) |
| compBackgroundNeutral | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Black, neutral, emphasis background.<br>Affected components: [PatternLock](./arkui-ts/ts-basic-components-patternlock.md) |
| compEmphasizeSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | 20% emphasis background color.<br>Affected components: [Progress](./arkui-ts/ts-basic-components-progress.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md) and [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md) |
| compEmphasizeTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | 10% emphasis background color.<br>Affected components: None |
| compDivider | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common divider color.<br>Affected components: [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [PatternLock](./arkui-ts/ts-basic-components-patternlock.md) and [Divider](./arkui-ts/ts-basic-components-divider.md) |
| compCommonContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common inverted color.<br>Affected components: None |
| compBackgroundFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Background color in the focused state.<br>Affected components: None |
| compFocusedPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary inverted color in the focused state.<br>Affected components: None |
| compFocusedSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary inverted color in the focused state.<br>Affected components: None |
| compFocusedTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary inverted color in the focused state.<br>Affected components: [Scroll](arkui-ts/ts-container-scroll.md) |
| interactiveHover | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the hover state.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) and [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactivePressed | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the pressed state.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) and [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the focused state.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) and [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveActive | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the active state.<br>Affected components: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveSelect | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the selected state.<br>Affected components: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveClick | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the clicked state.<br>Affected components: None |
| alert | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Alert color.<br>**Affected components**: N/A |
| confirm | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Confirmation color.<br>**Affected components**: N/A |
| fontSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary font color.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md),<br>[TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| fontTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary font color.<br>**Affected components**: [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md) |
| fontFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level font color.<br>**Affected components**: N/A |
| fontEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis font color.<br>**Affected components**: [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog), [ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)<br>[SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md),<br>[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Button](./arkui-ts/ts-basic-components-button.md),<br>[Select](./arkui-ts/ts-basic-components-select.md), [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md), [TextPicker](./arkui-ts/ts-basic-components-textpicker.md) |
| fontOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary inverted font color used on color background.<br>**Affected components**: [Badge](./arkui-ts/ts-container-badge.md), [Button](./arkui-ts/ts-basic-components-button.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
| fontOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary inverted font color used on color background.<br>**Affected components**: N/A|
| fontOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary inverted font color used on color background.<br>**Affected components**: N/A|
| fontOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level inverted font color used on color background.<br>**Affected components**: N/A|
| iconPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary icon color.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Swiper](./arkui-ts/ts-container-swiper.md), [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| iconSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary icon color.<br>**Affected components**: [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [LoadingProgress](./arkui-ts/ts-basic-components-loadingprogress.md)<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| iconTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary icon color.<br>**Affected components**: [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md) |
| iconFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level icon color.<br>**Affected components**: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md) |
| iconEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis icon color.<br>**Affected components**: [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md) |
| iconSubEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Color of the emphasis auxiliary icon.<br>**Affected components**: N/A |
| iconOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary inverted icon color used on color background.<br>**Affected components**: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)|
| iconOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary inverted icon color used on color background.<br>**Affected components**: [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
| iconOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary inverted icon color used on color background.<br>**Affected components**: N/A|
| iconOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level inverted icon color used on color background.<br>**Affected components**: [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md)|
| backgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary background color (solid, opaque).<br>**Affected components**: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [QRCode](./arkui-ts/ts-basic-components-qrcode.md) |
| backgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary background color (solid, opaque).<br>**Affected components**: N/A |
| backgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary background color (solid, opaque).<br>**Affected components**: N/A |
| backgroundFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Fourth-level background color (solid, opaque).<br>**Affected components**: N/A |
| backgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis background color (solid, opaque).<br>**Affected components**: [Progress](./arkui-ts/ts-basic-components-progress.md), [Button](./arkui-ts/ts-basic-components-button.md), [Slider](./arkui-ts/ts-basic-components-slider.md) |
| compForegroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Foreground.<br>**Affected components**: [QRCode](./arkui-ts/ts-basic-components-qrcode.md) |
| compBackgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | White background.<br>**Affected components**: N/A |
| compBackgroundPrimaryTran | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | White transparent background.<br>**Affected components**: N/A |
| compBackgroundPrimaryContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Always-on background.<br>**Affected components**: [Toggle](./arkui-ts/ts-basic-components-toggle.md), [Slider](./arkui-ts/ts-basic-components-slider.md) |
| compBackgroundGray | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Gray background.<br>**Affected components**: N/A |
| compBackgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary background.<br>**Affected components**: [Swiper](./arkui-ts/ts-container-swiper.md), [Slider](./arkui-ts/ts-basic-components-slider.md) |
| compBackgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary background.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Progress](./arkui-ts/ts-basic-components-progress.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Button](./arkui-ts/ts-basic-components-button.md), [Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md),<br>[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md) |
| compBackgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Emphasis background.<br>**Affected components**: [Swiper](./arkui-ts/ts-container-swiper.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)<br>[Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md) |
| compBackgroundNeutral | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Black, neutral, emphasis background.<br>**Affected components**: [PatternLock](./arkui-ts/ts-basic-components-patternlock.md) |
| compEmphasizeSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | 20% emphasis background color.<br>**Affected components**: [Progress](./arkui-ts/ts-basic-components-progress.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md) |
| compEmphasizeTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | 10% emphasis background color.<br>**Affected components**: N/A |
| compDivider | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common divider color.<br>**Affected components**: [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [PatternLock](./arkui-ts/ts-basic-components-patternlock.md), [Divider](./arkui-ts/ts-basic-components-divider.md) |
| compCommonContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common inverted color.<br>**Affected components**: N/A |
| compBackgroundFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Background color in the focused state.<br>**Affected components**: N/A |
| compFocusedPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Primary inverted color in the focused state.<br>**Affected components**: N/A |
| compFocusedSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Secondary inverted color in the focused state.<br>**Affected components**: N/A |
| compFocusedTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Tertiary inverted color in the focused state.<br>**Affected components**: [Scroll](arkui-ts/ts-container-scroll.md) |
| interactiveHover | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the hover state.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactivePressed | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the pressed state.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the focused state.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveActive | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the active state.<br>**Affected components**: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveSelect | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the selected state.<br>**Affected components**: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) |
| interactiveClick | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No | No | Common interactive color for the clicked state.<br>**Affected components**: N/A |
## CustomTheme
@@ -131,7 +131,7 @@ Defines the type for dark theme color resources.
| Type | Description |
|-----|--------------|
| Partial<[Colors](#colors)> | Customizes dark theme color resources.|
| Partial<[Colors](#colors)> | Type representing customizable dark theme color resources.|
## ThemeControl
@@ -145,7 +145,7 @@ Implements a **ThemeControl** object to apply the custom theme to the components
Applies a custom theme to an app to implement theme-based style switching. If this API is used to set the application-level default theme on a page, ensure that this API is executed before the page is built. If this API is used to set the application-level default theme in UIAbility, ensure that this API is executed in the callback function after the windowStage.[loadContent](./arkts-apis-window-Window.md#loadcontent9) API is called in the onWindowStageCreate phase. For details, see [Setting Custom Theme Colors for Application Components](../../ui/theme_skinning.md#setting-custom-theme-colors-for-application-components).
Sets a custom theme as the default, application-level theme, applying it to all components within the application. When using this API within a page, ensure that the API is called before the page's **build** API executes. When using this API within a UIAbility, ensure that the API is called in the callback after windowStage.[loadContent](./arkts-apis-window-WindowStage.md#loadcontent9) during the **onWindowStageCreate** lifecycle phase. For a complete implementation example, see [Setting Custom Theme Colors for Application Components](../../ui/theme_skinning.md#setting-custom-theme-colors-for-application-components).
**Atomic service API**: This API can be used in atomic services since API version 12.
@@ -163,8 +163,8 @@ Applies a custom theme to an app to implement theme-based style switching. If th
import { CustomTheme, CustomColors, ThemeControl } from '@kit.ArkUI';
// Custom theme color
class BlueColors implements CustomColors {
fontPrimary = Color.Red;
backgroundPrimary = Color.Blue;
fontPrimary = "#FF707070";
backgroundPrimary = "#FF2787D9";
brand = "#FFEEAAFF"; // Brand color.
}
@@ -196,8 +196,8 @@ struct Index {
QRCode('Hello')
.width(100)
.height(100)
// Apply brand to the cursor color of the text box.
Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by setOAuthTokenVisibility(#setoauthtokenvisibilitydeprecated). This API uses an asynchronous callback to return the result.
Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by [setOAuthTokenVisibility](#setoauthtokenvisibilitydeprecated). This API uses an asynchronous callback to return the result.
> **NOTE**
>
@@ -4834,7 +4834,7 @@ Obtains the authorization list of the specified authentication type for an appli
Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by setOAuthTokenVisibility(#setoauthtokenvisibilitydeprecated). This API uses a promise to return the result.
Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by [setOAuthTokenVisibility](#setoauthtokenvisibilitydeprecated). This API uses a promise to return the result.
The **ArcButton** component represents an arc button specifically designed for circular screens. It offers various button styles, such as emphasized, normal, and warning, tailored for watch UIs. For details, see [ArcButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md).
The **ArcButton** component is supported since API version 18. The **ArcButton** component represents an arc button specifically designed for circular screens. It offers various button styles, such as emphasized, normal, and warning, tailored for watch UIs. For details, see [ArcButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md).
## Creating a Button
To create an **ArcButton** component, use the following:
- [label](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions): sets the text displayed on the button.
- [position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions): sets the type of the button.
- [styleMode](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions): sets the style mode of the button.
```
[label](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions): sets the text displayed on the button.<br>[position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions): sets the type of the button.<br>[styleMode](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions): sets the style mode of the button.
@@ -33,33 +36,36 @@ The **ArcButton** component offers two types: top arc button and bottom arc butt
- Lower arc button (default type)
Set [position](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions) to **ArcButtonPosition.BOTTOM_EDGE**.
@@ -67,8 +73,9 @@ The **ArcButton** component offers two types: top arc button and bottom arc butt
- Setting the background color
Use the [backgroundColor](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions) attribute to set the background color of the button.
@@ -94,14 +101,14 @@ The **ArcButton** component offers two types: top arc button and bottom arc butt
})
})
```
- Setting the shadow color
Enable the button shadow using the [shadowEnabled](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions) attribute and set the shadow color using the [shadowColor](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md#arcbuttonoptions) attribute.
@@ -145,7 +155,22 @@ The **ArcButton** component offers two types: top arc button and bottom arc butt
This example demonstrates a brightness settings screen where a slider displays the current brightness level at 30%. When the reset button is clicked, the brightness value is reset to the default value of 50%.
```ts
To run this sample code, wearable device support is required. In the project configuration file [module.json5](../quick-start/module-configuration-file.md) located in the **src/main** directory, configure **wearable** under [devicetypes](../quick-start/module-configuration-file.md#devicetypes).
@@ -15,14 +15,14 @@ Continuous visual effects on the UI resulting from changes to animatable propert
| Animation API| Scope| Principle| Use Scenario|
| -------- | -------- | -------- | -------- |
| animateTo | UI changes caused by property changes in closures.<br>Transition for appearance and disappearance.| This API is a common function. It animates the differences between the UIs before and after state variables in the closure change.<br>This API supports multiple calls and nesting.| A single set of animation parameters is used to animate multiple properties.<br>Animations need to be nested.|
| animateTo | UI changes caused by property changes in closures.<br>Transition for appearance and disappearance.| This API is a common function. It animates the differences between the UIs before and after state variables in the closure change.<br>This API supports multiple calls and nesting.| A single set of animation parameters is used to animate multiple properties.<br>Animations need to be nested.<br>Note: To achieve multiple animation cycles, it is recommended that you set the **playMode** and **iterations** properties of [AnimateParam](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md#animateparam) or use **keyframeAnimateTo**.|
| animation | UI changes caused by property changes bound to components through property APIs.| This API automatically detects changes to animatable properties and applies animations.<br>As the API call sequence of the component is from bottom to top, this API applies only to the properties declared above it in the component chain.<br>In a component, you can set **animation** for individual properties based on the API call sequence.| Different animation parameters are used for different properties.|
| keyframeAnimateTo | Segmented property animation caused by property changes in multiple closures.| This API is a common function. It animates the difference between state variables in each closure and the previous state.<br>This API supports multiple calls, but nesting is not recommended.| Multiple animations are applied to the same property sequentially.|
> - Apply property animations only to consistently visible components. For those components whose visibility may change, use the [transition animation](arkts-transition-overview.md).
>
> - Avoid using end callbacks with property animations. Property animations are applied to states that have occurred. As such, you do not need to process the end logic. If end callbacks are needed, be sure to correctly handle the data management for continuous operations.
>
> - If transition animations are disabled in Developer options, or if the UIAbility switches from the foreground to the background, the end callback will be triggered immediately. You are advised to verify your scenario and avoid placing time‑dependent logic in this callback.
When a user's action matches the predefined characteristics of a gesture, the system interprets it as a recognized gesture. This process is known as gesture recognition. To respond to gestures, you must bind the appropriate gesture object to a component. This enables the system to detect, interpret, and dispatch gesture events accordingly.
When a user action matches the predefined characteristics of a gesture, the system recognizes it as that gesture. This process is called gesture recognition. To respond to a gesture, you need to attach a gesture object to a component so the system can collect and process the gesture input.
## Overview of Basic Gestures
## Basic Gestures and Features
| Gesture | Operation Characteristics | Triggering Example |
| Gesture | Operation Feature | Triggering Example |
| [TapGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-tapgesture.md) | A quick press and release (≤ 300 ms by default). | Tap with a finger or stylus on a touchscreen; left-click with a mouse; single tap on a touchpad. |
| [LongPressGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-longpressgesture.md) | Long press for a sustained duration. | Long press with a finger or stylus; hold down the left mouse button; long press on a touchpad. |
| [TapGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-tapgesture.md) | Quick press and release (≤ 300 ms by default). | Tap with a finger or stylus on a touchscreen; left-click with a mouse; single tap on a touchpad. |
| [LongPressGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-longpressgesture.md) | Press and hold for a sustained duration. | Long press with a finger or stylus; hold down the left mouse button; long press on a touchpad. |
| [PanGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-pangesture.md) | Press and drag (displacement-based movement). | Drag with a finger or stylus; move the mouse while holding the left button; swipe with two fingers on a touchpad; scroll the mouse wheel over a scrollable component.|
| [PinchGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-pinchgesture.md) | Pinch inward or outward using two fingers. | Pinch gesture on touchscreen or touchpad; scroll the mouse wheel while holding **Ctrl** over a pinch-enabled component. |
| [RotationGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-rotationgesture.md) | Rotate two fingers around a central point. | Rotate gesture using two fingers on a touchscreen. |
@@ -61,9 +61,9 @@ Gesture recognition is still initiated based on [hit testing](./arkts-interactio
| Custom gesture judgment | Allows applications to conditionally approve or reject a gesture before the system finalizes recognition. | [onGestureJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-customize-judge.md#ongesturejudgebegin) | Invoked when a gesture is about to be recognized as successful. The application can override the system's decision by returning a rejection, allowing other gestures to compete for recognition. |
| Enhanced gesture judgment| Provides higher-priority control over gesture recognition.| [onGestureRecognizerJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ongesturerecognizerjudgebegin13) | 1. Works similarly to **onGestureJudgeBegin**, but with higher priority.<br>2. If this API is bound, **onGestureJudgeBegin** becomes ineffective. |
| Parallel gesture control | Enables concurrent gesture recognition between parent and child components, which is useful for nested scrolling. | [shouldBuiltInRecognizerParallelWith](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#shouldbuiltinrecognizerparallelwith) | 1. Triggered when the user presses a component and the system begins collecting gesture objects.<br>2. Returns built-in gestures (currently only **PanGesture**) on the current component and previously collected gestures of the same type from child components. By default, child gestures have higher priority and override parent gestures.<br>3. This API allows you to force parallel recognition, enabling both parent and child gestures to respond.<br>4. The returned gesture object includes APIs for controlling response behavior, allowing you to implement nested scrolling (for example, the child scrolls first, and then the parent scrolls when the child reaches the boundary).<br>**NOTE**<br>This API only applies to components with built-in gestures (for example, **List** and **Swiper**). It has no effect otherwise.|
| Gesture recognition prevention | Prevents specific gestures from participating in recognition before they are processed. | [preventBegin](../reference/apis-arkui/arkui-ts/ts-gesture-common.md#preventbegin20) | 1. Triggered during the [onTouchTestDone](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ontouchtestdone20) callback when the user presses the screen.<br>2. Returns all gesture recognizers eligible for processing at the current position.<br>3. You can selectively call **preventBegin** on recognizers to exclude them from recognition, helping avoid gesture conflicts.|
| Enhanced gesture judgment| Allows applications to conditionally approve or reject a gesture before the system finalizes recognition.| [onGestureRecognizerJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ongesturerecognizerjudgebegin13) | 1. Works similarly to **onGestureJudgeBegin**, but with higher priority.<br>2. If this API is bound, **onGestureJudgeBegin** becomes ineffective. |
| Parallel gesture control | Enables concurrent gesture recognition between parent and child components, which is useful for nested scrolling. | [shouldBuiltInRecognizerParallelWith](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#shouldbuiltinrecognizerparallelwith) | 1. Triggered when the user presses a component and the system begins collecting gesture objects.<br>2. Returns built-in gestures (currently only **PanGesture**) on the current component and previously collected gestures of the same type from child components. By default, child gestures have higher priority and override parent gestures.<br>3. Allows the application to forcibly specify that the low-priority gesture (for example, pan) on the current component runs in parallel with the high-priority gesture of the same type on the child component. That is, when the high-priority gesture on the child component is successfully recognized, the gesture of the same type on the current component can also be triggered and responded to successfully.<br>4. The returned gesture object provides an API to control the enabling of gesture responses. Therefore, after gestures are set to run in parallel, the application can control the response behavior of the two parallel gestures to achieve nested scrolling (e.g., one scrolls first, and the other triggers when the edge is reached).<br>**NOTE**<br>This method only takes effect when the bound component has built-in system gestures (e.g., **List** or **Swiper**). Otherwise, it has no effect.|
| Gesture recognition prevention | Prevents specific gestures from participating in recognition before they are processed. | [preventBegin](../reference/apis-arkui/arkui-ts/ts-gesture-common.md#preventbegin20) | 1. Triggered during the [onTouchTestDone](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ontouchtestdone20) callback when the user presses the screen.<br>2. Returns all gesture recognizers eligible for processing at the current position.<br>3. You can selectively call **preventBegin** on recognizers to exclude them from recognition, helping avoid gesture conflicts.<br>This capability is supported since API version 20.|
For details, see [Gesture Conflict Handling](arkts-gesture-events-gesture-judge.md).
A semi-modal page, implemented using [bindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet), is a modal, non-full-screen popup interaction page by default, allowing parts of the underlying parent view to be visible. This helps users retain the context of their parent view while interacting with the semi-modal.
A modal sheet, implemented using [bindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet), is a modal, non-full-screen popup interaction page by default, allowing parts of the underlying parent view to be visible. This helps users retain the context of their parent view while interacting with the sheet.
Semi-modal pages are suitable for displaying simple tasks or information panels, such as personal information, text introductions, sharing panels, creating schedules, and adding content. If a semi-modal page needs to be displayed in a way that could potentially affect the parent view, it can be configured to use a non-modal interaction form.
Modal sheets are suitable for displaying simple tasks or information panels, such as personal information, text introductions, sharing panels, creating schedules, and adding content. If a sheet needs to be displayed in a way that could potentially affect the parent view, it can be configured to use a non-modal interaction form.
Semi-modal pages have different form capabilities on devices of different widths. For details about the form requirements on devices with different widths, see the [preferType](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) property. You can use **bindSheet** to build semi-modal transition effects. For details, see [Modal Transition](arkts-modal-transition.md#creating-sheet-transition-with-bindsheet). For complex or lengthy user processes, consider other transition methods instead of semi-modals, such as [full-modal transition](arkts-contentcover-page.md) and [navigation transition](arkts-navigation-navigation.md).
Modal sheets have different form capabilities on devices of different widths. For details about the form requirements on devices with different widths, see the [preferType](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) property. You can use **bindSheet** to build modal sheet transition effects. For details, see [Modal Transition](arkts-modal-transition.md#creating-sheet-transition-with-bindsheet). For complex or lengthy user processes, consider other transition methods instead of modal sheets, such as [full-modal transition](arkts-contentcover-page.md) and [navigation transition](./arkts-navigation-animation.md).
## Constraints
- When a [UIExtension](../reference/apis-arkui/js-apis-arkui-uiExtension.md) is embedded in a semi-modal, launching another semi-modal or popup window within the UIExtension is not allowed.
- When a [UIExtension](../reference/apis-arkui/js-apis-arkui-uiExtension.md) is embedded in a modal sheet, launching another modal sheet or popup window within the UIExtension is not allowed.
- In scenarios without secondary confirmation or custom close behavior, avoid using the [shouldDismiss/onWillDismiss](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) API.
## Lifecycle
The semi-modal page provides lifecycle callbacks to notify the application of the lifecycle status of the popup. These callbacks are triggered in the following order: onWillAppear -> onAppear -> onWillDisappear -> onDisappear.
The modal sheet provides lifecycle callbacks to notify the application of its lifecycle status. These callbacks are triggered in the following order: onWillAppear -> onAppear -> onWillDisappear -> onDisappear.
| onWillAppear | () => void | Callback for when the semi-modal page is about to appear (before the animation starts).|
| onAppear | () => void | Callback for when the semi-modal page appears (after the animation ends). |
| onWillDisappear | () => void | Callback for when the semi-modal page is about to disappear (before the animation starts).|
| onDisappear |() => void | Callback for when the semi-modal page disappears (after the animation ends). |
| onWillAppear | () => void | Callback for when the modal sheet is about to appear (before the animation starts).|
| onAppear | () => void | Callback for when the modal sheet appears (after the animation ends). |
| onWillDisappear | () => void | Callback for when the modal sheet is about to disappear (before the animation starts).|
| onDisappear |() => void | Callback for when the modal sheet disappears (after the animation ends). |
## Using Nested Scrolling
The priority of operations during scrolling in the content area of a semi-modal panel is as follows:
The priority of operations during scrolling in the content area of a modal sheet is as follows:
1. 1. Content at the top and content that cannot be scrolled
Swiping up: The sheet will attempt to expand upwards. If no expansion is possible, the content will scroll.
Swiping up: The modal sheet will attempt to expand upwards. If no expansion is possible, the content will scroll.
Swiping down: The panel will attempt to contract downwards. If no contraction is possible, the panel will close.
Swiping down: The modal sheet will attempt to contract downwards. If no contraction is possible, the panel will close.
2. 2. Content in the middle (scrollable both up and down)
Swiping up or down: The content will scroll until it reaches the top or bottom of the panel.
@@ -44,7 +50,7 @@ The priority of operations during scrolling in the content area of a semi-modal
By default, the nested scrolling mode for the half-modal panel is as follows: {Forward: PARENT\_FIRST, Backward: SELF\_FIRST}
If you want to define a scrollable container, such as **List** or **Scroll**, in the panel content builder, and combine it with the semi-modal's interaction capabilities, you must set the nested scrolling attributes for the scrollable container in the vertical direction.
If you want to define a scrollable container, such as **List** or **Scroll**, in the panel content builder, and combine it with the modal sheet's interaction capabilities, you must set the nested scrolling attributes for the scrollable container in the vertical direction.
```ts
.nestedScroll({
@@ -56,8 +62,10 @@ If you want to define a scrollable container, such as **List** or **Scroll**, in
To implement the secondary confirmation capability, you are advised to use the **onWillDismiss** API, with which you can handle secondary confirmation or custom close behavior in the callback.
> **NOTE**
>
> After the **onWillDismiss** API is declared, all close operations of the semi-modal page, including side swiping, touching the close button, touching the mask, and pulling down, must be implemented by calling the **dismiss** API. If this logic is not implemented, the semi-modal page will not respond to the above close operations.
> After the **onWillDismiss** API is declared, all dismiss operations of the modal sheet, including side swiping, touching the close button, touching the mask, and pulling down, must be implemented by calling the **dismiss** API. If this logic is not implemented, the modal sheet will not respond to the above dismiss operations.
After the **onWillDismiss** API is declared, it takes control over all dismiss behaviors of the semi-modal. This means that the semi-modal can be dismissed only when you explicitly call the **dismiss** API. You can customize the dismissal logic using **if** statements or other logic.
For example, you might want the semi-modal to be dismissed only when the user swipes down. Here's how you can implement this:
After the **onWillDismiss** API is declared, it takes control over all dismiss behaviors of the modal sheet. This means that the modal sheet can be dismissed only when you explicitly call the **dismiss** API. You can customize the dismissal logic using **if** statements or other logic.
For example, you might want the modal sheet to be dismissed only when the user swipes down. Here's how you can implement this:
To enhance the user experience during the swiping down action, you can use the **onWillSpringBackWhenDismiss** API.
Just like with **onWillDismiss**, after **onWillSpringBackWhenDismiss** is declared, the rebound operation during a swipe-down of the half-modal requires handling with **SpringBackAction.springBack()**; without this logic, no rebound will occur.
Here is the specific code to prevent the rebound effect when the semi-modal is swiped down:
Here is the specific code to prevent the rebound effect when the modal sheet is swiped down:
// No springBack is registered, so the half-modal will not bounce back when swiped down.
// No springBack is registered, so the modal sheet will not bounce back when swiped down.
}),
```
## Implementing Center Axis Avoidance
Center axis avoidance is supported for modal sheets since API version 14. This capability is enabled by default on 2-in-1 devices (avoidance behavior is triggered only when the window is in waterfall mode), with the default avoidance area set to the upper half of the screen. You can actively configure whether to enable center axis avoidance using the **enableHoverMode** property in [SheetOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions), and specify the display area after avoidance using the **hoverModeArea** property.
- Center axis avoidance for modal sheets does not support the subwindow capability. This restriction applies to scenarios where **showInSubWindow** in [SheetOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) is set to **true**.
- On 2-in-1 devices, center axis avoidance occurs only when the window is in waterfall mode.
Powered by the ArkTS-based declarative development paradigm, ArkUI is a simplified, high-performance UI development framework for cross-device applications. It provides the capabilities required for building the application UI, including:
- **ArkTS**
ArkTS is the preferred programming language for application development. As a superset of [TypeScript](https://www.typescriptlang.org/) (TS for short), it contains all TS features and added features, including declarative UI description, custom components, dynamic UI element extension, state management, and rendering control. State management in ArkTS provides clear page re-render processes and pipes through decorators with different functions. It covers UI component states and application states, allowing for a comprehensive data update and UI rendering mechanism across the application. To learn more about ArkTS, see [Getting Started with ArkTS](../quick-start/arkts-get-started.md).
ArkTS is the preferred programming language for application development. Extending the [TypeScript](https://www.typescriptlang.org/) ecosystem, ArkTS enhances it with capabilities tailored for application development, including declarative UI description, custom components, dynamic UI element extension, state management, and rendering control. State management in ArkTS provides clear page re-render processes and pipes through decorators with different functions. It covers UI component states and application states, allowing for a comprehensive data update and UI rendering mechanism across the application. To learn more about ArkTS, see [Getting Started with ArkTS](../quick-start/arkts-get-started.md).
- **Layout**
Layout defines how components are laid out in the UI. ArkUI offers a diverse array of layouts. Besides the basic layouts, such as linear, stack, flex, and relative, you also have access to the advanced layouts, including list, grid, and swiper, for more complex UI design needs.
Layout defines how components are laid out in the UI. ArkUI offers a diverse array of layout options. Besides the basic layouts, such as linear, stack, flex, and relative, advanced layouts including list, grid, and swiper are available for more complex UI design requirements.
- **Component**
@@ -53,7 +53,7 @@ Powered by the ArkTS-based declarative development paradigm, ArkUI is a simplifi
- Language compiler and runtime optimization: The productivity punch includes unified bytecode, efficient Foreign Function Interface (FFI), ahead-of-time (AOT), engine minimization, and type optimization.
- Promising ecosystem
ArkUI can gain traction with its relatively neutral and friendly programming language. It can tap on the ecosystems of mainstream languages and pushed toward a steady revolutionary path with standards organizations.
ArkUI can gain traction with its relatively neutral and developer-friendly programming language. It can tap on the ecosystems of mainstream languages and advance along an evolutionary path with standards organizations.
## Architecture
@@ -66,7 +66,7 @@ Powered by the ArkTS-based declarative development paradigm, ArkUI is a simplifi
- **Declarative UI frontend**
Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
Provides basic language specifications of the UI development paradigm, built-in UI components, layout, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
- **Language runtime**
Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance operating environment of the TS language.
@@ -88,7 +88,7 @@ The table below lists the main tasks involved in UI development with ArkUI.
| Get started with ArkTS | Learn the basic syntax, state management, and rendering control scenarios of ArkTS. | - [Basic Syntax Overview](state-management/arkts-basic-syntax-overview.md)<br>- [State Management](state-management/arkts-state-management-overview.md)<br>- [Rendering Control](rendering-control/arkts-rendering-control-overview.md)|
| Set component navigation and page routing| Set up navigation between components and implement page routing.| - [Component Navigation (Recommended)](arkts-navigation-navigation.md)<br>- [Page Routing](arkts-routing.md)|
| Set component navigation and page routing| Set up navigation between components and implement page routing.| - [Component Navigation (Recommended)](arkts-navigation-architecture.md)<br>- [Page Routing](arkts-routing.md)|
| Lay out components | Implement your UI using common layout techniques. | - [Layout Overview](arkts-layout-development-overview.md)|
| Use lists and grids| Work with list and grid components.| - [List and Grid Overview](arkts-list-grid-development-overview.md)|
| Use text| Integrate and manage text components such as text boxes, rich text, and styled strings. | - [Text Display](arkts-common-components-text-display.md)<br>- [Text Input](arkts-common-components-text-input.md)<br>- [Rich Text](arkts-common-components-richeditor.md)<br>- [Symbol Glyph](arkts-common-components-symbol.md)<br>- [Styled String](arkts-styled-string.md)|
@@ -119,3 +119,4 @@ The table below lists the main tasks involved in UI development with ArkUI.
(1) If a default value is specified for the parameter, it is used.
(2) If no default value is specified for the parameter, the property or API associated with that parameter is ineffective.
Customization capabilities in the ArkUI development framework allow for flexible UI development and personalization. These capabilities span various control levels, each suited for different use cases. Lower levels of customization provide closer access to foundational capabilities, offering greater flexibility but also higher development complexity and demands on developer skills.
Currently, the following customization levels are available, organized from the most basic to the most advanced:
- **Custom composition**: the most basic customization method provided by the ArkUI framework, which combines and reuses existing components through the basic capabilities of built-in and custom components to encapsulate new components. This includes basic capabilities such as encapsulation, layout, drawing, and animation.
- **Custom composition**: the most basic customization method provided by the ArkUI framework, which combines and reuses existing components through the basic capabilities of system and custom components to encapsulate new components. This includes basic capabilities such as encapsulation, layout, drawing, and animation.
- **Custom extension**: a range of modifiers, including the following, that enable the enhancement and customization of UI components in a way that is separate from the UI: [AttributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md), [GestureModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-gesture-modifier.md#gesturemodifier-1), [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1).
- **Custom nodes**: node objects with some basic capabilities of underlying entity nodes, which can be mixed and displayed with built-in components through [custom placeholder nodes](./arkts-user-defined-place-holder.md). There are three types of custom nodes: [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md), [RenderNode](../reference/apis-arkui/js-apis-arkui-renderNode.md), and [BuilderNode](../reference/apis-arkui/js-apis-arkui-builderNode.md). These nodes have customization capabilities for individual nodes, such as measurement and layout, setting basic attributes, setting event listeners, and custom drawing and content rendering.
- **Custom nodes**: node objects with some basic capabilities of underlying entity nodes, which can be mixed and displayed with system components through [custom placeholder nodes](./arkts-user-defined-place-holder.md). There are three types of custom nodes: [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md), [RenderNode](../reference/apis-arkui/js-apis-arkui-renderNode.md), and [BuilderNode](../reference/apis-arkui/js-apis-arkui-builderNode.md). These nodes have customization capabilities for individual nodes, such as measurement and layout, setting basic attributes, setting event listeners, and custom drawing and content rendering.
- **Custom rendering**: custom content rendering implemented by writing display data generated by EGL/OpenGLES or other decoded media stream data into the **NativeWindow** object, thanks to the "surface" mode of [XComponent](napi-xcomponent-guidelines.md) that exposes the **NativeWindow** object and the NDK APIs.
## A Quick Glance of Customization Capabilities
@@ -20,8 +28,8 @@
|Custom composition|Custom animation| Use [property animation](./arkts-attribute-animation-apis.md) for custom animation effects on animatable component properties.<br>Use [@AnimatableExtend](../ui/state-management/arkts-animatable-extend.md) to animate non-animatable properties.<br>Use APIs in [@ohos.animator](../reference/apis-arkui/js-apis-animator.md) to create custom animations similar to frame animations, by modifying properties frame-by-frame or integrating with custom drawing.|
|Custom extension|Attribute extension| Use [AttributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifier) for UI and style separation, dynamic setting and updating of attributes and events, and exporting and reusing across files, which is useful for component encapsulation and extending properties through exposed modifiers.<br>Use [custom modifiers](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#custom-modifier) for simplified attribute passing and extension in component encapsulation.<br> Use [AttributeUpdater](../reference/apis-arkui/js-apis-arkui-AttributeUpdater.md) for direct attribute setting to improve performance in scenarios with frequent attribute updates.|
|Custom extension|Gesture extension| Use [GestureModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-gesture-modifier.md#gesturemodifier-1) for gesture extension, adding or removing gestures dynamically, with cross-file export and reuse, which is suitable for encapsulating and reusing custom gesture handling logic.|
|Custom extension|Content extension| Use [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1) to extend or replace default component drawing with custom content.<br>Use [ContentModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-content-modifier.md#contentmodifiert) to replace component content with custom **Builder** methods in components with clear content and interaction areas.|
|Custom nodes|Component node| Use [FrameNode](arkts-user-defined-arktsNode-frameNode.md) for the following capabilities:<br>Fully custom node capability, including custom measurement, layout, and rendering, with support for dynamically adding and removing nodes, setting universal attributes, and configuring event callbacks. It is suitable for third-party frameworks with high-level languages that do not have their own rendering engines but rely on system capabilities for layout, events, animation, and rendering.<br>Native component proxy capabilities for built-in components, enabling traversal of the node tree. By using FrameNodes within the component tree, you can navigate the entire tree and access component information or register additional event listeners. This is useful for combining seamless listening APIs to implement services such as tracking, advertising SDKs, and mid-end DFX.<br>Use [TypedFrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md#typedframenode12) for creating specific types of FrameNodes, which can then be mounted with APIs of **FrameNode** to generate a custom component tree. It is ideal for seamless integration with dynamic frameworks developed in high-level programming languages.|
|Custom extension|Content extension| Use [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1) to extend or replace default component drawing with custom content.<br>Use [ContentModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-content-modifier.md#contentmodifiert) to replace component content with custom **Builder** methods in system components with clear content and interaction areas.|
|Custom nodes|Component node| Use [FrameNode](arkts-user-defined-arktsNode-frameNode.md) for the following capabilities:<br>Fully custom node capability, including custom measurement, layout, and rendering, with support for dynamically adding and removing nodes, setting universal attributes, and configuring event callbacks. It is suitable for third-party frameworks with high-level languages that do not have their own rendering engines but rely on system capabilities for layout, events, animation, and rendering.<br>Component proxy capabilities for declarative components, enabling traversal of the node tree. By using FrameNodes, you can navigate the entire component tree and access component information or register additional event listeners. This is useful for combining seamless listening APIs to implement services such as tracking, advertising SDKs, and mid-end DFX.<br>Use [TypedFrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md#typedframenode12) for creating specific types of FrameNodes, which can then be mounted with APIs of **FrameNode** to generate a custom component tree. It is ideal for seamless integration with dynamic frameworks developed in high-level programming languages.|
|Custom nodes|Rendering node| Use [RenderNode](arkts-user-defined-arktsNode-renderNode.md) for lightweight rendering nodes that provide rendering-related attribute setting, custom drawing, and node operation capabilities. It is suitable for integration with third-party frameworks without a rendering engine but relying on system animation and rendering capabilities.|
|Custom nodes| Mixing with built-in components| Use [BuilderNode](arkts-user-defined-arktsNode-builderNode.md) to create and update built-in components and component trees. It allows for the integration of declarative components within custom FrameNode or RenderNode structures, facilitating the hybrid display of built-in components with custom nodes. It also allows builder content to be exported as textures, facilitating same-layer rendering in environments created by the **XComponent**.|
|Custom nodes| Mixing with system components| Use [BuilderNode](arkts-user-defined-arktsNode-builderNode.md) to create and update system components and component trees. It allows for the integration of declarative components within custom FrameNode or RenderNode structures, facilitating the hybrid display of system components with custom nodes. It also allows builder content to be exported as textures, facilitating same-layer rendering in environments created by the **XComponent**.|
|Custom rendering| Independent rendering| Use [XComponent](napi-xcomponent-guidelines.md)'s surface mode with the NDK APIs to create a standalone rendering environment through **NativeWindow**, which enables writing display data generated by EGL/OpenGLES or other media stream data decoded through various methods into the **NativeWindow** object. This way, custom rendering is achieved without relying on other components provided by the ArkUI framework. It is suitable for frameworks that come with their own rendering engines, such as those used in gaming engines, mapping applications, and camera software.|
@@ -18,21 +18,21 @@ ArkUI provides a comprehensive infrastructure for application UI development, in
## Two Development Paradigms
ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JavaScript-compatible web-like development paradigm](ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
- **Declarative development paradigm**: uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management.
- **Declarative development paradigm**: uses the [ArkTS language](../quick-start/arkts-get-started.md), which extends TypeScript with declarative UI syntax, to provide UI drawing capabilities from three dimensions: components, animations, and state management.
- **Web-like development paradigm**: uses the classical three-stage programming model, in which <!--RP1-->HML<!--RP1End--> is used for building layouts, CSS for defining styles, and JS for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.
- **Web-like development paradigm**: uses the classical three-stage programming model, in which <!--RP1-->HML<!--RP1End--> is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.
The declarative development paradigm is a better choice for building new application UIs for the following reasons:
- **Higher development efficiency**: In the declarative development paradigm, the programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development.
- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, the declarative development paradigm does not require the JS framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage.
- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, the declarative development paradigm does not require the JavaScript framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage.
- **Future proof**: The declarative development paradigm will continue to develop as the preferred development paradigm, providing increasingly diverse and powerful capabilities.
**Figure 1** ArkUI framework
**Figure 1** ArkUI framework
@@ -46,9 +46,9 @@ The supported development paradigm varies according to the [application model](.
| Application Model | Page Form | Supported Development Paradigm |
Thank you for your continuous support to the Openl Qizhi Community AI Collaboration Platform. In order to protect your usage rights and ensure network security, we updated the Openl Qizhi Community AI Collaboration Platform Usage Agreement in January 2024. The updated agreement specifies that users are prohibited from using intranet penetration tools. After you click "Agree and continue", you can continue to use our services. Thank you for your cooperation and understanding.
AXYChen
wangxiuxiu
sxuanzhuo
LLDawn
zhongshield1
huanghello
jing-wang177
zany_pink
zhangaof
sd-wu
weixin_41848015
wendan
temptest_01
tianluowen
ge-yafang
shallowarpa
lucifinil_han
xupeipei123
chenjiafeng10
mobhot
wangkai479
hu-zhishan
esterzhou
openharmony-docs-bot
CuiShhhhhhhh
yuanlin94
Lichtschein
chendongqi
liuyongkai2
hddgzw
zhaoyixin1998
liujinglwx1400251
Lem0nC
jiangminsen
Luobniz21
chenjiafeng-opneharmony
liuyanzhi2020
lianyuanqi
qq_43273048
zzulilyw
shaazhshi
javafreemanbao
SKY2001
Li-y
chenzhiz
zhang-yubao
VoFAS
zyn_1
xiongyunchong
neusoft_group_co_ltd_cc
cy7717
sunchao106
chijunwen
guojin26
lyw
zengyawen
LeagueAssassin
hwyaobaohua
zhouge941
du-wei-zhao
laiganlu
DongLym
王忠齐
xuerunlong
LiuFeng_Again
xuzhihao666
aulight02
weizai16
wanghao1717
FreemanBao
aulight02
caochuan
wangweiyuan
