diff --git a/en/application-dev/reference/apis/js-apis-accessibility-config.md b/en/application-dev/reference/apis/js-apis-accessibility-config.md index 673d820d17407a35991da01b0b25ee48cd51c7eb..09fb6c49bf265b0a4ef22ddd38dc46370097304d 100644 --- a/en/application-dev/reference/apis/js-apis-accessibility-config.md +++ b/en/application-dev/reference/apis/js-apis-accessibility-config.md @@ -247,7 +247,7 @@ Cancels the listener for changes in the list of enabled accessibility extension | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | type | string | Yes| Listening type. The value is fixed at **'enabledAccessibilityExtensionListChange'**, indicating listening for changes in the list of enabled accessibility extension abilities.| -| callback | Callback<void> | No| Callback invoked when the list of enabled accessibility extension abilities changes.| +| callback | Callback<void> | No| Callback for the event.| **Example** @@ -425,7 +425,7 @@ Cancels the listener for attribute changes. This API uses an asynchronous callba | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| callback | Callback<T> | No| Callback invoked when the list of enabled accessibility extension abilities changes.| +| callback | Callback<T> | No| Callback for the event.| **Example** diff --git a/en/application-dev/reference/apis/js-apis-accessibility.md b/en/application-dev/reference/apis/js-apis-accessibility.md index 0b00bbfdf4c7c50ae3ffbd0d0fd1cc6effdb2f7d..2f92eaaf3052bd34f76baefc6a04de7a8d59b4a4 100644 --- a/en/application-dev/reference/apis/js-apis-accessibility.md +++ b/en/application-dev/reference/apis/js-apis-accessibility.md @@ -18,9 +18,9 @@ Enumerates the states of an accessibility application. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| enable | The accessibility application is enabled.| +| Name | Description | +| ------- | -------- | +| enable | The accessibility application is enabled.| | disable | The accessibility application is disabled.| | install | The accessibility application has been installed.| @@ -30,13 +30,13 @@ Enumerates the types of accessibility applications. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| audible | The accessibility application provides audible feedback.| -| generic | The accessibility application provides generic feedback.| -| haptic | The accessibility application provides haptic feedback.| -| spoken | The accessibility application provides spoken feedback.| -| visual | The accessibility application provides visual feedback.| +| Name | Description | +| ---------------- | --------- | +| audible | The accessibility application provides audible feedback.| +| generic | The accessibility application provides generic feedback.| +| haptic | The accessibility application provides haptic feedback.| +| spoken | The accessibility application provides spoken feedback.| +| visual | The accessibility application provides visual feedback.| | all9+ | All the preceding types.| ## AccessibilityAbilityInfo @@ -47,16 +47,16 @@ Provides information about an accessibility application. ### Attributes -| Name| Type| Readable| Writable| Description| -| -------- | -------- | -------- | -------- | -------- | -| id | string | Yes| No| Ability ID.| -| name | string | Yes| No| Ability name.| -| bundleName | string | Yes| No| Bundle name.| -| targetBundleNames9+ | Array<string> | Yes| No| Name of the target bundle.| -| abilityTypes | Array<[AbilityType](#abilitytype)> | Yes| No| Accessibility application type.| -| capabilities | Array<[Capability](#capability)> | Yes| No| Capabilities list of the accessibility application.| -| description | string | Yes| No| Description of the accessibility application.| -| eventTypes | Array<[EventType](#eventtype)> | Yes| No| List of events that the accessibility application focuses on.| +| Name | Type | Readable | Writable | Description | +| ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------- | +| id | string | Yes | No | Ability ID.| +| name | string | Yes | No | Ability name. | +| bundleName | string | Yes | No | Bundle name. | +| targetBundleNames9+ | Array<string> | Yes | No | Name of the target bundle. | +| abilityTypes | Array<[AbilityType](#abilitytype)> | Yes | No | Accessibility application type. | +| capabilities | Array<[Capability](#capability)> | Yes | No | Capabilities list of the accessibility application. | +| description | string | Yes | No | Description of the accessibility application. | +| eventTypes | Array<[EventType](#eventtype)> | Yes | No | List of events that the accessibility application focuses on. | ## Action @@ -64,24 +64,24 @@ Describes the target action supported by an accessibility application. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| click | Clicking.| -| longClick | Long pressing.| -| scrollForward | Scrolling forward. Not supported currently. | -| scrollBackward | Scrolling backward. Not supported currently. | -| focus | Obtaining focus. Not supported currently. | -| clearFocus | Clearing focus. Not supported currently. | -| clearSelection | Clearing selection. Not supported currently. | -| accessibilityFocus | Obtaining the accessibility focus. | -| clearAccessibilityFocus | Clearing the accessibility focus. | -| cut | Cut. Not supported currently. | -| copy | Copy. Not supported currently. | -| paste | Paste. Not supported currently. | -| select | Select. Not supported currently. | -| setText | Setting the text. Not supported currently. | -| delete | Delete. Not supported currently. | -| setSelection | Setting the selection. Not supported currently. | +| Name | Description | +| ----------------------- | ------------------ | +| click | Clicking. | +| longClick | Long pressing. | +| scrollForward | Scrolling forward. Not supported currently.| +| scrollBackward | Scrolling backward. Not supported currently.| +| focus | Obtaining focus. Not supported currently.| +| clearFocus | Clearing focus. Not supported currently.| +| clearSelection | Clearing selection. Not supported currently.| +| accessibilityFocus | Obtaining the accessibility focus. | +| clearAccessibilityFocus | Clearing the accessibility focus. | +| cut | Cut. Not supported currently. | +| copy | Copy. Not supported currently. | +| paste | Paste. Not supported currently. | +| select | Select. Not supported currently. | +| setText | Setting the text. Not supported currently.| +| delete | Delete. Not supported currently. | +| setSelection | Setting the selection. Not supported currently. | ## Capability @@ -89,13 +89,13 @@ Enumerates the capabilities of an accessibility application. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| retrieve | Capability to retrieve the window content.| -| touchGuide | Capability of touch guide mode.| -| keyEventObserver | Capability to filter key events.| -| zoom | Capability to control the display zoom level. Not supported currently. | -| gesture | Capability to perform gesture actions.| +| Name | Description | +| ---------------- | --------------------- | +| retrieve | Capability to retrieve the window content. | +| touchGuide | Capability of touch guide mode. | +| keyEventObserver | Capability to filter key events. | +| zoom | Capability to control the display zoom level. Not supported currently.| +| gesture | Capability to perform gesture actions. | ## CaptionsFontEdgeType8+ @@ -103,12 +103,12 @@ Enumerates the font edge types of captions. **System capability**: SystemCapability.BarrierFree.Accessibility.Hearing -| Name| Description| -| -------- | -------- | -| none | No effect.| -| raised | Raised effect.| -| depressed | Depressed effect.| -| uniform | Uniform effect.| +| Name | Description | +| ---------- | ----- | +| none | No effect. | +| raised | Raised effect.| +| depressed | Depressed effect.| +| uniform | Uniform effect.| | dropShadow | Drop shadow effect.| ## CaptionsFontFamily8+ @@ -117,16 +117,16 @@ Enumerates the font families of captions. **System capability**: SystemCapability.BarrierFree.Accessibility.Hearing -| Name| Description| -| -------- | -------- | -| default | Default font family.| -| monospacedSerif | Monospaced Serif fonts, which use the same width for each character.| -| serif | Serif fonts.| +| Name | Description | +| ------------------- | ----------------- | +| default | Default font family. | +| monospacedSerif | Monospaced Serif fonts, which use the same width for each character. | +| serif | Serif fonts. | | monospacedSansSerif | Monospaced Sans Serif fonts, which use the same width for each character.| -| sansSerif | Sans Serif fonts.| -| casual | Casual fonts.| -| cursive | Cursive fonts.| -| smallCapitals | Small caps fonts.| +| sansSerif | Sans Serif fonts. | +| casual | Casual fonts. | +| cursive | Cursive fonts. | +| smallCapitals | Small caps fonts. | ## CaptionsStyle8+ @@ -134,14 +134,14 @@ Describes the style of captions. **System capability**: SystemCapability.BarrierFree.Accessibility.Hearing -| Name| Type| Readable| Writable| Description| -| -------- | -------- | -------- | -------- | -------- | -| fontFamily | [CaptionsFontFamily](#captionsfontfamily8) | Yes| No| Font family of captions.| -| fontScale | number | Yes| No| Font scale of captions.| -| fontColor | number \| string | Yes| No| Font color of captions.| -| fontEdgeType | [CaptionsFontEdgeType](#captionsfontedgetype8) | Yes| No| Font edge type of captions.| -| backgroundColor | number \| string | Yes| No| Background color of captions.| -| windowColor | number \| string | Yes| No| Window color of captions.| +| Name | Type | Readable | Writable | Description | +| --------------- | ---------------------------------------- | ---- | ---- | ----------- | +| fontFamily | [CaptionsFontFamily](#captionsfontfamily8) | Yes | No | Font family of captions. | +| fontScale | number | Yes | No | Font scale of captions.| +| fontColor | number \| string | Yes | No | Font color of captions. | +| fontEdgeType | [CaptionsFontEdgeType](#captionsfontedgetype8) | Yes | No | Font edge type of captions. | +| backgroundColor | number \| string | Yes | No | Background color of captions. | +| windowColor | number \| string | Yes | No | Window color of captions. | ## CaptionsManager8+ @@ -151,10 +151,10 @@ Implements configuration management for captions. Before calling any API of **Ca ### Attributes -| Name| Type| Readable| Writable| Description| -| -------- | -------- | -------- | -------- | -------- | -| enabled | boolean | Yes| No| Whether to enable captions configuration.| -| style | [CaptionsStyle](#captionsstyle8) | Yes| No| Style of captions.| +| Name | Type | Readable | Writable | Description | +| ------- | -------------------------------- | ---- | ---- | ----------- | +| enabled | boolean | Yes | No | Whether to enable captions configuration.| +| style | [CaptionsStyle](#captionsstyle8) | Yes | No | Style of captions. | ### on('enableChange') @@ -164,10 +164,10 @@ Enables listening for the enabled status changes of captions configuration. This **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | Yes| Type of the event to listen for, which is set to **'enableChange'** in this API.| -| callback | Callback<boolean> | Yes| Callback invoked when the enabled status of captions configuration changes.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------- | ---- | --------------------------------------- | +| type | string | Yes | Type of the event to listen for, which is set to **'enableChange'** in this API.| +| callback | Callback<boolean> | Yes | Callback invoked when the enabled status of captions configuration changes. | **Example** @@ -190,10 +190,10 @@ Enables listening for captions style changes. This API uses an asynchronous call **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | Yes| Type of the event to listen for, which is set to **'styleChange'** in this API.| -| callback | Callback<[CaptionsStyle](#captionsstyle8)> | Yes| Callback invoked when the style of captions changes.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ---------------------------------- | +| type | string | Yes | Type of the event to listen for, which is set to **'styleChange'** in this API.| +| callback | Callback<[CaptionsStyle](#captionsstyle8)> | Yes | Callback invoked when the style of captions changes. | **Example** @@ -218,10 +218,10 @@ Disables listening for the enabled status changes of captions configuration. Thi **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | Yes| Type of the event to listen for, which is set to **'enableChange'** in this API.| -| callback | Callback<boolean> | No| Callback invoked when the enabled status of captions configuration changes.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------- | ---- | ---------------------------------------- | +| type | string | Yes | Type of the event to listen for, which is set to **'enableChange'** in this API.| +| callback | Callback<boolean> | No | Callback for the event. | **Example** @@ -244,10 +244,10 @@ Disables listening for captions style changes. This API uses an asynchronous cal **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | Yes| Type of the event to listen for, which is set to **'styleChange'** in this API.| -| callback | Callback<[CaptionsStyle](#captionsstyle8)> | No| Callback invoked when the style of captions changes.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ------------------------------------ | +| type | string | Yes | Type of the event to listen for, which is set to **'styleChange'** in this API.| +| callback | Callback<[CaptionsStyle](#captionsstyle8)> | No | Callback for the event. | **Example** @@ -272,22 +272,22 @@ Describes a GUI change event. ### Attributes -| Name| Type| Readable| Writable| Description| -| -------- | -------- | -------- | -------- | -------- | -| type | [EventType](#eventtype) | Yes| Yes| Accessibility event type.| -| windowUpdateType | [WindowUpdateType](#windowupdatetype) | Yes| Yes| Window update type.| -| bundleName | string | Yes| Yes| Target application name.| -| componentType | string | Yes| Yes| Type of the event source component, for example, button or chart.| -| pageId | number | Yes| Yes| Page ID of the event source.| -| description | string | Yes| Yes| Event description. Not supported currently. | -| triggerAction | [Action](#action) | Yes| Yes| Action that triggers the event.| -| textMoveUnit | [TextMoveUnit](#textmoveunit) | Yes| Yes| Text movement unit. Not supported currently. | -| contents | Array<string> | Yes| Yes| Array of contents.| -| lastContent | string | Yes| Yes| Latest content.| -| beginIndex | number | Yes| Yes| Sequence number of the first item displayed on the page. Not supported currently. | -| currentIndex | number | Yes| Yes| Sequence number of the current item. Not supported currently. | -| endIndex | number | Yes| Yes| Sequence number of the last item displayed on the page. Not supported currently. | -| itemCount | number | Yes| Yes| Total number of items. Not supported currently. | +| Name | Type | Readable | Writable | Description | +| ---------------- | ------------------------------------- | ---- | ---- | --------------------- | +| type | [EventType](#eventtype) | Yes | Yes | Accessibility event type. | +| windowUpdateType | [WindowUpdateType](#windowupdatetype) | Yes | Yes | Window update type. | +| bundleName | string | Yes | Yes | Target application name. | +| componentType | string | Yes | Yes | Type of the event source component, for example, button or chart. | +| pageId | number | Yes | Yes | Page ID of the event source. | +| description | string | Yes | Yes | Event description. Not supported currently. | +| triggerAction | [Action](#action) | Yes | Yes | Action that triggers the event. | +| textMoveUnit | [TextMoveUnit](#textmoveunit) | Yes | Yes | Text movement unit. Not supported currently. | +| contents | Array<string> | Yes | Yes | Array of contents. | +| lastContent | string | Yes | Yes | Latest content. | +| beginIndex | number | Yes | Yes | Sequence number of the first item displayed on the page. Not supported currently.| +| currentIndex | number | Yes | Yes | Sequence number of the current item. Not supported currently. | +| endIndex | number | Yes | Yes | Sequence number of the last item displayed on the page. Not supported currently.| +| itemCount | number | Yes | Yes | Total number of items. Not supported currently. | ### constructor @@ -299,9 +299,9 @@ Implements a constructor. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| jsonObject | string | Yes| JSON string required for creating an object.| +| Name | Type | Mandatory | Description | +| ---------- | ------ | ---- | -------------------- | +| jsonObject | string | Yes | JSON string required for creating an object.| **Example** @@ -319,19 +319,19 @@ Enumerates accessibility event types. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| click | Event of clicking a component.| -| longClick | Event of long-pressing a component.| -| select | Event of selecting a component. Not supported currently. | -| focus | Event indicating that the component obtains the focus. Not supported currently. | -| textUpdate | Event indicating that the component text has been updated. Not supported currently. | -| hoverEnter | Event indicating that the hover enters a component. Not supported currently. | -| hoverExit | Event indicating that the hover exits a component. Not supported currently. | -| scroll | Event of the scroll view. Not supported currently. | -| textSelectionUpdate | Event indicating that the selected text has been updated. Not supported currently. | -| accessibilityFocus | Event indicating that the accessibility focus has been obtained.| -| accessibilityFocusClear | Event indicating that the accessibility focus has been cleared.| +| Name | Description | +| ----------------------- | ---------------------- | +| click | Event of clicking a component. | +| longClick | Event of long-pressing a component. | +| select | Event of selecting a component. Not supported currently. | +| focus | Event indicating that the component obtains the focus. Not supported currently. | +| textUpdate | Event indicating that the component text has been updated. Not supported currently.| +| hoverEnter | Event indicating that the hover enters a component. Not supported currently. | +| hoverExit | Event indicating that the hover exits a component. Not supported currently. | +| scroll | Event of the scroll view. Not supported currently. | +| textSelectionUpdate | Event indicating that the selected text has been updated. Not supported currently.| +| accessibilityFocus | Event indicating that the accessibility focus has been obtained. | +| accessibilityFocusClear | Event indicating that the accessibility focus has been cleared. | ## TextMoveUnit @@ -339,12 +339,12 @@ Enumerates the movement units for traversing the node text. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| char | The movement unit for traversing the node text is by character.| -| word | The movement unit for traversing the node text is by word.| -| line | The movement unit for traversing the node text is by line.| -| page | The movement unit for traversing the node text is by page.| +| Name | Description | +| --------- | --------------- | +| char | The movement unit for traversing the node text is by character.| +| word | The movement unit for traversing the node text is by word. | +| line | The movement unit for traversing the node text is by line. | +| page | The movement unit for traversing the node text is by page. | | paragraph | The movement unit for traversing the node text is by paragraph.| ## WindowUpdateType @@ -353,13 +353,13 @@ Enumerates window update types. **System capability**: SystemCapability.BarrierFree.Accessibility.Core -| Name| Description| -| -------- | -------- | -| add | Window adding.| -| remove | Window deletion.| -| bounds | Window boundary change.| +| Name | Description | +| ------ | ------------------ | +| add | Window adding. | +| remove | Window deletion. | +| bounds | Window boundary change. | | active | Window activity change.| -| focus | Window focus change.| +| focus | Window focus change. | ## accessibility.getAbilityLists(deprecated) @@ -370,21 +370,21 @@ Obtains the accessibility application list. This API uses a promise to return th > **NOTE** > > This API is supported since API version 7 and deprecated since API version 9. -> You are advised to use [getAccessibilityExtensionList()](#accessibilitygetaccessibilityextensionlist9). +> You are advised to use[getAccessibilityExtensionList()](#accessibilitygetaccessibilityextensionlist9). **System capability**: SystemCapability.BarrierFree.Accessibility.Core **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| abilityType | [AbilityType](#abilitytype) | Yes| Accessibility application type.| -| stateType | [AbilityState](#abilitystate) | Yes| Accessibility application status.| +| Name | Type | Mandatory | Description | +| ----------- | ----------------------------- | ---- | -------- | +| abilityType | [AbilityType](#abilitytype) | Yes | Accessibility application type.| +| stateType | [AbilityState](#abilitystate) | Yes | Accessibility application status.| **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ---------------------------------------- | --------------------- | | Promise<Array<[AccessibilityAbilityInfo](#accessibilityabilityinfo)>> | Promise used to return the accessibility application list.| **Example** @@ -426,11 +426,11 @@ Obtains the accessibility application list. This API uses an asynchronous callba **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| abilityType | [AbilityType](#abilitytype) | Yes| Accessibility application type.| -| stateType | [AbilityState](#abilitystate) | Yes| Accessibility application status.| -| callback | AsyncCallback<Array<[AccessibilityAbilityInfo](#accessibilityabilityinfo)>> | Yes| Callback used to return the accessibility application list.| +| Name | Type | Mandatory | Description | +| ----------- | ---------------------------------------- | ---- | ---------------- | +| abilityType | [AbilityType](#abilitytype) | Yes | Accessibility application type. | +| stateType | [AbilityState](#abilitystate) | Yes | Accessibility application status. | +| callback | AsyncCallback<Array<[AccessibilityAbilityInfo](#accessibilityabilityinfo)>> | Yes | Callback used to return the accessibility application list.| **Example** @@ -470,15 +470,15 @@ Obtains the accessibility application list. This API uses a promise to return th **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| abilityType | [AbilityType](#abilitytype) | Yes| Accessibility application type.| -| stateType | [AbilityState](#abilitystate) | Yes| Accessibility application status.| +| Name | Type | Mandatory | Description | +| ----------- | ----------------------------- | ---- | -------- | +| abilityType | [AbilityType](#abilitytype) | Yes | Accessibility application type.| +| stateType | [AbilityState](#abilitystate) | Yes | Accessibility application status.| **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ---------------------------------------- | --------------------- | | Promise<Array<[AccessibilityAbilityInfo](#accessibilityabilityinfo)>> | Promise used to return the accessibility application list.| **Example** @@ -515,11 +515,11 @@ Obtains the accessibility application list. This API uses an asynchronous callba **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| abilityType | [AbilityType](#abilitytype) | Yes| Accessibility application type.| -| stateType | [AbilityState](#abilitystate) | Yes| Accessibility application status.| -| callback | AsyncCallback<Array<[AccessibilityAbilityInfo](#accessibilityabilityinfo)>> | Yes| Callback used to return the accessibility application list.| +| Name | Type | Mandatory | Description | +| ----------- | ---------------------------------------- | ---- | ---------------- | +| abilityType | [AbilityType](#abilitytype) | Yes | Accessibility application type. | +| stateType | [AbilityState](#abilitystate) | Yes | Accessibility application status. | +| callback | AsyncCallback<Array<[AccessibilityAbilityInfo](#accessibilityabilityinfo)>> | Yes | Callback used to return the accessibility application list.| **Example** @@ -557,8 +557,8 @@ Obtains a **CaptionsManager** instance. **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ------------------------------------ | ---------- | | [CaptionsManager](#captionsmanager8) | Captions configuration.| **Example** @@ -577,10 +577,10 @@ Enables listening for the enabled status changes of the accessibility applicatio **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | Yes| Type of the event to listen for, which is set to **'accessibilityStateChange'** in this API.| -| callback | Callback<boolean> | Yes| Callback used to return the result.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------- | ---- | ---------------------------------------- | +| type | string | Yes | Type of the event to listen for, which is set to **'accessibilityStateChange'** in this API.| +| callback | Callback<boolean> | Yes | Callback used to return the result. | **Example** @@ -604,10 +604,10 @@ Enables listening for the enabled status changes of the touch guide mode. This A **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | Yes| Type of the event to listen for, which is set to **'touchGuideStateChange'** in this API.| -| callback | Callback<boolean> | Yes| Callback used to return the result.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------- | ---- | ---------------------------------------- | +| type | string | Yes | Type of the event to listen for, which is set to **'touchGuideStateChange'** in this API.| +| callback | Callback<boolean> | Yes | Callback used to return the result. | **Example** @@ -631,10 +631,10 @@ Disables listening for the enabled status changes of the accessibility applicati **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | No| Type of the event to listen for, which is set to **'accessibilityStateChange'** in this API.| -| callback | Callback<boolean> | No| Callback used to return the result.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------- | ---- | ---------------------------------------- | +| type | string | No | Type of the event to listen for, which is set to **'accessibilityStateChange'** in this API.| +| callback | Callback<boolean> | No | Callback for the event. | **Example** @@ -658,10 +658,10 @@ Disables listening for the enabled status changes of the touch guide mode. This **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | string | No| Type of the event to listen for, which is set to **'touchGuideStateChange'** in this API.| -| callback | Callback<boolean> | No| Callback used to return the result.| +| Name | Type | Mandatory | Description | +| -------- | ----------------------- | ---- | ---------------------------------------- | +| type | string | No | Type of the event to listen for, which is set to **'touchGuideStateChange'** in this API.| +| callback | Callback<boolean> | No | Callback for the event. | **Example** @@ -685,8 +685,8 @@ Checks whether accessibility is enabled. This API uses a promise to return the r **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ---------------------- | ---------------------------------------- | | Promise<boolean> | Promise used to return the result. Returns **true** if accessibility is enabled; returns **false** otherwise.| **Example** @@ -709,9 +709,9 @@ Checks whether accessibility is enabled. This API uses an asynchronous callback **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| callback | AsyncCallback<boolean> | Yes| Callback used to return the result. Returns **true** if accessibility is enabled; returns **false** otherwise.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------- | ---- | ----------------------------------- | +| callback | AsyncCallback<boolean> | Yes | Callback used to return the result. Returns **true** if accessibility is enabled; returns **false** otherwise.| **Example** @@ -735,8 +735,8 @@ Checks whether touch guide mode is enabled. This API uses a promise to return th **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ---------------------- | ---------------------------------------- | | Promise<boolean> | Promise used to return the result. Returns **true** if touch guide mode is enabled; returns **false** otherwise.| **Example** @@ -759,9 +759,9 @@ Checks whether touch guide mode is enabled. This API uses an asynchronous callba **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| callback | AsyncCallback<boolean> | Yes| Callback used to return the result. Returns **true** if touch guide mode is enabled; returns **false** otherwise.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------- | ---- | ------------------------------------- | +| callback | AsyncCallback<boolean> | Yes | Callback used to return the result. Returns **true** if touch guide mode is enabled; returns **false** otherwise.| **Example** @@ -790,14 +790,14 @@ Sends an accessibility event. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| event | [EventInfo](#eventinfo) | Yes| Accessibility event.| +| Name | Type | Mandatory | Description | +| ----- | ----------------------- | ---- | -------- | +| event | [EventInfo](#eventinfo) | Yes | Accessibility event.| **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ------------------- | ---------------- | | Promise<void> | Promise that returns no value.| **Example** @@ -830,10 +830,10 @@ Sends an accessibility event. This API uses an asynchronous callback to return t **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| event | [EventInfo](#eventinfo) | Yes| Accessibility event.| -| callback | AsyncCallback<void> | Yes| Callback used to return the result. If the operation fails, **error** that contains data is returned. | +| Name | Type | Mandatory | Description | +| -------- | ------------------------- | ---- | ---------------------------------------- | +| event | [EventInfo](#eventinfo) | Yes | Accessibility event. | +| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the operation fails, **error** that contains data is returned.| **Example** @@ -862,14 +862,14 @@ Sends an accessibility event. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| event | [EventInfo](#eventinfo) | Yes| Accessibility event.| +| Name | Type | Mandatory | Description | +| ----- | ----------------------- | ---- | -------- | +| event | [EventInfo](#eventinfo) | Yes | Accessibility event.| **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ------------------- | ---------------- | | Promise<void> | Promise that returns no value.| **Example** @@ -901,10 +901,10 @@ Sends an accessibility event. This API uses an asynchronous callback to return t **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| event | [EventInfo](#eventinfo) | Yes| Accessibility event.| -| callback | AsyncCallback<void> | Yes| Callback used to return the result. If the operation fails, **error** that contains data is returned. | +| Name | Type | Mandatory | Description | +| -------- | ------------------------- | ---- | ---------------------------------------- | +| event | [EventInfo](#eventinfo) | Yes | Accessibility event. | +| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the operation fails, **error** that contains data is returned.| **Example** diff --git a/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md b/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md index a3e98a1cebd86dc45ac0e09f17ca505543d52935..4f94686f60f8964beac0159a44a476c13904ce52 100644 --- a/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md +++ b/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md @@ -433,7 +433,7 @@ try { getWindows(callback: AsyncCallback\>): void; -Obtains the list of windows on a display. This API uses an asynchronous callback to return the result. +Obtains the list of windows on this display. This API uses an asynchronous callback to return the result. **System capability**: SystemCapability.BarrierFree.Accessibility.Core @@ -610,7 +610,7 @@ Defines the accessibilityelement. Before calling APIs of **AccessibilityElement* **System capability**: SystemCapability.BarrierFree.Accessibility.Core -## attributeNames +### attributeNames attributeNames\(): Promise\>; @@ -636,7 +636,7 @@ rootElement.attributeNames().then((data) => { console.log('failed to get attribute names, because ${JSON.stringify(err)}'); }); ``` -## attributeNames +### attributeNames attributeNames\(callback: AsyncCallback\>): void; @@ -664,7 +664,7 @@ rootElement.attributeNames((err, data) => { console.info('get attribute names success'); }); ``` -## AccessibilityElement.attributeValue +### attributeValue attributeValue\(attributeName: T): Promise\; @@ -709,7 +709,7 @@ try { console.error('failed to get attribute value, because ${JSON.stringify(exception)}'); } ``` -## AccessibilityElement.attributeValue +### attributeValue attributeValue\(attributeName: T, callback: AsyncCallback\): void; @@ -752,7 +752,7 @@ try { console.error('failed to get attribute value, because ${JSON.stringify(exception)}'); } ``` -## actionNames +### actionNames actionNames(): Promise\>; @@ -778,7 +778,7 @@ rootElement.actionNames().then((data) => { console.error('failed to get action names because ${JSON.stringify(err)}'); }); ``` -## actionNames +### actionNames actionNames(callback: AsyncCallback\>): void; @@ -806,7 +806,7 @@ rootElement.actionNames((err, data) => { console.info('get action names success'); }); ``` -## performAction +### performAction performAction(actionName: string, parameters?: object): Promise\; @@ -818,8 +818,8 @@ Performs an action based on the specified action name. This API uses a promise t | Name | Type | Mandatory | Description | | ----------- | ---------------------------------------- | ---- | -------------- | -| actionName | string | Yes | Action name. For details, see [Action](./js-apis-accessibility.md#action). | -| parameters | object | No | Parameters required for performing the target action. Not supported currently. | +| actionName | string | Yes | Action name. For details, see [Action](./js-apis-accessibility.md#action). +| parameters | object | No | Parameters required for performing the target action. Empty by default. Not supported currently. | **Return value** @@ -849,7 +849,7 @@ try { console.error('failed to perform action, because ${JSON.stringify(exception)}'); } ``` -## performAction +### performAction performAction(actionName: string, callback: AsyncCallback\): void; @@ -861,7 +861,7 @@ Performs an action based on the specified action name. This API uses an asynchro | Name | Type | Mandatory | Description | | ----------- | ---------------------------------------- | ---- | -------------- | -| actionName | string | Yes | Action name. For details, see [Action](./js-apis-accessibility.md#action). | +| actionName | string | Yes | Action name. For details, see [Action](./js-apis-accessibility.md#action). | callback | AsyncCallback<void> | Yes | Callback used to return the result.| **Error codes** @@ -888,7 +888,7 @@ try { console.error('failed to perform action, because ${JSON.stringify(exception)}'); } ``` -## performAction +### performAction performAction(actionName: string, parameters: object, callback: AsyncCallback\): void; @@ -901,7 +901,7 @@ Performs an action based on the specified action name. This API uses an asynchro | Name | Type | Mandatory | Description | | ---------- | ------------------------- | ---- | ---------------------------------------- | | actionName | string | Yes | Action name. For details, see [Action](./js-apis-accessibility.md#action).| -| parameters | object | Yes | Parameters required for performing the target action. Not supported currently. | +| parameters | object | Yes | Parameters required for performing the target action. Empty by default. Not supported currently. | | callback | AsyncCallback<void> | Yes | Callback used to return the result. | **Error codes** @@ -932,7 +932,7 @@ try { console.error('failed to perform action, because ${JSON.stringify(exception)}'); } ``` -## findElement('content') +### findElement('content') findElement(type: 'content', condition: string): Promise\>; @@ -971,7 +971,7 @@ try { console.error('failed to find element, because ${JSON.stringify(exception)}'); } ``` -## findElement('content') +### findElement('content') findElement(type: 'content', condition: string, callback: AsyncCallback\>): void; @@ -1007,7 +1007,7 @@ try { console.error('failed to find element, because ${JSON.stringify(exception)}'); } ``` -## findElement('focusType') +### findElement('focusType') findElement(type: 'focusType', condition: FocusType): Promise\; @@ -1046,7 +1046,7 @@ try { console.error('failed to find element, because ${JSON.stringify(exception)}'); } ``` -## findElement('focusType') +### findElement('focusType') findElement(type: 'focusType', condition: FocusType, callback: AsyncCallback\): void; @@ -1082,7 +1082,7 @@ try { console.error('failed to find element, because ${JSON.stringify(exception)}'); } ``` -## findElement('focusDirection') +### findElement('focusDirection') findElement(type: 'focusDirection', condition: FocusDirection): Promise\; @@ -1121,7 +1121,7 @@ try { console.error('failed to find element, because ${JSON.stringify(exception)}'); } ``` -## findElement('focusDirection') +### findElement('focusDirection') findElement(type: 'focusDirection', condition: FocusDirection, callback: AsyncCallback\): void; diff --git a/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif b/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif index 90d9c7bba27ef616fb6bfdea407358df25ac6f91..60d551dd3f1de3a5443bc594c5080b5692704fd0 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif and b/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/colorFilter.gif b/en/application-dev/reference/arkui-ts/figures/colorFilter.gif new file mode 100644 index 0000000000000000000000000000000000000000..e326b328a292ca96b3c2b687128d51cce1106d27 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/colorFilter.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md index 12e26b39a1c19111f5e6feaa868d16a18d7b11ac..7ddaa3e007c8403fbd7e3e8f0df85af0ed2bc8a2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -1,6 +1,6 @@ # Blank -The **\** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent container is **\** or **\**. +The **\** component is able to automatically fill the empty spaces in the container along the main axis. It works only when the parent component is **\**, **\**, or **\**. > **NOTE** > @@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.
Default value: **Color.Transparent**
Since API version 9, this API is supported in ArkTS widgets. | +| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.
Default value: **Color.Transparent**
Since API version 9, this API is supported in ArkTS widgets.| ## Events @@ -50,7 +50,7 @@ struct BlankExample { Row() { Text('Bluetooth').fontSize(18) Blank() - Toggle({ type: ToggleType.Switch }) + Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 }) }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) }.backgroundColor(0xEFEFEF).padding(20) } @@ -80,16 +80,16 @@ struct BlankExample { Row() { Text('Bluetooth').fontSize(18) Blank().color(Color.Yellow) - Toggle({ type: ToggleType.Switch }) + Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 }) }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) Row() { Text('Bluetooth').fontSize(18) // Set the minimum width to 160. Blank('160').color(Color.Yellow) - Toggle({ type: ToggleType.Switch }) + Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 }) }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) - + }.backgroundColor(0xEFEFEF).padding(20).width('100%') } } diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index c14914b75ae50d9a2c78ee01514261e60aecfcef..ad23abd051a1cae666be7b4038e86fba30147fcc 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -29,7 +29,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description | | ---- | ---------------------------------------- | ---- | ---------------------------------------- | -| src | [PixelMap](../apis/js-apis-image.md#pixelmap7) \|ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://** path prefix are supported, which are used to access the image path provided by a Data ability.
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.
\- [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) objects are supported.
**NOTE**
- ArkTS widgets support GIF images, but the images are played only once when they are displayed.
- ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.
- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.| +| src | [PixelMap](../apis/js-apis-image.md#pixelmap7) \| ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://** prefix are supported, which are used to access the image path provided by a Data ability.
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the current application. Ensure that the application has the read permission to the files in the specified path.
\- [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) objects are supported.
- For details, see [Displaying Images](../../ui/arkts-graphics-display.md).
**NOTE**
- ArkTS widgets support GIF animations, but the animations only play once on display.
- ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file:///data/storage** prefix.
- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.| ## Attributes @@ -56,7 +56,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the > > To use shortcut keys to copy the image, the image must be in focus. To enable the image to gain focus, set both the **focusable** and **focusOnTouch** attributes to **true**. > -> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, and **animate**. +> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, and **polygon**. ### ImageInterpolation @@ -94,6 +94,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi Load and display different types of images and set the scale mode of the images. +The **overlay** attribute sets the mask text of an image. For details, see [Overlay](ts-universal-attributes-overlay.md). + ```ts @Entry @Component @@ -225,7 +227,7 @@ struct Index { ``` > **NOTE** -> +> > For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module. ### Setting Attributes @@ -416,4 +418,86 @@ struct LoadImageExample { } } ``` - \ No newline at end of file + +### Applying a Filter to an Image + +```ts +// xxx.ets +@Entry +@Component +struct colorFilterExample { + @State colorFilterR: number = 0 + @State colorFilterG: number = 0 + @State colorFilterB: number = 0 + @State colorFilterA: number = 0 + + build() { + Row() { + Column() { + Image($r('app.media.sky')) + .width(200) + .height(200) + Image($r('app.media.sky')) + .width(200) + .height(200) + .colorFilter([ + this.colorFilterR, 0, this.colorFilterR, 0, 0, + 0, this.colorFilterG, this.colorFilterG, 0, 0, + this.colorFilterB, 0, this.colorFilterB, 0, 0, + 0, 0, this.colorFilterA, 0, 0 + ]) + + Row() { + Text('R') + Slider({ + min: 0, + max: 1, + step: 0.01 + }) + .onChange((valueR) => { + this.colorFilterR = valueR + }) + } + + Row() { + Text('G') + Slider({ + min: 0, + max: 1, + step: 0.01 + }) + .onChange((valueG) => { + this.colorFilterG = valueG + }) + } + + Row() { + Text('B') + Slider({ + min: 0, + max: 1, + step: 0.01 + }) + .onChange((valueB) => { + this.colorFilterB = valueB + }) + } + + Row() { + Text('A') + Slider({ + min: 0, + max: 1, + step: 0.01 + }) + .onChange((valueA) => { + this.colorFilterA = valueA + }) + } + }.width('90%').alignItems(HorizontalAlign.Center) + }.height('100%').width('100%').justifyContent(FlexAlign.Center) + } +} +``` + +![colorFilter](figures/colorFilter.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 90705e2c5a20844a2346e45dee5835c128054aec..bc6f5ef081cf9c51067f4e15c63cf2f12482ce6e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -24,7 +24,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| value | string | Yes| Content of the QR code. A maximum of 256 characters are supported. If the number of characters exceeds 256, the first 256 characters are used.| +| value | string | Yes| Content of the QR code. A maximum of 256 characters are supported. If the number of characters exceeds 256, the first 256 characters are used.
**NOTE**
The string cannot be **null**, **undefined**, or empty.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 875a75dd8059e56227fd9559368a073487c74c47..87fd75b9dfa56bf3ad799ce9d491f278b505623a 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -10,17 +10,25 @@ The size attributes set the width, height, and margin of a component. ## Attributes -| Name | Type | Description | -| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| width | [Length](ts-types.md#length) | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| -| height | [Length](ts-types.md#length) | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| +| Name | Type | Description | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| width | [Length](ts-types.md#length) | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| +| height | [Length](ts-types.md#length) | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| | size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | Size of the component.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| | padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| | margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| -| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
}
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| -| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.
The value can be a number greater than or equal to 0 or a string that can be converted to a number.| +| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. Learn [how the value of this attribute affects the width and height](#impact-of-constraintsize-on-widthheight).
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
}
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API supports the calc calculation feature.| +## Impact of constraintSize on width/height +| Size Arrangement | Result | +| ---------------------------------------- | ------------------ | +| minWidth/minHeight < width/height< maxWidth/maxHeight | width/height | +| minWidth/minHeight < maxWidth/maxHeight < width/height | maxWidth/maxHeight | +| maxWidth/maxHeight < minWidth/minHeight < width/height | minWidth/minHeight | +| maxWidth/maxHeight < width/height< minWidth/minHeight | minWidth/minHeight | +| width/height < maxWidth/maxHeight < minWidth/minHeight | minWidth/minHeight | +| width/height < minWidth/minHeight < maxWidth/maxHeight | minWidth/minHeight | ## Example ```ts