diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index 1b4f2c165ed231af18e4ad15a9588247fd60d161..e5aa84e29ece1a1a11f91a0a66fc6526bdc1b2ab 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -20,11 +20,11 @@ Creates a date picker in the given date range. **Parameters** -| Name | Type| Mandatory | Description | -| -------- | ---- | ---- | -------------------------------------- | -| start | Date | No | Start date of the picker.
Default value: **Date('1970-1-1')** | -| end | Date | No | End date of the picker.
Default value: **Date('2100-12-31')**| -| selected | Date | No | Date of the selected item.
Default value: current system date | +| Name | Type| Mandatory| Description | +| -------- | -------- | ---- | ------------------------------------------------------------ | +| start | Date | No | Start date of the picker.
Default value: **Date('1970-1-1')** | +| end | Date | No | End date of the picker.
Default value: **Date('2100-12-31')** | +| selected | Date | No | Date of the selected item.
Default value: current system date
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md index a4616a22ad0712d5fe1d419f5d3a981c1fb6876f..305f14aa458274050f5c182ab8131d921ff91bf6 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md @@ -36,7 +36,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| selected | boolean | Whether the menu item is selected.
Default value: **false** | +| selected | boolean | Whether the menu item is selected.
Default value: **false**
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | selectIcon | boolean \| [ResourceStr](ts-types.md#resourcestr)10+ | Whether to display the selected icon for a menu item is selected.
Default value: **false**
**true**: When a menu item is selected, the default tick icon is displayed.
**false**: When a menu item is selected, no icon is displayed.
**ResourceStr**: When a menu item is selected, the specified icon is displayed.| | contentFont10+ | [Font](ts-types.md#font) | Font style of the menu item content. | | contentFontColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu item content. | @@ -47,7 +47,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| onChange | (selected: boolean) => void | Triggered when the selection status of the menu item is changed manually.
The value **true** means that the menu item is selected, and **false** means the opposite. | +| onChange | (selected: boolean) => void | Triggered when the selection status of the menu item is changed manually.
The value **true** means that the menu item is selected, and **false** means the opposite.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md index ee4275214beebdb3abd55b5eab9a8934f5f0226c..b76cb22dd303044b2e7456859da454cd815d957a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md @@ -31,7 +31,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| checked | boolean | Whether the radio button is selected.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| checked | boolean | Whether the radio button is selected.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | radioStyle10+ | [RadioStyle](#radiostyle) | Style of the radio button in selected or deselected state.
Since API version 10, this API is supported in ArkTS widgets.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md index 1b7b256be8889e800345b24a58d1b4d56afca3dc..efc15c08f744eb3cf89c534a2bc21d8397d729b2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -20,10 +20,10 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Description | -| --------- | ------- | ---- | ---------------------------------------- | -| rating | number | Yes | Value to rate.
Default value: **0**
Value range: [0, stars]
A value less than 0 evaluates to the value **0**. A value greater than the value of **stars** evaluates to the value of **stars**.| -| indicator | boolean | No | Whether the component is used only as an indicator and cannot be operated.
Default value: **false**
**NOTE**
When **indicator** is set to **true**, the default component height is 12.0 vp, and the component width is calculated as follows: Height x Value of **stars**.
When **indicator** is set to **false**, the default component height is 28.0 vp, and the component width is calculated as follows: Height x Value of **stars**.| +| Name | Type| Mandatory| Description | +| --------- | -------- | ---- | ------------------------------------------------------------ | +| rating | number | Yes | Value to rate.
Default value: **0**
Value range: [0, stars]
A value less than 0 evaluates to the value **0**. A value greater than the value of **stars** evaluates to the value of **stars**.
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| +| indicator | boolean | No | Whether the component is used only as an indicator and cannot be operated.
Default value: **false**
**NOTE**
When **indicator** is set to **true**, the default component height is 12.0 vp, and the component width is calculated as follows: Height x Value of **stars**.
When **indicator** is set to **false**, the default component height is 28.0 vp, and the component width is calculated as follows: Height x Value of **stars**.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md index 9ad4212ae53e93d286b2bdb4816bfa84b85ac39c..16a4df18ac1ff7b20ba22b935418ddeb710f3bab 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -20,7 +20,7 @@ Search(options?: { value?: string; placeholder?: ResourceStr; icon?: string; con | ----------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | | value | string | No | Text input in the search text box.
Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).| | placeholder | [ResourceStr](ts-types.md#resourcestr)10+ | No | Text displayed when there is no input. | -| icon | string | No | Path to the search icon. By default, the system search icon is used.
For details about the supported image types, see [Image](ts-basic-components-image.md).| +| icon | string | No | Path to the search icon. By default, the system search icon is used.
**NOTE**
The icon data source can be a local or online image.
- The supported formats include PNG, JPG, BMP, SVG, GIF, and pixelmap.
- The Base64 string is supported in the following format: data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.| | controller | SearchController | No | Controller of the **\** component. | ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md index 8bb39f7eaa9cad64eb6c56936a42ddd88eaa75c6..06ea2a8cfc12b54048c6a91c70313fcc48c876f9 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -23,24 +23,35 @@ Select(options: Array\<[SelectOption](#selectoption)\>) ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + | Name | Type | Description | | ----------------------- | ------------------------------------- | --------------------------------------------- | -| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.
If this attribute is not set, the default value **-1** is used, indicating that no option is selected.| -| value | string | Text of the drop-down button. | -| font | [Font](ts-types.md#font) | Text font of the drop-down button. | -| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button. | -| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box. | -| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. | -| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box. | -| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box. | -| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. | -| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box. | +| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.
If this attribute is not set, the default value **-1** is used, indicating that no option is selected.
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| +| value | string | Text of the drop-down button. By default, it will be replaced by the content of the selected option.
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| +| font | [Font](ts-types.md#font) | Text font of the drop-down button.
Default value:
{
size: '16fp',
weight: FontWeight.Medium
} | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button.
Default value: **'\#E6FFFFFF'**| +| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box.
Default value: **'\#33007DFF'**| +| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box.
Default value:
{
size: '16fp',
weight: FontWeight.Regular
} | +| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box.
Default value: **'\#ff007dff'**| +| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box.
Default value: **'\#ffffffff'**| +| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box.
Default value:
{
size: '16fp',
weight: FontWeight.Regular
} | +| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box.
Default value: **'\#ff182431'**| +| space10+ | [Length](ts-types.md#length) | Spacing between the text and arrow of an option.
**NOTE**
This attribute cannot be set in percentage.| +| arrowPosition10+ | [ArrowPosition](#arrowposition10) | Alignment between the text and arrow of an option.
Default value: **ArrowPosition.END**| + +## ArrowPosition10+ + +| Name | Description | +| ------------------- | ------------------ | +| END10+ | The text is in front of the arrow.| +| START10+ | The arrow is in front of the text.| ## Events -| Name | Description | -| ----------------------------------------------------------- | ------------------------------------------------------------ | -| onSelect(callback: (index: number, value?: string) => void) | Invoked when an option in the drop-down list box is selected.
**index**: index of the selected option.
**value**: value of the selected option. | +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onSelect(callback: (index: number, value?: string) => void) | Invoked when an option in the drop-down list box is selected.
**index**: index of the selected option.
**value**: value of the selected option.| ## Example @@ -49,20 +60,28 @@ Select(options: Array\<[SelectOption](#selectoption)\>) @Entry @Component struct SelectExample { + @State text: string = "TTTTT" + @State index: number = 2 + @State space: number = 8 + @State arrowPosition: ArrowPosition = ArrowPosition.END build() { Column() { Select([{ value: 'aaa', icon: "/common/public_icon.svg" }, { value: 'bbb', icon: "/common/public_icon.svg" }, { value: 'ccc', icon: "/common/public_icon.svg" }, { value: 'ddd', icon: "/common/public_icon.svg" }]) - .selected(2) - .value('TTTTT') + .selected(this.index) + .value(this.text) .font({ size: 16, weight: 500 }) .fontColor('#182431') .selectedOptionFont({ size: 16, weight: 400 }) .optionFont({ size: 16, weight: 400 }) - .onSelect((index: number) => { + .space(this.space) + .arrowPosition(this.arrowPosition) + .onSelect((index:number, text: string)=>{ console.info('Select:' + index) + this.index = index; + this.text = text; }) }.width('100%') } diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index efc17049a39e3a97e1ae038ac7f18c7b3b255fd2..4958173d84c8894bd661ddfd0cdfd05f9041b251 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| value | number | No| Current progress.
Default value: **0**| +| value | number | No| Current progress.
Default value: min
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | min | number | No| Minimum value.
Default value: **0**| | max | number | No| Maximum value.
Default value: **100**
**NOTE**
If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.
If the value is not within the [min, max] range, the value of **min** or **max**, whichever is closer.| | step | number | No| Step of the slider.
Default value: **1**
Value range: [0.01, max]
**NOTE**
If this parameter is set to a value less than 0 or a percentage, the default value is used.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md index 5b29d3de61a0454ec72890a778ffd61420fe3ad9..fac942c34194b86dbb92ce27f21a85c57f5fa409 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md @@ -22,7 +22,7 @@ Stepper(value?: { index?: number }) | Name| Type| Mandatory | Description| | ------| -------- | --------------- | -------- | -| index | number | No| Index of the **\** that is currently displayed.
Default value: **0**| +| index | number | No| Index of the **\** that is currently displayed.
Default value: **0**
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 244b6990bba8d9ccc0817e5eb96b8769d38530df..f3af7b67cb3eb17ada3be85777566ce874b1a72e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -21,7 +21,7 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex | Name | Type | Mandatory | Description | | ----------------------- | ---------------------------------------- | ---- | -------------- | | placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Placeholder text displayed when there is no input. It is not displayed once there is any input. | -| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.
If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,
so as to prevent display errors when the component is updated. | +| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.
If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,
so as to prevent display errors when the component is updated.
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | controller8+ | [TextAreaController](#textareacontroller8) | No | Text area controller.| @@ -36,7 +36,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment of the text.
Default value: **TextAlign.Start**| | caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box. | | inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.| +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but the copy and cut operations are not.| > **NOTE** > @@ -47,13 +47,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
- **value**: text entered. | -| onEditChange(callback: (isEditing: boolean) => void)10+ | Triggered when the input status changes. When the cursor is placed in the text box, it is in the editing state. Otherwise, it is in the non-editing state. If the value of **isEditing** is **true**, text input is in progress. | -| onCopy8+(callback:(value: string) => void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
- **value**: text to be copied. | -| onCut8+(callback:(value: string) => void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
- **value**: text to be cut. | -| onPaste8+(callback:(value: string) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
- **value**: text to be pasted. | +| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
- **value**: text entered.| +| onEditChange(callback: (isEditing: boolean) => void)10+ | Triggered when the input status changes. When the cursor is placed in the text box, it is in the editing state. Otherwise, it is in the non-editing state. If the value of **isEditing** is **true**, text input is in progress.| +| onCopy8+(callback:(value: string) => void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
- **value**: text to be copied.| +| onCut8+(callback:(value: string) => void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
- **value**: text to be cut.| +| onPaste8+(callback:(value: string) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
- **value**: text to be pasted.| ## TextAreaController8+ @@ -81,14 +81,14 @@ Sets the position of the caret. setTextSelection(selectionStart: number, selectionEnd: number): void -Sets the text selection range. +Sets the text selection range and highlights the selected text when the component is focused. This API works only when the value of **selectionStart** is less than that of **selectionEnd**. **Parameters** -| Name | Type| Mandatory| Description | -| -------------- | -------- | ---- | ------------------ | -| selectionStart | number | Yes | Start of the selection range.| -| selectionEnd | number | Yes | End of the selection range.| +| Name | Type| Mandatory| Description | +| -------------- | -------- | ---- | ------------------------------------------------------------ | +| selectionStart | number | Yes | Start position of the text selection range. The start position of text in the text box is 0.
A value less than 0 evaluates to the value **0**. A value greater than the maximum text length evaluates to the maximum text length.
| +| selectionEnd | number | Yes | End position of the text selection range.
A value less than 0 evaluates to the value **0**. A value greater than the maximum text length evaluates to the maximum text length.
| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index cf42e030a17593607b5d4ff4a5c0711ed9dc22ad..588f88057abe66a553dd25dc8337503b8786e65a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -21,7 +21,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | Name | Type | Mandatory | Description | | ----------------------- | ---------------------------------------- | ---- | --------------- | | placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Placeholder text displayed when there is no input. | -| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.
If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,
so as to prevent display errors when the component is updated. | +| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.
If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,
so as to prevent display errors when the component is updated.
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | controller8+ | [TextInputController](#textinputcontroller8) | No | Text input controller.| @@ -42,7 +42,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | showPasswordIcon9+ | boolean | Whether to display the show password icon at the end of the password text box.
Default value: **true**| | style9+ | [TextInputStyle](#textinputstyle9) | Text input style.
Default value: **TextInputStyle.Default**| | textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.
Default value: **TextAlign.Start** | -| selectedBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.| +| selectedBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.
If the opacity is not set, the color is opaque. For example, **0x80000000** indicates black with 50% opacity.| | caretStyle10+ | {
width: [Length](ts-types.md#length)
} | Caret style. | | caretPosition10+ | number | Caret position.| @@ -81,15 +81,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onChange(callback: (value: string) => void) | Triggered when the input changes.
**value**: text content.
This event is triggered when any of the following conditions is met:
1. Keyboard input is received.
2. Paste and cut is performed.
3. Ctrl+V is pressed. | -| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.
**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype). | -| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended. | -| onEditChange(callback: (isEditing: boolean) => void)8+ | Triggered when the input status changes. When the cursor is placed in the text box, it is in the editing state. Otherwise, it is in the non-editing state. If the value of **isEditing** is **true**, text input is in progress. | -| onCopy(callback:(value: string) => void)8+ | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be copied. | -| onCut(callback:(value: string) => void)8+ | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be cut. | -| onPaste(callback:(value: string) => void)8+ | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be pasted. | +| onChange(callback: (value: string) => void) | Triggered when the input changes.
**value**: text content.
This event is triggered when any of the following conditions is met:
1. Keyboard input is received.
2. Paste and cut is performed.
3. Ctrl+V is pressed.| +| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.
**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).| +| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.| +| onEditChange(callback: (isEditing: boolean) => void)8+ | Triggered when the input status changes. When the cursor is placed in the text box, it is in the editing state. Otherwise, it is in the non-editing state. If the value of **isEditing** is **true**, text input is in progress.| +| onCopy(callback:(value: string) => void)8+ | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be copied.| +| onCut(callback:(value: string) => void)8+ | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be cut.| +| onPaste(callback:(value: string) => void)8+ | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be pasted.| ## TextInputController8+ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md index 831d427ccc5e558a6119408f105a0277a888323b..633e92d812e4aca2db4c68842a0e6745732c52b1 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -20,9 +20,9 @@ Creates a time picker, which is in 24-hour format by default. **Parameters** -| Name | Type| Mandatory | Description | -| -------- | ---- | ---- | ------------------------ | -| selected | Date | No | Time of the selected item.
Default value: current system time| +| Name | Type| Mandatory| Description | +| -------- | -------- | ---- | ------------------------------------------------------------ | +| selected | Date | No | Time of the selected item.
Default value: current system time
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 191c4839533806a43c41e2c27f500dd10ca18e8d..7a78929dca57da1194d9454042286393f8a773b2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory | Description | | ---- | ---------- | -----| -------------- | | type | [ToggleType](#toggletype) | Yes | Type of the toggle.| -| isOn | boolean | No | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.
Default value: **false**| +| isOn | boolean | No | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.
Default value: **false**
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| ## ToggleType @@ -31,9 +31,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | -------- | ---------------- | -| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | +| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 12 px,
right: 12 px,
bottom: 12 px,
left: 12 px
} | | Button | Button type. The set string, if any, will be displayed inside the button. | -| Switch | Switch type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right:6 vp,
bottom: 6 vp,
left: 14 vp
} | +| Switch | Switch type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 6px,
right: 14px,
bottom: 6 px,
left: 14 px
} | ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index ed5df7b82fd0f73742ca53af4920172c90398fe5..df19454da7610c2d52acfd958c7c35e0e3073e33 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -21,7 +21,7 @@ AlphabetIndexer(value: {arrayValue: Array<string>, selected: number}) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | arrayValue | Array<string> | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.| -| selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. | +| selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used.
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| ## Attributes @@ -38,9 +38,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | selectedFont | [Font](ts-types.md#font) | Font style of the selected text.
Default value:
{
size:10,
style:FontStyle.Normal,
weight:FontWeight.Normal,
family:'HarmonyOS Sans'
} | | popupFont | [Font](ts-types.md#font) | Font style of the pop-up text.
Default value:
{
size:10,
style:FontStyle.Normal,
weight:FontWeight.Normal,
family:'HarmonyOS Sans'
} | | font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.
Default value:
{
size:10,
style:FontStyle.Normal,
weight:FontWeight.Normal,
family:'HarmonyOS Sans'
} | -| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.
Default value: **24.0** | +| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.
Default value: **24.0**
Unit: vp| | alignStyle | value: [IndexerAlign](#indexeralign),
offset10+?: [Length](ts-types.md#length) | Alignment style of the alphabetic index bar.
**value**: alignment of the alphabetic index bar with the pop-up window, which can be left-aligned or right-aligned.
Default value: **IndexerAlign.Right**
**offset**: spacing between the pop-up window and the alphabetic index bar. A value greater than or equal to 0 is valid. If this attribute is set to a value less than 0 or is not set, the spacing is the same as **popupPosition.x**.| -| selected | number | Index of the selected item.
Default value: **0**| +| selected | number | Index of the selected item.
Default value: **0**
Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.
Default value: **{x:96.0, y:48.0}**| | popupSelectedColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected text excluding the initial letter in the pop-up window.
Default value: **#FF182431**| | popupUnselectedColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Color of the unselected text in the pop-up window.
Default value: **#FF182431**| @@ -56,7 +56,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Events -Only the following events are supported. +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. | Name| Description| | -------- | -------- | diff --git a/en/application-dev/reference/arkui-ts/ts-container-panel.md b/en/application-dev/reference/arkui-ts/ts-container-panel.md index 14fe7d33b3a061db80c361c620bd1010c4624806..bc38624a2bfaa00817283a74515a1ecfd647f2cd 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md @@ -33,7 +33,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | | type | [PanelType](#paneltype)| Type of the panel.
Default value: **PanelType.Foldable**| -| mode | [PanelMode](#panelmode) | Initial status of the panel.
Default value for the Minibar type: **PanelMode.Mini**
Default value for other types: **PanelMode.Half**
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. | +| mode | [PanelMode](#panelmode) | Initial status of the panel.
Default value for the Minibar type: **PanelMode.Mini**
Default value for other types: **PanelMode.Half**
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.
Default value: **true**| | fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.
Default value: main axis height of the panel minus 8 vp
**NOTE**
This attribute cannot be set in percentage.| | halfHeight | string \| number | Panel height in the **PanelMode.Half** mode.
Default value: half of the main axis height of the panel
**NOTE**
This attribute cannot be set in percentage.| diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index fdf1227af8f71876d7d1207bf2f205e3fcc053e3..6900431ed2d867680b5f6135325a1c6565b9a430 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.
Default value: **SwiperDisplayMode.Stretch**| | cachedCount8+ | number | Number of child components to be cached.
Default value: **1**
**NOTE**
**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | -| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.
Default value: **Curve.Ease**| +| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.
Default value: **Curve.Linear**| | indicatorStyle8+ | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator.
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.| | displayCount8+ | number \| string | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.| | effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**
**NOTE**
The spring effect does not take effect when the controller API is called.|