diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264366.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264366.png new file mode 100644 index 0000000000000000000000000000000000000000..212290aaf09896bef738026b0c519eb9b5d21de2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264366.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422906.PNG b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422906.PNG new file mode 100644 index 0000000000000000000000000000000000000000..854d21cc4692e51e8eac70f5644f4362a58ee640 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422906.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582854.PNG b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582854.PNG new file mode 100644 index 0000000000000000000000000000000000000000..0a8168a0a1041188a2a090bd380c2a9f5f6306a7 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582854.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898500.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898500.png deleted file mode 100644 index f27757afb281875f5cd4fca0e4b86684cdf0f1a8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898500.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218462.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218462.gif deleted file mode 100644 index 1be92ae9b4a61f304b91c5b03f7b0e799ac679fa..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218462.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744189.PNG b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744189.PNG new file mode 100644 index 0000000000000000000000000000000000000000..3bcd5aa32b3ae31928a9691864fa792a9733b162 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744189.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858413.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858413.gif deleted file mode 100644 index 791930fb1f2f681dac85167f646dbcf88d121882..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858413.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978365.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978365.gif deleted file mode 100644 index 8da8a4adcc50c16eafb2378f0bbab0706471ae8b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978365.gif and /dev/null differ 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 21d4f71e0c0c71ccbd5b571380f20552f7abcd48..5ba70754a095b5cc00d3f317e62b9a9b7cb6471d 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 @@ -19,6 +19,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) 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')**| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md b/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md index 66e15d7285648a52f5c558d1f204674975804b76..b0d69a921883805f7a4686af464214869ff46578 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md @@ -18,12 +18,14 @@ RemoteWindow(target: WindowAnimationTarget) Creates a **\** through a window animation object. -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | target | [WindowAnimationTarget](#windowanimationtarget) | Yes| - | Description of the animation window to control.| +**Parameters** + +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| target | [WindowAnimationTarget](#windowanimationtarget) | Yes| - | Description of the animation window to control.| ## WindowAnimationTarget + Implements a target window, which is used to remotely control the animation. | Name | Type | Description| @@ -34,6 +36,7 @@ Implements a target window, which is used to remotely control the animation. | missionId | number | Mission ID.| ## RRect + Implements a rounded rectangle. | Name | Type | Description| 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 fab2a885c671b6b480cbf672aa46e66730ff5cb6..b8bf88b154875799dbaa04ace76d8ea12fcc5d03 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 @@ -24,7 +24,7 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty | min | number | No| Minimum value.
Default value: **0**| | max | number | No| Maximum value.
Default value: **100**| | step | number | No| Step of the slider.
Default value: **1**
Value range: [0.01, max]| -| style | SliderStyle | No| Style of the slider thumb and track.
Default value: **SliderStyle.OutSet**| +| style | [SliderStyle](#sliderstyle) | No| Style of the slider thumb and track.
Default value: **SliderStyle.OutSet**| | direction8+ | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.
Default value: **Axis.Horizontal**| | reverse8+ | boolean | No| Whether the slider values are reversed. By default, the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider.
Default value: **false**| 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 96dcafda243b4c930476bafbd8d172ab50a49ab2..b7a72430211190079eec4d628a61658bb664bc21 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 @@ -53,7 +53,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Next | The Enter key is labeled "Next."| | Done | The Enter key is labeled "Done." | -## InputType enums +## InputType | Name | Description | | ------------------ | ------------- | @@ -70,7 +70,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Default | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text. | | Inline | Inline input style. The background height of the selected text is the same as the height of the text box. | -## Event +## Events In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 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 12e1dd5287c21a12499361c6acae498ad11671f6..f1f8e0b31d765b58e10b43d23f19ffdab04bac1d 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 @@ -26,9 +26,9 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) ## ToggleType | Name | Description | | -------- | ---------------- | -| Checkbox | Check box type.
> **NOTE**
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | +| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | | 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 [padding](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | +| Switch | Switch type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | ## Attributes @@ -36,7 +36,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) | Name | Parameter | Description | | ---------------- | --------------------------- | ---------------------- | | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.| -| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
> **NOTE**
> This attribute is valid only when **type** is set to **ToggleType.Switch**.| +| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
**NOTE**
This attribute is valid only when **type** is set to **ToggleType.Switch**. | ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md index d4a6320eb4ea942eeb262aa9973155fc0c1f972b..64aae057f5b24c1640fe2765bf6cd2ef2a5745c7 100644 --- a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -6,18 +6,19 @@ Continuous recognition, parallel recognition, and exclusive recognition are supp > > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - ## APIs GestureGroup(mode: GestureMode, ...gesture: GestureType[]) -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.| - | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.| +**Parameters** + +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.| +| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.| ## GestureMode + | Name| Description| | -------- | -------- | | Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.| diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 98f9a6f785e635125a6c8837526e9c6b1ac9084d..91e41e1a16163adb8ccd9f1d2fdb00d59ebd903f 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -19,6 +19,7 @@ This component supports only one child component. Creates a badge. **Parameters** + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | count | number | Yes| - | Number of notifications.| diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index a2de237b09f26589ff262ea1cabe89273bec72d9..e29fd91fd85ab9142191700d2b73042fe7f77440 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -3,15 +3,11 @@ The **\** component allows for flexible layout of child components. > **NOTE** +> > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\](ts-container-column.md)** or **[\](ts-container-row.md)** instead under scenarios where consistently high performance is required. -## Required Permissions - -None - - ## Child Components Supported @@ -23,14 +19,15 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle Creates a standard **\** component. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | - | direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | - | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. | - | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. | - | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. | - | alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. | +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | +| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | +| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. | +| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. | +| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. | +| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. | ## Example @@ -96,7 +93,7 @@ struct FlexExample1 { } ``` -![en-us_image_0000001256978365](figures/en-us_image_0000001256978365.gif) +![en-us_image_0000001219744189](figures/en-us_image_0000001219744189.PNG) ```ts // xxx.ets @@ -142,7 +139,7 @@ struct FlexExample2 { } ``` -![en-us_image_0000001211898500](figures/en-us_image_0000001211898500.png) +![en-us_image_0000001174264366](figures/en-us_image_0000001174264366.png) ```ts // xxx.ets @@ -191,7 +188,7 @@ struct FlexExample3 { } ``` -![en-us_image_0000001212218462](figures/en-us_image_0000001212218462.gif) +![en-us_image_0000001174582854](figures/en-us_image_0000001174582854.PNG) ```ts // xxx.ets @@ -289,4 +286,4 @@ struct FlexExample5 { } ``` -![en-us_image_0000001256858413](figures/en-us_image_0000001256858413.gif) +![en-us_image_0000001174422906](figures/en-us_image_0000001174422906.PNG) diff --git a/en/application-dev/reference/arkui-ts/ts-container-grid.md b/en/application-dev/reference/arkui-ts/ts-container-grid.md index feea5dbcaed85e2f145d67425b7907a7110cacaf..db7aaa87e31c0e1cc15c90035a6b210a00faf8e1 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/en/application-dev/reference/arkui-ts/ts-container-grid.md @@ -17,6 +17,7 @@ This component contains the child component **[\](ts-container-gridite Grid(scroller?: Scroller) **Parameters** + | Name | Type | Mandatory | Description | | --------- | ---------------------------------------- | ---- | ----------------------- | | scroller | [Scroller](ts-container-scroll.md#scroller) | No | Scroller, which can be bound to scrollable components.| diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md index 266360307d199b1bfcbc713829b861efe66044c1..8522382eb79c938150837fae77a8067f63f19517 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md @@ -16,6 +16,7 @@ This component can contain the **\** child component. GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) **Parameters** + | Name|Type|Mandatory|Description| |-----|-----|----|----| |gutter|Length \| GutterOption| No |Gutter of the grid layout. **x** indicates the horizontal direction.| @@ -37,11 +38,11 @@ Describes the numbers of grid columns for different device width types. | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | number | No | Device of the minimum size. | -| sm | number | No | Small-sized device. | -| md | number | No | Medium-sized device. | -| lg | number | No | Large-sized device. | -| xl | number | No | Extra-large-sized device. | -| xxl | number | No | Ultra-large-sized device. | +| sm | number | No | Small-sized device. | +| md | number | No | Medium-sized device. | +| lg | number | No | Large-sized device. | +| xl | number | No | Extra-large-sized device. | +| xxl | number | No | Ultra-large-sized device. | ## GridRowSizeOption @@ -50,11 +51,11 @@ Describes the gutter sizes for different device width types. | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | Length | No | Device of the minimum size. | -| sm | Length | No | Small-sized device. | -| md | Length | No | Medium-sized device. | -| lg | Length | No | Large-sized device. | -| xl | Length | No | Extra-large-sized device. | -| xxl | Length | No | Ultra-large-sized device. | +| sm | Length | No | Small-sized device. | +| md | Length | No | Medium-sized device. | +| lg | Length | No | Large-sized device. | +| xl | Length | No | Extra-large-sized device. | +| xxl | Length | No | Ultra-large-sized device. | ## BreakPoints diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index b836d4ea98c041b09d5f6eb7a4fc0304e905237e..978b93088cdb7c6eb729204b0b16d89af2066be5 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -5,7 +5,9 @@ The **\** component is used to display list item groups. It must > **NOTE** > > This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. + ## Usage Guidelines + If the **listDirection** attribute of the parent **\** component is set to **Axis.Vertical**, the **height** attribute of the **\** component cannot be set. The height of a **\** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\** component is set to **Axis.Horizontal**, the **width** attribute of the **\** component cannot be set. The width of a **\** component is the sum of its header width, footer width, and total width of the list items. The list items in the **\** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect. diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md index 53cc8c854b46f4acd7e8a51d618ad85595bb2d2e..7190a88277227e0fff0e94fc2ce6c6d8eeb954d8 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -48,6 +48,7 @@ Requests the focus to move to the specified component. This API can be used in g defaultFocus/groupDefaultFocus/focusOnTouch: **defaultFocus** sets the bound component as the initial focus of the page after the page is created. **groupDefaultFocus** sets the bound component as the initial focus of the **tabIndex** container after the container is created. **focusOnTouch** sets the bound component to obtain focus upon being clicked. + ```ts // focusTest.ets @Entry