From e2817db6adbf392f7bfa88e0588686925566f38f Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Thu, 14 Jul 2022 20:02:00 +0800 Subject: [PATCH] update docs Signed-off-by: ester.zhou --- .../arkui-js/js-components-basic-input.md | 173 ++++++++---------- .../arkui-ts/ts-basic-components-image.md | 8 +- .../arkui-ts/ts-methods-alert-dialog-box.md | 36 ++-- .../arkui-ts/ts-universal-events-touch.md | 63 ++++--- .../ui/ts-application-states-appstorage.md | 2 +- 5 files changed, 136 insertions(+), 146 deletions(-) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-input.md b/en/application-dev/reference/arkui-js/js-components-basic-input.md index ed725f472c..1f10982593 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-input.md @@ -1,106 +1,99 @@ # input +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + The **\** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more. ## Required Permissions None -## Child Component - -Not supported - -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +## Child Components +Not supported -| Name | Type | Default Value | Mandatory | Triggered when | -| --------------------- | -------------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | -| type | string | text | No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.The **button**, **checkbox**, and **radio** types cannot be dynamically modified. Available values include:
-**button**: a button that can be clicked
-**checkbox**: a check box
-**radio**: a radio button that allows users to select one from multiple others with the same name
-**text**: a single-line text field
-**email**: a field used for an email address
-**date**: date control, including the year, month, and day, but excluding time
-**time**: time control, without the time zone
-**number**: field for entering digits
-**password**: password field, in which characters will be shieldedNOTE:For wearables, only **button**, **radio**, and **checkbox** types are supported. | -| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | -| name | string | - | No | Name of the input component. | -| value | string | - | No | Value of the input component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name. | -| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. | -| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. If no value is specified, the number of characters is not limited. | -| enterkeytype | string | default | No | Dynamic modification is not supported.Available values include:
-default
-next
-go
-done
-send
-Search
NOTE:The soft keyboard is automatically collapsed after you click the **Enter** button, except when **next** is displayed for the button. | -| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG. | -| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | -| menuoptions5+ | Array\<[MenuOption](js-components-basic-input.md)> | - | No | Menu options displayed after users touch the **More** button. | -| autofocus6+ | boolean | false | No | Whether to automatically obtain the focus.NOTE:This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**. | -| selectedstart6+ | number | -1 | No | Start position for text selection. | -| selectedend6+ | number | -1 | No | End position for text selection. | -| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | -| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. The setting is valid only when **type** is set to **password**. | - -**Table 1** MenuOption5+ +## Attributes +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. + +| Name | Type | Default Value | Mandatory| Description | +| -------------------------------- | ----------------------- | --------- | ---- | ------------------------------------------------------------ | +| type | string | text
| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.
The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.
The **button**, **checkbox**, and **radio** types cannot be dynamically modified.
- **button**: a button that can be clicked.
- **checkbox**: a check box.
- **radio**: a radio button that allows users to select one from multiple others with the same name.
- **text**: a single-line text field.
- **email**: a field used for an email address.
- **date**: date component, including the year, month, and day, but excluding time.
- **time**: time component, without the time zone.
- **number**: field for entering digits.
- **password**: password field, in which characters will be shielded.| +| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | +| name | string | - | No | Name of the **\** component.
This attribute is mandatory when **type** is set to **radio**. | +| value | string | - | No | Value of the **\** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| +| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.| +| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.| +| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.
Available values include:
- default
- next
- go
- done
- send
- search
Except for the **next** type, clicking the Enter key hides the soft keyboard.| +| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.| +| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | +| menuoptions5+ | Array<MeunOption> | - | No | Menu options displayed after users click the **More** button. | +| autofocus6+ | boolean | false | No | Whether to automatically obtain focus.
This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.| +| selectedstart6+ | number | -1 | No | Start position for text selection. | +| selectedend6+ | number | -1 | No | End position for text selection. | +| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | +| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | + +**Table 1** MenuOption5+ + +| Name | Type | Description | +| ------- | ------ | ----------- | +| icon | string | Path of the icon for a menu option.| +| content | string | Text content of a menu option.| -| Name | Type | Triggered when | -| ------- | ------ | ----------------------------------- | -| icon | string | Path of the icon for a menu option. | -| content | string | Text content of a menu option. | ## Styles -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. - +In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. +| Name | Type | Default Value | Mandatory| Description | +| ------------------------ | -------------------------- | ---------- | ---- | ------------------------------------------------------------ | +| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. | +| font-size | <length> | 16px | No | Font size of the single-line text box or button. | +| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| +| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.| +| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\** component](../arkui-js/js-components-basic-text.md).| +| caret-color6+ | <color> | - | No | Color of the input cursor. | -| Name | Type | Default Value | Mandatory | Triggered when | -| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | -| color | \ | #e6000000 | No | Font color of the single-line text box or button. | -| font-size | \ | 16px | No | Font size of the single-line text box or button. | -| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.NOTE:If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. | -| placeholder-color | \ | #99000000 | No | Color of the hint text in the single-line text box. This attribute is available when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. | -| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see [font-weight](js-components-basic-text.md) of the **text** component. | -| caret-color6+ | \ | - | No | Color of the input cursor. | ## Events -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. - -- When the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. - - +In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. - | Name | Parameter | Triggered when | - | -------------- | ------------------------------------------ | ------------------------------------------------------------ | - | change | { value:inputValue } | Triggered when the content entered in the text box changes. The most recent text entered by the user is returned.NOTE:If you change the **value** attribute directly, this event will not be triggered. | - | enterkeyclick | { value:enterKey } | Triggered when the **Enter** key on a soft keyboard is pressed. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
-**2**: returned if **enterkeytype** is **go**.
-**3**: returned if **enterkeytype** is **search**.
-**4**: returned if **enterkeytype** is **send**.
-**5**: returned if **enterkeytype** is **next**.
-**6**: returned if **enterkeytype** is **default**, **done**, or is not set.
| - | translate5+ | { value: selectedText } | Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned. | - | share5+ | { value: selectedText } | Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned. | - | search5+ | { value: selectedText } | Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned. | - | optionselect5+ | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned. | - | selectchange6+ | { start: number, end: number } | Triggered when the text selection changes. | +- When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. + | Name | Parameter | Description | + | ------------------------- | ---------------------------------------- | ---------------------------------------- | + | change | {
 value: inputValue
 } | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.
If you change the **value** attribute directly, this event will not be triggered.| + | enterkeyclick | {
 value: enterKey
 } | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
- **2**: returned if **enterkeytype** is **go**.
- **3**: returned if **enterkeytype** is **search**.
- **4**: returned if **enterkeytype** is **send**.
- **5**: returned if **enterkeytype** is **next**.
- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.| + | translate5+ | {
 value: selectedText
 } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| + | share5+ | {
 value: selectedText
 } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| + | search5+ | {
 value: selectedText
 } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| + | optionselect5+ | {
 index: optionIndex,
 value: selectedText
 } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.| + | selectchange6+ | {
start: number,
end: number
 } | Triggered when the text selection changes. | -- When the input component type is set to **checkbox** or **radio**, the following events are supported. - - - - | Name | Parameter | Triggered when | - | ------ | ------------------------- | ------------------------------------------------------------ | - | change | { checked:true \| false } | Triggered when the checked status of the **checkbox** or **radio** button changes. | +- When **type** is set to **checkbox** or **radio**, the following events are supported. + | Name | Parameter | Description | + | ------ | ---------------------------------------- | ---------------------------------------- | + | change | {
 checked:true \| false 
} | Triggered when the checked status of the **checkbox** or **radio** button changes.| ## Methods -In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. - - +In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. -| Name | Parameter | Triggered when | -| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| focus | {focus:true\|false}: If **focus** is not passed, the default value **true** is used. | Obtains or loses the focus of a component. When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed. | -| showError | { error: string } | Displays the error message. This attribute is available when the component type is set to text, email, date, time, number, or password. | -| delete6+ | - | Deletes the text content based on the current cursor position when the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. If the current input component does not have a cursor, the last character is deleted and the cursor is displayed by default. | +| Name | Parameter | Description | +| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| focus | {
 focus: true\|false
 }:
If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.| +| showError | {
 error: string 
} | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.| +| delete6+ | - | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.| -## Example Code +## Example 1. Single-line text box - - ``` + ```html
``` - ``` + ```css /* xxx.css */ .content { width: 60%; @@ -127,7 +120,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -151,24 +144,21 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m } ``` - ![img](figures/1-2.png) + ![1-2](figures/1-2.png) 2. Common button - - ``` + ```html
``` - ``` + ```css /* xxx.css */ .div-button { flex-direction: column; align-items: center; - - } .button { margin-top: 30px; @@ -176,31 +166,27 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m } ``` - ![img](figures/en-us_image_0000001198898293.png) + ![en-us_image_0000001198898293](figures/en-us_image_0000001198898293.png) 3. Check box - - ``` + ```html
-
``` - ``` + ```css /* xxx.css */ .content{ width: 100%; height: 200px; - - align-items: center; justify-content: center; } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -213,11 +199,10 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m } ``` - ![img](figures/en-us_image_0000001173324749.png) + ![en-us_image_0000001173324749](figures/en-us_image_0000001173324749.png) 4. Radio button - - ``` + ```html
@@ -226,7 +211,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
``` - ``` + ```css /* xxx.css */ .content{ width: 100%; @@ -236,7 +221,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -251,4 +236,4 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m } ``` - ![img](figures/1-3.png) \ No newline at end of file + ![1-3](figures/1-3.png) 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 05b905e244..64576ef03c 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 @@ -15,7 +15,7 @@ ohos.permission.INTERNET (to use Internet images) ## Child Components -None +Not supported ## APIs @@ -25,15 +25,15 @@ Image(src: string | PixelMap | Resource) - Parameters | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image address, which can be the address of an Internet or a local image.
When using resources 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.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. | + | src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image address, which can be the address of an Internet or a local image.
When using resources 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.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. | ## Attributes | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| alt | string | - | Placeholder image displayed during loading. Both local and Internal URIs are supported. | -| objectFit | ImageFit | ImageFit.Cover | Image scale type. | +| alt | string \| [Resource](../../ui/ts-types.md#resource-type) | - | Placeholder image displayed during loading. Both local and Internal URIs are supported. | +| objectFit | ImageFit | Cover | Image scale type. | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | ImageRepeat.NoRepeat | Whether the image is repeated.
**NOTE**
This attribute is not applicable to SVG images. | | interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is valid only when the image is zoomed in.
**NOTE**
- This attribute is not applicable to SVG images.
- This attribute is not applicable to a **PixelMap** object. | | renderMode | ImageRenderMode | Original | Rendering mode of the image.
**NOTE**
This attribute is not applicable to SVG images. | diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index c8d6a77bf8..5e3b97e8d2 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -1,49 +1,51 @@ # Alert Dialog Box -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -You can set the text content and response callback for an alert dialog box. +The **** component is used to display an alert dialog box. You can set the text content and response callback for an alert dialog box as needed. ## Attributes - | Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| show | options: { paramObject1\| paramObject2} | - | Defines and displays the **<AlertDialog>** component. | +| show | options: { paramObject1 \| paramObject2} | - | Defines and displays the **** component. | - paramObject1 parameters | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | title | string \|[Resource](../../ui/ts-types.md#resource) | | | Title of a dialog box. | - | message | string \|[Resource](../../ui/ts-types.md#resource) | | | Content of the dialog box. | + | title | string \| [Resource](../../ui/ts-types.md#resource-type) | No | - | Title of a dialog box. | + | message | string \| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Content of the dialog box. | | autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. | - | confirm | {
value: string \|[Resource](../../ui/ts-types.md#resource),
fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),
backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),
action: () => void
}
| | | Text content, text color, background color, and click callback of the confirm button. | + | confirm | {
value: string \| [Resource](../../ui/ts-types.md#resource-type),
fontColor?: Color\| number \| string \| [Resource](../../ui/ts-types.md),
backgroundColor?:Color \| number \| string \| [Resource](../../ui/ts-types.md),
action: () => void
}
| No | - | Text content, text color, background color, and click callback of the confirm button. | | cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. | - | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. | - | offset | {
dx: Length \|[Resource](../../ui/ts-types.md#resource),
dy: Length \|[Resource](../../ui/ts-types.md#resource)
} | | | Offset of the dialog box relative to the alignment position. | + | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. | + | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource-type),
dy: Length \| [Resource](../../ui/ts-types.md)
} | No | - | Offset of the dialog box relative to the alignment position. | | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. | - paramObject2 parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | title | string \|[Resource](../../ui/ts-types.md#resource) | No | - | Title of a dialog box. | - | message | string \|[Resource](../../ui/ts-types.md#resource) | Yes | - | Content of the dialog box. | + | title | string \| [Resource](../../ui/ts-types.md#resource-type) | No | - | Title of a dialog box. | + | message | string \| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Content of the dialog box. | | autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. | - | primaryButton | {
value: string \|[Resource](../../ui/ts-types.md#resource),
fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),
backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),
action: () => void
}
| | | Text content, text color, background color, and click callback of the primary button. | - | secondaryButton | {
value: string \|[Resource](../../ui/ts-types.md#resource),
fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),
backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),
action: () => void
}
| | | Text content, text color, background color, and click callback of the secondary button. | + | primaryButton | {
value: string \| [Resource](../../ui/ts-types.md#resource-type),
fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md),
backgroundColor?:Color \| number\| string\| [Resource](../../ui/ts-types.md),
action: () => void
}
| No | - | Text content, text color, background color, and click callback of the primary button. | + | secondaryButton | {
value: string \|[Resource](../../ui/ts-types.md#resource-type),
fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md),
backgroundColor?:Color \| number\| string\| [Resource](../../ui/ts-types.md),
action: () => void
}
| No | - | Text content, text color, background color, and click callback of the secondary button. | | cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. | - | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. | - | offset | {
dx: Length \|[Resource](../../ui/ts-types.md#resource),
dy: Length \|[Resource](../../ui/ts-types.md#resource)
} | | | Offset of the dialog box relative to the alignment position. | + | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. | + | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource-type),
dy: Length \| [Resource](../../ui/ts-types.md#resource-type)
} | No | - | Offset of the dialog box relative to the alignment position. | | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct AlertDialogExample { diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md index e3c239b6d2..58833a25b0 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -1,5 +1,6 @@ # Touch Event +A touch event is triggered when a finger is pressed, slides, or is lifted from a component. > **NOTE** > @@ -13,49 +14,51 @@ None ## Events -| Name | Bubbling Supported | Description | -| -------- | -------- | -------- | -| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent). | +| Name | Bubbling Supported| Description | +| ---------------------------------------- | ---- | ---------------------------------------- | +| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).| ## TouchEvent - Attributes - | Name | Type | Description | - | -------- | -------- | -------- | - | type | TouchType | Type of a touch event. | - | touches | Array<[TouchObject](#touchobject)> | All finger information. | - | changedTouches | Array<[TouchObject](#touchobject)> | Finger information changed. | - | timestamp | number | Timestamp of the event. | - | target8+ | [EventTarget](ts-universal-events-click.md#eventtarget8) | Target of the event. | + | Name | Type | Description | + | ------------------- | ---------------------------------------- | ------------ | + | type | TouchType | Type of the touch event. | + | touches | Array<[TouchObject](#touchobject)> | All finger information. | + | changedTouches | Array<[TouchObject](#touchobject)> | Finger information changed.| + | timestamp | number | Timestamp of the event. | + | target8+ | [EventTarget](ts-universal-events-click.md#eventtarget8) | Target of the event. | + - APIs - | API | Description | - | -------- | -------- | - | stopPropagation(): void | Bubbling of the stop event. | + | Name | Description | + | ---------------------- | ------- | + | stopPropagation(): void| Stops the event from bubbling upwards or downwards.| + ## TouchObject -| Name | Type | Description | -| -------- | -------- | -------- | -| type | [TouchType](#touchtype) | Type of a touch event. | -| id | number | Unique identifier of a finger. | -| screenX | number | X coordinate of the touch point relative to the left edge of the screen. | -| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. | -| x | number | X coordinate of the touch point relative to the left edge of the element to touch. | -| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. | - -## TouchType -| Name | Description | -| -------- | -------- | -| Down | Trigger a touch event when a finger is pressed. | -| Up | Trigger a touch event when a finger is lifted. | -| Move | Trigger a touch event when a finger moves on the screen in pressed state. | -| Cancel | Trigger an event when a touch event is canceled. | +| Name | Type | Description | +| ------- | --------------------------- | ------------------- | +| type | [TouchType](#touchtype-enums) | Type of the touch event. | +| id | number | Unique identifier of a finger. | +| screenX | number | X-coordinate of the touch point relative to the left edge of the screen. | +| screenY | number | Y-coordinate of the touch point relative to the upper edge of the device screen. | +| x | number | X-coordinate of the touch point relative to the left edge of the element being touched. | +| y | number | Y-coordinate of the touch point relative to the upper edge of the element being touched. | -## Example +## TouchType Enums +| Name | Description | +| ------ | --------------- | +| Down | A finger is pressed. | +| Up | A finger is lifted. | +| Move | A finger moves on the screen in pressed state.| +| Cancel | A touch event is canceled. | +## Example + ```ts // xxx.ets @Entry diff --git a/en/application-dev/ui/ts-application-states-appstorage.md b/en/application-dev/ui/ts-application-states-appstorage.md index 66f9e82115..ac77b40dd5 100644 --- a/en/application-dev/ui/ts-application-states-appstorage.md +++ b/en/application-dev/ui/ts-application-states-appstorage.md @@ -62,7 +62,7 @@ struct ComponentA { @StorageProp('languageCode') lang: string = 'en' private label: string = 'count' - private aboutToAppear() { + aboutToAppear() { this.label = (this.lang === 'en') ? 'Number' : 'Count' } -- GitLab