diff --git a/en/application-dev/napi/xcomponent-guidelines.md b/en/application-dev/napi/xcomponent-guidelines.md index dd365dd461a3bf868451b047aecd1c8f68c5b390..87b0b1e6acf114c1b6ad9b2f39ccfd7804c1adcc 100644 --- a/en/application-dev/napi/xcomponent-guidelines.md +++ b/en/application-dev/napi/xcomponent-guidelines.md @@ -81,7 +81,7 @@ The following describes how to use the **\** to call the native APIs // ... ``` -2. Register the N-API module. For details, see [Using Native APIs in Application Projects](https://gitee.com/openharmony/docs/blob/master/en/application-dev/napi/napi-guidelines.md). +2. Register the N-API module. For details, see [Using Native APIs in Application Projects](napi-guidelines.md). ```c++ // In the napi_init.cpp file, use the Init method to register the target function to transfer the encapsulated C++ methods for the JS side to call. 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 7c6b79a16898c80b42b96943ef522f367ba54aa2..ef9d12fecedb1ed99f5b9873189f9d955af2d126 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 @@ -33,7 +33,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.
Default value: **'#99182431'** | | placeholderFont | [Font](ts-types.md#font) | Placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported. | | textFont | [Font](ts-types.md#font) | Style of the text entered in the search box, including the font size, font width, font family, and font style. Currently, only the default font family is supported. | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode in the search text box.
Default value: **TextAlign.Start** | +| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode in the search text box. Currently, the following alignment modes are supported: **Start**, **Center**, and **End**.
Default value: **TextAlign.Start** | | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
Default value: **CopyOptions.LocalDevice**
If this attribute is set to **CopyOptions.None**, the text can be pasted, but copy or cut is not allowed. | | searchIcon10+ | [IconOptions](#iconoptions10) | Style of the search icon on the left. | | cancelButton10+ | {
style? : [CancelButtonStyle](#cancelbuttonstyle10)
icon?: [IconOptions](#iconoptions10)
} | Style of the Cancel button on the right.
Default value:
{
style: CancelButtonStyle.INPUT
} | @@ -55,7 +55,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type | Mandatory| Description| | ------ | ------------------------------------------ | ---- | -------- | -| width | [Length](ts-types.md#length) | No | Caret width.| +| width | [Length](ts-types.md#length) | No | Caret size. It cannot be set in percentage.| | color | [ResourceColor](ts-types.md#resourcecolor) | No | Caret color.| ## SearchButtonOptions10+ 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 a9a5642fda606b7bdcd7727abdee23b6f6dc0b35..8ad5bc6f8c228ff3766f9a64fa3c8f48f31a2c7f 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 @@ -43,14 +43,14 @@ Except touch target attributes, the universal attributes are supported. | Name| Type| Description| | -------- | -------- | -------- | -| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.
Since API version 9, this API is supported in ArkTS widgets.| +| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When **SliderBlockType.DEFAULT** is used, **blockColor** sets the color of the round slider.
When **SliderBlockType.IMAGE** is used, `blockColor` does not work as the slider has no fill color.
When **SliderBlockType.SHAPE** is used, **blockColor** sets the color of the slider in a custom shape.| | trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.
Since API version 9, this API is supported in ArkTS widgets.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.
Since API version 9, this API is supported in ArkTS widgets.| | showSteps | boolean | Whether to display the current step.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| | showTips | value: boolean,
content10+?: [ResourceStr](ts-types.md#resourcestr) | **value**: whether to display a tooltip when the user drags the slider.
Default value: **false**
**content**: text content of the tooltip. The default value is the current percentage.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider.
The drawing area of the tooltip is the overlay of the slider.
If no margin is set for the slider or the margin is not large enough, the tooltip will be clipped.| | trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than or equal to 0 evaluates to the default value.| -| blockBorderColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.| -| blockBorderWidth10+ | [Length](ts-types.md#length) | Border width of the slider in the block direction.| +| blockBorderColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.
**NOTE**
When **SliderBlockType.DEFAULT** is used, **blockBorderColor** sets the border color of the round slider.
When **SliderBlockType.IMAGE** is used, **blockBorderColor** does not work as the slider has no border.
When **SliderBlockType.SHAPE** is used, **blockBorderColor** sets the border color of the slider in a custom shape.| +| blockBorderWidth10+ | [Length](ts-types.md#length) | Border width of the slider in the block direction.
**NOTE**
When **SliderBlockType.DEFAULT** is used, **blockBorderWidth** sets the border width of the round slider.
When **SliderBlockType.IMAGE** is used, **blockBorderWidth** does not work as the slider has no border.
WWhen **SliderBlockType.SHAPE** is used, **blockBorderWidth** sets the border width of the slider in a custom shape.| | stepColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Step color.| | trackBorderRadius10+ | [Length](ts-types.md#length) | Radius of the rounded corner of the slider track.| | blockSize10+ | [SizeOptions](ts-types.md#sizeoptions) | Size of the slider in the block direction.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md index 345d24c0d915ca5d0acf747ea829d3b567f2d152..8cf661eea08a46c79fc59d1363afee22103f3e1d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -25,9 +25,43 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name | Type | Description | -| ------ | --------------- | ------------------------------------------------------------ | -| format | string | Time format.
The date separator is a slash (/), and the time separator is a colon (:).
For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd,
and hhmmss is displayed as hh:mm:ss.
Only one digit is required for the time format. This means that **"hhmmss"** is equivalent to **"hms"**.
Supported time format strings:
- YYYY/yyyy: four-digit year
- YY/yy: last two digits of year
- M: one-digit month (MM for two-digit month, for example, 01)
- d: one-digit day (dd for two-digit day, for example, 01)
- D: number of days that have elapsed in the year
- H: 24-hour format
- h: 12-hour format
- m: minute
- s: second
- SSS: millisecond
If the specified format does not match the supported formats, the default value is used.
Default value: **'hms'**| +| Name | Type| Description | +| ------ | -------- | ------------------------------------------------------------ | +| format | string | Time format.
**y**: year
**M**: month
**d**: day
**E**: day of week (Prioritize the full name; use the abbreviation only when the space is insufficient.)
H: hour (0-23) h: hour (1-12)
**m**: minute
**s**: second
**SS**: centisecond
**SSS**: millisecond
**a**: morning/afternoon (valid only in the 12-hour system)
Separator: slash (/), hyphen (-), period (.), or any custom separator.
You can make your own combination of the time format. That is, the year, month, day, day of week, hour, minute, second, and millisecond can display on their own.
| + +The following table shows how different settings of **format** work out. + +| Input Format | Display Effect| +| ------------------------------------------------------------ | ------ | +| EEEE, M, d, yyyy | Saturday, February 4, 2023| +| MMM d, yyyy | February 4, 2023 | +| EEEE, M, d | Saturday, February 4 | +| MMM dd | February 4 | +| MM/dd/yyyy | 02/04/2023 | +| EEEE MM dd | Saturday February 04 | +| yyyy | 2023 | +| yy | 23 | +| MM | February | +| M | February| +| dd (complete date)| 04| +| d | 4| +| EEEE (full name)| Saturday| +| E, EE, EEE (abbreviation)| Sat| +| MMM d, yyyy| February 4, 2023| +| yyyy/M/d | 2023/2/4 | +| yyyy-M-d | 2023-2-4 | +| yyyy.M.d | 2023.2.4 | +| HH:mm:ss| 17:00:04 | +| aa hh:mm:ss| 5:00:04 AM| +| hh:mm:ss| 5:00:04 | +| HH:mm| 17:00 | +| aa hh:mm| 5:00 AM| +| hh:mm| 5:00 | +| mm:ss| 00:04 | +| mm:ss.SS| 00:04.91 | +| mm:ss.SS| 00:04.536 | +| hh:mm:ss aa | 5:00:04 AM| +| HH | 17 | ## Events @@ -74,7 +108,7 @@ struct Second { .fontSize(20) // Display the system time in 12-hour format for the UTC+8 time zone, accurate to seconds. TextClock({ timeZoneOffset: -8, controller: this.controller }) - .format('hms') + .format('aa hh:mm:ss') .onDateChange((value: number) => { this.accumulateTime = value }) diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index 86b924cdc24f71291ed592877833a14b6d5448b3..68e64c40e5d17e2369d787a605b729f262c9c2bc 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -15,7 +15,9 @@ This component can contain a single child component. Since API version 9, this API is supported in ArkTS widgets. -**API 1**: ListItem(value?: ListItemOptions)10+ +### ListItem10+ + +ListItem(value?: ListItemOptions) **Parameters** @@ -23,15 +25,17 @@ Since API version 9, this API is supported in ArkTS widgets. | ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | | value | [ListItemOptions](#listitemoptions10) | No | Value of the list item, containing the **style** parameter of the **ListItemStyle**enum type.| -**API 2**: ListItem(value?: string)(deprecated) +### ListItem(deprecated) + +ListItem(value?: string) -This API is deprecated since API version 10. You are advised to use API 1 instead. +This API is deprecated since API version 10. You are advised to use [ListItem10+](#listitem10) instead. **Parameters** | Name| Type | Mandatory| Description| | ------ | ----------------------------- | ---- | -------- | -| value | string(deprecated) | No | N/A | +| value | string | No | N/A | ## Attributes @@ -85,7 +89,7 @@ For a list in horizontal layout, it refers to the delete item displayed below (o | Name | Type | Mandatory| Description | | ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ | -| style | [ListItemStyle](#listitemstyle10) | No | Style of the list item.
Default value: **ListItemStyle.NONE**
If this parameter is set to **ListItemStyle.NONE**, no style is applied.
If this parameter is set to **ListItemStyle.CARD**, the default card style is applied, but only when **ListItemGroupStyle.CARD** is set for [\](ts-container-listitemgroup.md).
In the default card style, the list item has a 48 vp height and 100% width. It can be in focus, hover, press, selected, or disable style depending on the state.
**NOTE**
In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**. | +| style | [ListItemStyle](#listitemstyle10) | No | Style of the list item.
Default value: **ListItemStyle.NONE**
If this parameter is set to **ListItemStyle.NONE**, no style is applied.
If this parameter is set to **ListItemStyle.CARD**, the default card style is applied, but only when **ListItemGroupStyle.CARD** is set for [\](ts-container-listitemgroup.md).
In the default card style, the list item has a 48 vp height and 100% width. It can be in focus, hover, press, selected, or disable style depending on the state.
**NOTE**
In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**.| ## ListItemStyle10+ @@ -173,7 +177,7 @@ struct ListItemExample2 { this.arr.splice(index, 1) }) }, - actionAreaDistance: 80, + actionAreaDistance: 56, onEnterActionArea: () => { this.enterEndDeleteAreaString = "enterEndDeleteArea" this.exitEndDeleteAreaString = "not exitEndDeleteArea"