" +
+ "
Font size: 35px; line height: 45px
" +
+ "
" +
+ "
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
"
build() {
Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center,
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
index 1d0e8d4d760779a50a02301f0793867829753319..eac2cce6037bc2c7608f0ef3d3c84fc2c81be5e5 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -1,7 +1,7 @@
# ScrollBar
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,13 +23,13 @@ This component can contain a single child component.
ScrollBar(value: ScrollBarOption)
- ScrollBarOption parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
- | direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
- | state | BarState | No | BarState.Auto | Scrollbar state. |
+ | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
+ | direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
+ | state | BarState | No | BarState.Auto | Scrollbar state. |
- >  **NOTE：**
+ >  **NOTE**
> The **<ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
>
> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
@@ -37,15 +37,15 @@ ScrollBar(value: ScrollBarOption)
- ScrollBarDirection enums
| Name | Description |
| -------- | -------- |
- | Vertical | Vertical scrollbar. |
- | Horizontal | Horizontal scrollbar. |
+ | Vertical | Vertical scrollbar. |
+ | Horizontal | Horizontal scrollbar. |
- BarState enums
| Name | Description |
| -------- | -------- |
- | On | Always display. |
+ | On | Always display. |
| Off | Hide. |
- | Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). |
+ | Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). |
## Example
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 15a45d1e6ad3083ad6d6a7a19c5af6a2f0dbeb6a..88927b3b6cbca8ebbb8eb13bc86c38d0380499b1 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
@@ -1,7 +1,7 @@
# Slider
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,34 +23,34 @@ None
Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | value | number | No | 0 | Current progress. |
- | min | number | No | 0 | Minimum value. |
- | max | number | No | 100 | Maximum value. |
- | step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. |
- | style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. |
- | direction
8+ | [Axis](../reference/arkui-ts/ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether the slider moves horizontally or vertically. |
- | reverse
8+ | boolean | No | false | Whether the slider values are reversed. |
+ | value | number | No | 0 | Current progress. |
+ | min | number | No | 0 | Minimum value. |
+ | max | number | No | 100 | Maximum value. |
+ | step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. |
+ | style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. |
+ | direction
8+ | [Axis](../reference/arkui-ts/ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether the slider moves horizontally or vertically. |
+ | reverse
8+ | boolean | No | false | Whether the slider values are reversed. |
- SliderStyle enums
| Name | Description |
| -------- | -------- |
- | OutSet | The slider is on the slider rail. |
- | InSet | The slider is in the slider rail. |
+ | OutSet | The slider is on the slider rail. |
+ | InSet | The slider is in the slider rail. |
## Attributes
Touch target configuration is not supported.
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| blockColor | Color | - | Color of the slider. |
-| trackColor | Color | - | Background color of the slider. |
-| selectedColor | Color | - | Color of the slider rail that has been slid. |
-| showSteps | boolean | false | Whether to display the current step. |
-| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. |
+| blockColor | Color | - | Color of the slider. |
+| trackColor | Color | - | Background color of the slider. |
+| selectedColor | Color | - | Color of the slider rail that has been slid. |
+| showSteps | boolean | false | Whether to display the current step. |
+| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. |
## Events
@@ -59,14 +59,14 @@ Among all the universal events, only **OnAppear** and **OnDisAppear** are suppor
| Name | Description |
| -------- | -------- |
-| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Callback invoked when the slider slides.
**value**: current progress.
**mode**: dragging state. |
+| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Callback invoked when the slider slides.
**value**: current progress.
**mode**: dragging state. |
- SliderChangeMode enums
| Name | Description |
| -------- | -------- |
- | Begin | The user starts to drag the slider. |
- | Moving | The user is dragging the slider. |
- | End | The user stops dragging the slider. |
+ | Begin | The user starts to drag the slider. |
+ | Moving | The user is dragging the slider. |
+ | End | The user stops dragging the slider. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
index 568211d1bbc795d6242fa49597b03c871b9016ed..a00a62fabfb8deaac5c7fa582c03d078652b473c 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
@@ -1,7 +1,7 @@
# Span
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,26 +23,26 @@ None
Span(content: string)
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | content | string | Yes | - | Text content. |
+ | content | string | Yes | - | Text content. |
## Attributes
In addition to the text style attributes, the attributes below are supported.
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),
color?: Color
} | {
type: TextDecorationType.None
} | Style and color of the text decorative line. |
-| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. |
+| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),
color?: Color
} | {
type: TextDecorationType.None
} | Style and color of the text decorative line. |
+| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. |
## Events
Among all the universal events, only the click event is supported.
->  **NOTE：**
+>  **NOTE**
> As the **<Span>** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
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 3218ab57d1d03c099803bb8531b849774a1d3abf..983e00046cf706696bc901e666e6cae5432a61df 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
@@ -1,7 +1,7 @@
# Stepper
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -24,9 +24,9 @@ Stepper(value?: { index?: number })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | index | number | No | 0 | Index of the **<StepperItem>** that is currently displayed. |
+ | index | number | No | 0 | Index of the **<StepperItem>** that is currently displayed. |
## Attributes
@@ -38,9 +38,9 @@ None
| Name | Description |
| -------- | -------- |
-| onFinish(callback: () => void) | Triggered when the **nextLabel** of the last **<StepperItem>** in the **<Stepper>** is clicked. |
-| onSkip(callback: () => void) | Triggered when the current **<StepperItem>** is **ItemState.Skip** and the **nextLabel** is clicked. |
-| onChange(callback: (prevIndex?: number, index?: number) => void) | Triggered when the text button on the left or right is clicked to switch between steps.
- **prevIndex**: index of the step page before the switching.
- **index**: index of the step page after the switching, that is, index of the previous or next page. |
+| onFinish(callback: () => void) | Triggered when the **nextLabel** of the last **<StepperItem>** in the **<Stepper>** is clicked. |
+| onSkip(callback: () => void) | Triggered when the current **<StepperItem>** is **ItemState.Skip** and the **nextLabel** is clicked. |
+| onChange(callback: (prevIndex?: number, index?: number) => void) | Triggered when the text button on the left or right is clicked to switch between steps.
- **prevIndex**: index of the step page before the switching.
- **index**: index of the step page after the switching, that is, index of the previous or next page. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md b/en/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
index 66d7fe9147ad4ebc02af9260c08325dbf94b918b..10b04b60ede7204554f7cd6eee97c3098065b191 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
@@ -1,7 +1,7 @@
# StepperItem
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,19 +25,19 @@ StepperItem()
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| prevLabel | string | - | When the **<Stepper>** contains more than one page, the default value for all pages except the first page is **Back**. |
-| nextLabel | string | - | When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**. |
-| status | ItemState | ItemState.Normal | Status of the **<StepperItem>**. |
+| prevLabel | string | - | When the **<Stepper>** contains more than one page, the default value for all pages except the first page is **Back**. |
+| nextLabel | string | - | When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**. |
+| status | ItemState | ItemState.Normal | Status of the **<StepperItem>**. |
- ItemState enums
| Name | Description |
| -------- | -------- |
- | Normal | The right button is clickable and can navigate users to the next **<StepperItem>** when it is clicked.. |
- | Disabled | The right button is grayed out and unavailable. |
- | Waiting | The right button is not displayed, and a progress bar is displayed instead. |
- | Skip | The current **<StepperItem>** is skipped, and the next **<StepperItem>** is displayed. |
+ | Normal | The right button is clickable and can navigate users to the next **<StepperItem>** when it is clicked.. |
+ | Disabled | The right button is grayed out and unavailable. |
+ | Waiting | The right button is not displayed, and a progress bar is displayed instead. |
+ | Skip | The current **<StepperItem>** is skipped, and the next **<StepperItem>** is displayed. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
index 89ca41780e4a619c2628db67f2c205bd924d79c2..15fc34079e6d01ea7e69bff47c301961e16d1a8e 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
@@ -1,7 +1,7 @@
# Text
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,53 +23,53 @@ The **<Text>** component can contain the child component [
](../refer
Text(content?: string)
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | content | string | No | '' | Text content, which is the content of the child component **<Span>**. This parameter does not take effect when the child component **<Span>** is contained. |
+ | content | string | No | '' | Text content, which is the content of the child component **<Span>**. This parameter does not take effect when the child component **<Span>** is contained. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. |
-| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long. |
-| maxLines | number | Infinity | Maximum number of lines in the text. |
-| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. |
-| decoration | {
type: TextDecorationType,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line. |
-| baselineOffset | Length | - | Offset of the text baseline. |
-| textCase | TextCase | TextCase.Normal | Text case. |
+| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. |
+| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long. |
+| maxLines | number | Infinity | Maximum number of lines in the text. |
+| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. |
+| decoration | {
type: TextDecorationType,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line. |
+| baselineOffset | Length | - | Offset of the text baseline. |
+| textCase | TextCase | TextCase.Normal | Text case. |
- TextAlign enums
| Name | Description |
| -------- | -------- |
- | Center | The text is center-aligned. |
- | Start | The text is aligned with the direction in which the text is written. |
- | End | The text is aligned with the opposite direction in which the text is written. |
+ | Center | The text is center-aligned. |
+ | Start | The text is aligned with the direction in which the text is written. |
+ | End | The text is aligned with the opposite direction in which the text is written. |
- TextOverflow enums
| Name | Description |
| -------- | -------- |
- | Clip | Extra text is truncated. |
- | Ellipsis | The ellipsis (...) is used for extra-long text. |
- | None | No truncation or ellipsis is used for extra-long text. |
+ | Clip | Extra text is truncated. |
+ | Ellipsis | The ellipsis (...) is used for extra-long text. |
+ | None | No truncation or ellipsis is used for extra-long text. |
- TextDecorationType enums
| Name | Description |
| -------- | -------- |
- | Underline | An underline is used. |
- | LineThrough | A strikethrough is used. |
- | Overline | An overline is used. |
- | None | No decorative line is used. |
+ | Underline | An underline is used. |
+ | LineThrough | A strikethrough is used. |
+ | Overline | An overline is used. |
+ | None | No decorative line is used. |
- TextCase enums
| Name | Description |
| -------- | -------- |
- | Normal | The original case of the text is retained. |
- | LowerCase | All letters in the text are in lowercase. |
- | UpperCase | All letters in the text are in uppercase. |
+ | Normal | The original case of the text is retained. |
+ | LowerCase | All letters in the text are in lowercase. |
+ | UpperCase | All letters in the text are in uppercase. |
->  **NOTE：**
+>  **NOTE**
> The **<Text>** component cannot contain both the text and the child component **<Span>**. If both of them exist, only the content in **<Span>** is displayed.
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 5f0d05bb0a5f8b57ad2e9e3336eefef0609cd7a6..1e4c9f90e5815ec2ee326eac5ae35fbc68efc0a9 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
@@ -1,7 +1,7 @@
# TextArea
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ The **<TextArea>** component provides multi-line text input.
None
-## Child Component
+## Child Components
-N/A
+None
## APIs
@@ -23,49 +23,49 @@ N/A
TextArea(value?:{placeholder?: string controller?: TextAreaController})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | placeholder | string | No | - | Text displayed when there is no input. |
- | controller8+ | [TextAreaController](#textareacontroller8) | No | - | Text area controller. |
+ | placeholder | string | No | - | Text displayed when there is no input. |
+ | controller8+ | [TextAreaController](#textareacontroller8) | No | - | Text area controller. |
## Attributes
In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| placeholderColor | Color | - | Placeholder text color. |
-| placeholderFont | {
size?: number,
weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | Placeholder text style.
- **size**: font size. If the value is of the number type, the unit fp is used.
- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.
- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.
- **style**: font style. |
-| textAlign | TextAlign | Start | Sets the text horizontal alignment mode. |
-| caretColor | Color | - | Sets the color of the cursor in the text box. |
-| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md),
error?: (value: string)
} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.
- **value**: indicates the regular expression to set.
- **error**: returns the ignored content when regular expression matching fails. |
+| placeholderColor | Color | - | Placeholder text color. |
+| placeholderFont | {
size?: number,
weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | Placeholder text style.
- **size**: font size. If the value is of the number type, the unit fp is used.
- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.
- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.
- **style**: font style. |
+| textAlign | TextAlign | Start | Sets the text horizontal alignment mode. |
+| caretColor | Color | - | Sets the color of the cursor in the text box. |
+| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md),
error?: (value: string)
} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.
- **value**: indicates the regular expression to set.
- **error**: returns the ignored content when regular expression matching fails. |
- TextAlign enums
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
- | Start | Aligns the header horizontally. |
- | Center | Horizontal center alignment. |
- | End | Align the tail horizontally. |
+ | Start | Aligns the header horizontally. |
+ | Center | Horizontal center alignment. |
+ | End | Align the tail horizontally. |
### TextAreaController8+
Defines the controller for controlling the **<TextArea>** component.
- | Name | Description |
+| Name | Description |
| -------- | -------- |
-| caretPosition(value: number): void | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. |
+| caretPosition(value: number): void | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
- | Name | Description |
+| Name | Description |
| -------- | -------- |
-| onChange(callback: (value: string) => void) | Triggered when the input changes. |
-| 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 changes. |
+| 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. |
## 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 e805c5feaacb318a1d68128cbb943c8310cb3620..4aeeb531d8f3c332f4cc1b80af97420172126a6d 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
@@ -1,7 +1,7 @@
# TextInput
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,42 +23,42 @@ None
TextInput(value?:{placeholder?: string controller?: TextInputController})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | placeholder | string | No | - | Text displayed when there is no input. |
- | controller8+ | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
+ | placeholder | string | No | - | Text displayed when there is no input. |
+ | controller8+ | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
## Attributes
In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| type | InputType | InputType.Normal | Input box type. |
-| placeholderColor | Color | - | Placeholder color. |
-| placeholderFont | {
size?: Length,
weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | Placeholder text style.
- **size**: font size. If the value is of the number type, the unit fp is used.
- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.
- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.
- **style**: font style. |
-| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
-| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
-| maxLength8+ | number | - | Maximum number of characters in the text input. |
-| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md#resourcestr8),
error?: (value: string)
} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.
- **value**: indicates the regular expression to set.
- **error**: returns the ignored content when regular expression matching fails. |
+| type | InputType | InputType.Normal | Input box type. |
+| placeholderColor | Color | - | Placeholder color. |
+| placeholderFont | {
size?: Length,
weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | Placeholder text style.
- **size**: font size. If the value is of the number type, the unit fp is used.
- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.
- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.
- **style**: font style. |
+| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
+| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
+| maxLength8+ | number | - | Maximum number of characters in the text input. |
+| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md#resourcestr8),
error?: (value: string)
} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.
- **value**: indicates the regular expression to set.
- **error**: returns the ignored content when regular expression matching fails. |
- EnterKeyType enums
| Name | Description |
| -------- | -------- |
- | EnterKeyType.Go | The Enter key is labeled "Go." |
- | EnterKeyType.Search | The Enter key is labeled "Search." |
- | EnterKeyType.Send | The Enter key is labeled "Send." |
- | EnterKeyType.Next | The Enter key is labeled "Next." |
- | EnterKeyType.Done | The Enter key is labeled "Done." |
+ | EnterKeyType.Go | The Enter key is labeled "Go." |
+ | EnterKeyType.Search | The Enter key is labeled "Search." |
+ | EnterKeyType.Send | The Enter key is labeled "Send." |
+ | EnterKeyType.Next | The Enter key is labeled "Next." |
+ | EnterKeyType.Done | The Enter key is labeled "Done." |
- InputType enums
| Name | Description |
| -------- | -------- |
- | InputType.Normal | Normal input mode. |
- | InputType.Password | Password input mode. |
- | InputType.Email | Email address input mode. |
- | InputType.Number | Digit input mode. |
+ | InputType.Normal | Normal input mode. |
+ | InputType.Password | Password input mode. |
+ | InputType.Email | Email address input mode. |
+ | InputType.Number | Digit input mode. |
### TextInputController8+
@@ -67,7 +67,7 @@ Implements the controller of the **<TextInput>** component.
| Name | Description |
| -------- | -------- |
-| caretPosition(value: number):void | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. |
+| caretPosition(value: number):void | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. |
### Objects to Import
@@ -85,21 +85,21 @@ caretPosition(value: number): void
Sets the cursor in a specified position.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | value | number | Yes | - | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. |
+ | value | number | Yes | - | Position of the input cursor.
**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
| Name | Description |
| -------- | -------- |
-| onChange(value: string) => void | Triggered when the input changes. |
-| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
-| onEditChanged(callback: (isEditing: boolean) => void) | Triggered when the input status changes. |
-| 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(value: string) => void | Triggered when the input changes. |
+| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
+| onEditChanged(callback: (isEditing: boolean) => void) | Triggered when the input status changes. |
+| 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. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
index c9557ccbc4b443674bb9f18a346064be7d8d7ac8..c77fe53b56a3900c82b9a69ba8ed68824e0999d3 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
@@ -1,7 +1,7 @@
# TextPicker
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,7 +13,7 @@ The **<TextPicker>** component allows users to select text from a list of
None
-## Child Component
+## Child Components
None
@@ -25,24 +25,24 @@ TextPicker(value: {range: string[], selected?: number})
Creates a text picker based on the selection range specified by **range**.
- Parameter
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | range | string[] | Yes | - | Data selection range of the picker. |
- | selected | number | No | First element | Index value of the selected item in the array. |
+ | range | string[] | Yes | - | Data selection range of the picker. |
+ | selected | number | No | First element | Index value of the selected item in the array. |
## Attributes
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| defaultPickerItemHeight | Length | - | Default height of a Picker content item element. |
+| defaultPickerItemHeight | Length | - | Default height of a Picker content item element. |
## Events
- | Name | Description |
-| -------- | -------- |
-| onChange(callback: (value: string, index: number) => void) | Triggered when an item in the picker is selected.
- **value**: text of the selected item.
- **index**: index of the selected item. |
+| Name | Description |
+| -------- | -------- |
+| onChange(callback: (value: string, index: number) => void) | Triggered when an item in the picker is selected.
- **value**: text of the selected item.
- **index**: index of the selected item. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
index a56349de2246384b00990476735a8876643a04ae..0fef4104bbc778aaf8e7d2350d53d653d7145581 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
@@ -1,7 +1,7 @@
# TextTimer
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,11 +23,11 @@ None
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | isCountDown | boolean | No | false | Whether to count down. |
- | count | number | No | 60000 | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.
- If the value of **count** is less than or equal to 0, the default value is used.
- If the value of **count** is greater than 0, it is used. |
- | controller | [TextTimerController](#texttimercontroller) | No | null | **<TextTimer>** controller. |
+ | isCountDown | boolean | No | false | Whether to count down. |
+ | count | number | No | 60000 | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.
- If the value of **count** is less than or equal to 0, the default value is used.
- If the value of **count** is greater than 0, it is used. |
+ | controller | [TextTimerController](#texttimercontroller) | No | null | **<TextTimer>** controller. |
### TextTimerController
@@ -36,23 +36,23 @@ Defines the controller for controlling the **<TextTimer>** component.
| Name | Description |
| -------- | -------- |
-| start() | Starts the timer. |
-| pause() | Pauses the timer. |
-| reset() | Resets the timer. |
+| start() | Starts the timer. |
+| pause() | Pauses the timer. |
+| reset() | Resets the timer. |
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
+| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
## Events
| Name | Description |
| -------- | -------- |
-| onTimer(callback: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.
**utc**: currently displayed time, in milliseconds.
**elapsedTime**: elapsed time of the timer, in milliseconds. |
+| onTimer(callback: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.
**utc**: currently displayed time, in milliseconds.
**elapsedTime**: elapsed time of the timer, in milliseconds. |
## Example
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 a969be1ae9968b38172a7a9d3f60bc1c2aa9e1be..776fa7633bdff72b2669c2eeddbb292972a5760b 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
@@ -1,7 +1,7 @@
# Toggle
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -20,33 +20,33 @@ None
Toggle(options: { type: ToggleType, isOn?: boolean })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | type | ToggleType | Yes | - | Type of the toggle. |
- | isOn | boolean | No | false | Initial state of the toggle.
>  **NOTE：**
> If **isOn** is not set during component creation, the selected state can be retained during component reuse. If **isOn** is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method. |
+ | type | ToggleType | Yes | - | Type of the toggle. |
+ | isOn | boolean | No | false | Initial state of the toggle.
>  **NOTE**
> If **isOn** is not set during component creation, the selected state can be retained during component reuse. If **isOn** is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method. |
- ToggleType enums
| Name | Description |
| -------- | -------- |
- | Checkbox | A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **<Text>** component and the current component in the layout component. |
- | Button | A button is provided. If the text setting is available, the corresponding text content is displayed inside the button. |
- | Switch | A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **<Text>** component and the current component in the layout component. |
+ | Checkbox | A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **<Text>** component and the current component in the layout component. |
+ | Button | A button is provided. If the text setting is available, the corresponding text content is displayed inside the button. |
+ | Switch | A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **<Text>** component and the current component in the layout component. |
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| selectedColor | Color | - | Background color of the toggle when it is enabled. |
-| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.
>  **NOTE：**
> This attribute is valid only when type is set to **ToggleType.Switch**. |
+| selectedColor | Color | - | Background color of the toggle when it is enabled. |
+| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.
>  **NOTE**
> This attribute is valid only when type is set to **ToggleType.Switch**. |
## Events
| Name | Description |
| -------- | -------- |
-| onChange(callback: (isOn: boolean) => void) | Triggered when the switch status changes. |
+| onChange(callback: (isOn: boolean) => void) | Triggered when the switch status changes. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
index 952bf6d555f0997770a6d2e3ca5e783ec51bfe5b..78911b09c70cb2d6218d6180a2675d9616294462 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
@@ -1,7 +1,7 @@
# LongPressGesture
->  **NOTE：**
+>  **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,25 +15,25 @@ None
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
- | repeat | boolean | No | false | Whether to continuously trigger the event callback. |
- | duration | number | No | 500 | Minimum hold-down time, in ms. |
+ | fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
+ | repeat | boolean | No | false | Whether to continuously trigger the event callback. |
+ | duration | number | No | 500 | Minimum hold-down time, in ms. |
## Events
| Name | Description |
| -------- | -------- |
-| onAction((event?: LongPressGestureEvent) => void) | Callback invoked when a long press gesture is recognized. |
-| onActionEnd((event?: LongPressGestureEvent) => void) | Callback invoked when the finger used for a long press gesture is lift. |
-| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. |
+| onAction((event?: LongPressGestureEvent) => void) | Callback invoked when a long press gesture is recognized. |
+| onActionEnd((event?: LongPressGestureEvent) => void) | Callback invoked when the finger used for a long press gesture is lift. |
+| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. |
- LongPressGestureEvent8+ attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | repeat | boolean | Whether the event is repeated. |
+ | repeat | boolean | Whether the event is repeated. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
index 9cf81839bae55d25d71ab296debbf4ea9c891283..86ec87b6d1f59620e9b26d761b0f08b4677fb159 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
@@ -1,7 +1,7 @@
# PanGesture
->  **NOTE：**
+>  **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,23 +15,23 @@ None
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption))
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
- | direction | PanDirection | No | All | Slide direction. The enumerated value supports the AND (&) and OR (\|) operations. |
- | distance | number | No | 5.0 | Minimum slide recognition distance, in vp. |
+ | fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
+ | direction | PanDirection | No | All | Slide direction. The enumerated value supports the AND (&) and OR (\|) operations. |
+ | distance | number | No | 5.0 | Minimum slide recognition distance, in vp. |
- PanDirection enums
| Name | Description |
| -------- | -------- |
- | All | All directions. |
- | Horizontal | Horizontal slide. |
- | Vertical | Vertical slide. |
- | Left | Slide to the left. |
- | Right | Slide to the right. |
- | Up | Slide up. |
- | Down | Slide down. |
- | None | Slide disabled. |
+ | All | All directions. |
+ | Horizontal | Horizontal slide. |
+ | Vertical | Vertical slide. |
+ | Left | Slide to the left. |
+ | Right | Slide to the right. |
+ | Up | Slide up. |
+ | Down | Slide down. |
+ | None | Slide disabled. |
### PanGestureOption
@@ -46,25 +46,25 @@ PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distanc
- APIs
| Name | Description |
| -------- | -------- |
- | setDirection(value: PanDirection) | Sets the direction. |
- | setDistance(value: number) | Sets the distance. |
- | setFingers(value: number) | Sets the number of fingers. |
+ | setDirection(value: PanDirection) | Sets the direction. |
+ | setDistance(value: number) | Sets the distance. |
+ | setFingers(value: number) | Sets the number of fingers. |
## Events
| Name | Description |
| -------- | -------- |
-| onActionStart(callback: (event?: PanGestureEvent) => void) | Callback for the pan gestures reorganization event. |
-| onActionUpdate(callback: (event?: PanGestureEvent) => void) | Callback invoked when a pan gesture is recognized. |
-| onActionEnd(callback: (event?: PanGestureEvent) => void) | Callback invoked when the finger used for a pan gesture is lift. |
-| onActionCancel(callback: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
+| onActionStart(callback: (event?: PanGestureEvent) => void) | Callback for the pan gestures reorganization event. |
+| onActionUpdate(callback: (event?: PanGestureEvent) => void) | Callback invoked when a pan gesture is recognized. |
+| onActionEnd(callback: (event?: PanGestureEvent) => void) | Callback invoked when the finger used for a pan gesture is lift. |
+| onActionCancel(callback: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
- PanGestureEvent8+ attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | offsetX | number | Offset of the gesture event, in vp. |
- | offsetY | number | Offset of the gesture event, in vp. |
+ | offsetX | number | Offset of the gesture event, in vp. |
+ | offsetY | number | Offset of the gesture event, in vp. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
index a3eab5de94e653faee5826987a619e45eb84faf9..328feb245f82260fdb593364c8c377659669971e 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
@@ -1,7 +1,7 @@
# PinchGesture
->  **NOTE：**
+>  **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,27 +15,27 @@ None
PinchGesture(options?: { fingers?: number, distance?: number })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. |
- | distance | number | No | 3.0 | Minimum recognition distance, in vp. |
+ | fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. |
+ | distance | number | No | 3.0 | Minimum recognition distance, in vp. |
## Events
| Name | Description |
| -------- | -------- |
-| onActionStart((event?: PinchGestureEvent) => void) | Callback invoked when a pinch gesture is recognized. |
-| onActionUpdate((event?: PinchGestureEvent) => void) | Callback invoked during the movement of a pinch gesture. |
-| onActionEnd((event?: PinchGestureEvent) => void) | Callback invoked when the finger used for a pinch gesture is lift. |
-| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. |
+| onActionStart((event?: PinchGestureEvent) => void) | Callback invoked when a pinch gesture is recognized. |
+| onActionUpdate((event?: PinchGestureEvent) => void) | Callback invoked during the movement of a pinch gesture. |
+| onActionEnd((event?: PinchGestureEvent) => void) | Callback invoked when the finger used for a pinch gesture is lift. |
+| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. |
- PinchGestureEvent8+ attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | scale | number | Scale ratio. This attribute is used for the pinch gesture. |
- | pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. |
- | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. |
+ | scale | number | Scale ratio. This attribute is used for the pinch gesture. |
+ | pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. |
+ | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
index f8aba766277511d75bc2fa2b29bcb726e8c978e0..16eb5921d688a188d76147f92439a3e120c3aa61 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
@@ -1,7 +1,7 @@
# RotationGesture
->  **NOTE：**
+>  **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,25 +15,25 @@ None
RotationGesture(options?: { fingers?: number, angle?: number })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. |
- | angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. |
+ | fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. |
+ | angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. |
## Events
| Name | Description |
| -------- | -------- |
-| onActionStart((event?: RotationGestureEvent) => void) | Callback invoked when a rotation gesture is recognized. |
-| onActionUpdate((event?: RotationGestureEvent) => void) | Callback invoked during the movement of the rotation gesture. |
-| onActionEnd((event?: RotationGestureEvent) => void) | Callback invoked when the finger used for the rotation gesture is lift. |
-| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. |
+| onActionStart((event?: RotationGestureEvent) => void) | Callback invoked when a rotation gesture is recognized. |
+| onActionUpdate((event?: RotationGestureEvent) => void) | Callback invoked during the movement of the rotation gesture. |
+| onActionEnd((event?: RotationGestureEvent) => void) | Callback invoked when the finger used for the rotation gesture is lift. |
+| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. |
- RotationGestureEvent8+ attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | angle | number | Rotation angle. |
+ | angle | number | Rotation angle. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
index f4431bc7986b9ebe020d6629e8f26ee766b75259..4a3b138a0e5652bddebcff46479d43773fc1354e 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
@@ -1,7 +1,7 @@
# SwipeGesture
->  **NOTE：**
+>  **NOTE**
> This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,32 +15,32 @@ None
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | fingers | number | No | 1 | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. |
- | direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. |
- | speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). |
+ | fingers | number | No | 1 | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. |
+ | direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. |
+ | speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). |
- SwipeDirection enums
| Name | Description |
| -------- | -------- |
- | All | All directions. |
- | Horizontal | Horizontal direction. |
- | Vertical | Vertical direction. |
+ | All | All directions. |
+ | Horizontal | Horizontal direction. |
+ | Vertical | Vertical direction. |
## Events
| Name | Description |
| -------- | -------- |
-| onAction(callback:(event?: SwipeGestureEvent) => void) | Callback invoked when a swipe gesture is recognized. |
+| onAction(callback:(event?: SwipeGestureEvent) => void) | Callback invoked when a swipe gesture is recognized. |
- SwipeGestureEvent attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | angle | number | Angle of the swipe gesture. |
- | speed | number | Speed of the swipe gesture. |
+ | angle | number | Angle of the swipe gesture. |
+ | speed | number | Speed of the swipe gesture. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
index f0e6dd76bd653d1685b80e8e67b09b89cf4c18cf..495cd2a220e5c5d775ef395803ca5b26efa55175 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
@@ -1,7 +1,7 @@
# TapGesture
->  **NOTE：**
+>  **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,17 +15,17 @@ None
TapGesture(options?: { count?: number, fingers?: number })
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | count | number | No | 1 | Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.
>  **NOTE：**
> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms. |
- | fingers | number | No | 1 | Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.
>  **NOTE：**
> 1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.
>
> 2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number. |
+ | count | number | No | 1 | Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.
>  **NOTE**
> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms. |
+ | fingers | number | No | 1 | Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.
>  **NOTE**
> 1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.
>
> 2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number. |
## Events
| Name | Description |
| -------- | -------- |
-| onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
+| onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 75926592770220faf93644706762de670b11feaf..be0646828fd43f1acc3177bd3266d4d3dfa7c54b 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1,7 +1,7 @@
# CanvasRenderingContext2D
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on
CanvasRenderingContext2D(setting: RenderingContextSetting)
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
+ | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
### RenderingContextSettings
@@ -25,35 +25,35 @@ RenderingContextSettings(antialias?: bool)
Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | antialias | bool | No | false | Whether antialiasing is enabled. |
+ | antialias | bool | No | false | Whether antialiasing is enabled. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineWidth](#linewidth) | number | - | Line width. |
-| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
-| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
-| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
-| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
-| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
>  **NOTE：**
> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
-| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
-| [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
-| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
-| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
-| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
-| [shadowColor](#shadowcolor) | <color> | - | Shadow color. |
-| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
-| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
-| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
-
->  **NOTE：**
+| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
+| [lineWidth](#linewidth) | number | - | Line width. |
+| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
+| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
+| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
+| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
+| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
+| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
>  **NOTE**
> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
+| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
+| [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
+| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
+| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
+| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
+| [shadowColor](#shadowcolor) | <color> | - | Shadow color. |
+| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
+| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
+| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
+
+>  **NOTE**
> The value of the **<color>** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
@@ -441,17 +441,17 @@ struct LineDashOffset {
| Name | Description |
| -------- | -------- |
-| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
-| source-atop | Displays the new drawing on the top of the existing drawing. |
-| source-in | Displays the new drawing inside the existing drawing. |
-| source-out | Displays the part of the new drawing that is outside of the existing drawing. |
-| destination-over | Displays the existing drawing above the new drawing. |
-| destination-atop | Displays the existing drawing on the top of the new drawing. |
-| destination-in | Displays the existing drawing inside the new drawing. |
-| destination-out | Displays the part of the existing drawing that is outside of the new drawing. |
-| lighter | Displays both the new drawing and the existing drawing. |
-| copy | Displays the new drawing and neglects the existing drawing. |
-| xor | Combines the new drawing and existing drawing using the XOR operation. |
+| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
+| source-atop | Displays the new drawing on the top of the existing drawing. |
+| source-in | Displays the new drawing inside the existing drawing. |
+| source-out | Displays the part of the new drawing that is outside of the existing drawing. |
+| destination-over | Displays the existing drawing above the new drawing. |
+| destination-atop | Displays the existing drawing on the top of the new drawing. |
+| destination-in | Displays the existing drawing inside the new drawing. |
+| destination-out | Displays the part of the existing drawing that is outside of the new drawing. |
+| lighter | Displays both the new drawing and the existing drawing. |
+| copy | Displays the new drawing and neglects the existing drawing. |
+| xor | Combines the new drawing and existing drawing using the XOR operation. |
```
@@ -659,12 +659,12 @@ fillRect(x: number, y: number, w: number, h: number): void
Fills a rectangle on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -701,12 +701,12 @@ strokeRect(x: number, y: number, w: number, h: number): void
Draws an outlined rectangle on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -742,12 +742,12 @@ clearRect(x: number, y: number, w: number, h: number): void
Clears the content in a rectangle on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -785,11 +785,11 @@ fillText(text: string, x: number, y: number): void
Draws filled text on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | text | string | Yes | "" | Text to draw. |
- | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
- | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
+ | text | string | Yes | "" | Text to draw. |
+ | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
+ | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
- Example
@@ -826,11 +826,11 @@ strokeText(text: string, x: number, y: number): void
Draws a text stroke on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | text | string | Yes | "" | Text to draw. |
- | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
- | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
+ | text | string | Yes | "" | Text to draw. |
+ | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
+ | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
- Example
@@ -867,19 +867,19 @@ measureText(text: string): TextMetrics
Returns a **TextMetrics** object used to obtain the width of specified text.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | text | string | Yes | "" | Text to be measured. |
+ | text | string | Yes | "" | Text to be measured. |
- Return value
| Type | Description |
| -------- | -------- |
- | TextMetrics | **TextMetrics** object. |
+ | TextMetrics | **TextMetrics** object. |
- **TextMetrics** attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | width | number | Width of the text. |
+ | width | number | Width of the text. |
- Example
@@ -917,9 +917,9 @@ stroke(path?: Path2D): void
Strokes a path.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | path | [Path2D](../reference/arkui-ts/ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
+ | path | [Path2D](../reference/arkui-ts/ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
- Example
@@ -998,10 +998,10 @@ moveTo(x: number, y: number): void
Moves a drawing path to a target position on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the target position. |
- | y | number | Yes | 0 | Y-coordinate of the target position. |
+ | x | number | Yes | 0 | X-coordinate of the target position. |
+ | y | number | Yes | 0 | Y-coordinate of the target position. |
- Example
@@ -1041,10 +1041,10 @@ lineTo(x: number, y: number): void
Connects the current point to a target position using a straight line.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the target position. |
- | y | number | Yes | 0 | Y-coordinate of the target position. |
+ | x | number | Yes | 0 | X-coordinate of the target position. |
+ | y | number | Yes | 0 | Y-coordinate of the target position. |
- Example
@@ -1123,10 +1123,10 @@ createPattern(image: ImageBitmap, repetition: string): void
Creates a pattern for image filling based on a specified source image and repetition mode.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | image | [ERROR:Invalid link:en-us_topic_0000001212378364.xml#en-us_topic_0000001193075104_xref1892917323814,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Source image. For details, see [ERROR:Invalid link:en-us_topic_0000001212378364.xml#xref539610179238,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
- | repetition | string | Yes | "" | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
+ | image | [ERROR:Invalid link:en-us_topic_0000001212378364.xml#en-us_topic_0000001193075104_xref1892917323814,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Source image. For details, see [ERROR:Invalid link:en-us_topic_0000001212378364.xml#xref539610179238,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
+ | repetition | string | Yes | "" | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
- Example
@@ -1166,14 +1166,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
- | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
- | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
- | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
- | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
- | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+ | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
+ | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
+ | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
+ | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
+ | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
+ | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
@@ -1213,12 +1213,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
- | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
- | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
- | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+ | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
+ | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
+ | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
+ | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
@@ -1257,14 +1257,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
- | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
- | radius | number | Yes | 0 | Radius of the arc. |
- | startAngle | number | Yes | 0 | Start radian of the arc. |
- | endAngle | number | Yes | 0 | End radian of the arc. |
- | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
+ | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
+ | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
+ | radius | number | Yes | 0 | Radius of the arc. |
+ | startAngle | number | Yes | 0 | Start radian of the arc. |
+ | endAngle | number | Yes | 0 | End radian of the arc. |
+ | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
- Example
@@ -1303,13 +1303,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
- | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
- | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
- | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
- | radius | number | Yes | 0 | Radius of the arc. |
+ | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
+ | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
+ | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
+ | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
+ | radius | number | Yes | 0 | Radius of the arc. |
- Example
@@ -1348,16 +1348,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the ellipse center. |
- | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
- | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
- | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
- | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
- | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
- | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
- | anticlockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
+ | x | number | Yes | 0 | X-coordinate of the ellipse center. |
+ | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
+ | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
+ | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
+ | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
+ | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
+ | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
+ | anticlockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
- Example
@@ -1397,12 +1397,12 @@ rect(x: number, y: number, width: number, height: number): void
Creates a rectangle.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -1513,9 +1513,9 @@ rotate(rotate: number): void
Rotates a canvas clockwise around its coordinate axes.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
+ | rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
- Example
@@ -1553,10 +1553,10 @@ scale(x: number, y: number): void
Scales a canvas based on scale factors.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | Horizontal scale factor. |
- | y | number | Yes | 0 | Vertical scale factor. |
+ | x | number | Yes | 0 | Horizontal scale factor. |
+ | y | number | Yes | 0 | Vertical scale factor. |
- Example
@@ -1594,7 +1594,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
->  **NOTE：**
+>  **NOTE**
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
> - x' = scaleX \* x + skewY \* y + translateX
@@ -1602,14 +1602,14 @@ Defines a transformation matrix. To transform a graph, you only need to set para
> - y' = skewX \* x + scaleY \* y + translateY
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | scaleX | number | Yes | 0 | X-axis scale. |
- | skewX | number | Yes | 0 | X-axis skew. |
- | skewY | number | Yes | 0 | Y-axis skew. |
- | scaleY | number | Yes | 0 | Y-axis scale. |
- | translateX | number | Yes | 0 | X-axis translation. |
- | translateY | number | Yes | 0 | Y-axis translation. |
+ | scaleX | number | Yes | 0 | X-axis scale. |
+ | skewX | number | Yes | 0 | X-axis skew. |
+ | skewY | number | Yes | 0 | Y-axis skew. |
+ | scaleY | number | Yes | 0 | Y-axis scale. |
+ | translateX | number | Yes | 0 | X-axis translation. |
+ | translateY | number | Yes | 0 | Y-axis translation. |
- Example
@@ -1653,14 +1653,14 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | scaleX | number | Yes | 0 | X-axis scale. |
- | skewX | number | Yes | 0 | X-axis skew. |
- | skewY | number | Yes | 0 | Y-axis skew. |
- | scaleY | number | Yes | 0 | Y-axis scale. |
- | translateX | number | Yes | 0 | X-axis translation. |
- | translateY | number | Yes | 0 | Y-axis translation. |
+ | scaleX | number | Yes | 0 | X-axis scale. |
+ | skewX | number | Yes | 0 | X-axis skew. |
+ | skewY | number | Yes | 0 | Y-axis skew. |
+ | scaleY | number | Yes | 0 | Y-axis scale. |
+ | translateX | number | Yes | 0 | X-axis translation. |
+ | translateY | number | Yes | 0 | Y-axis translation. |
- Example
@@ -1701,10 +1701,10 @@ translate(x: number, y: number): void
Moves the origin of the coordinate system.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-axis translation. |
- | y | number | Yes | 0 | Y-axis translation. |
+ | x | number | Yes | 0 | X-axis translation. |
+ | y | number | Yes | 0 | Y-axis translation. |
- Example
@@ -1747,17 +1747,17 @@ drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: n
Draws an image.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | image | [ERROR:Invalid link:en-us_topic_0000001212378364.xml#en-us_topic_0000001193075104_xref962584519412,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Image resource. For details, see [ERROR:Invalid link:en-us_topic_0000001212378364.xml#xref29052050153012,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
- | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
- | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
- | sWidth | number | No | 0 | Target width to crop the source image. |
- | sHeight | number | No | 0 | Target height to crop the source image. |
- | dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. |
- | dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. |
- | dWidth | number | No | 0 | Width of the drawing area. |
- | dHeight | number | No | 0 | Height of the drawing area. |
+ | image | [ERROR:Invalid link:en-us_topic_0000001212378364.xml#en-us_topic_0000001193075104_xref962584519412,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Image resource. For details, see [ERROR:Invalid link:en-us_topic_0000001212378364.xml#xref29052050153012,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
+ | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
+ | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
+ | sWidth | number | No | 0 | Target width to crop the source image. |
+ | sHeight | number | No | 0 | Target height to crop the source image. |
+ | dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. |
+ | dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. |
+ | dWidth | number | No | 0 | Width of the drawing area. |
+ | dHeight | number | No | 0 | Height of the drawing area. |
- Example
@@ -1795,10 +1795,10 @@ createImageData(width: number, height: number): Object
Creates an **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | width | number | Yes | 0 | Width of the **ImageData** object. |
- | height | number | Yes | 0 | Height of the **ImageData** object. |
+ | width | number | Yes | 0 | Width of the **ImageData** object. |
+ | height | number | Yes | 0 | Height of the **ImageData** object. |
### createImageData
@@ -1808,9 +1808,9 @@ createImageData(imageData: Object): Object
Creates an **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. |
+ | imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. |
### getImageData
@@ -1819,12 +1819,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
Creates an [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
- | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
- | sw | number | Yes | 0 | Width of the output area. |
- | sh | number | Yes | 0 | Height of the output area. |
+ | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
+ | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
+ | sw | number | Yes | 0 | Width of the output area. |
+ | sh | number | Yes | 0 | Height of the output area. |
### putImageData
@@ -1834,15 +1834,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
Puts the [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. |
- | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
- | dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
- | dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
- | dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
- | dirtyWidth | number | No | Width of the **ImageData** object | Width of the rectangular area to crop the source image. |
- | dirtyHeight | number | No | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
+ | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. |
+ | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
+ | dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
+ | dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
+ | dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
+ | dirtyWidth | number | No | Width of the **ImageData** object | Width of the rectangular area to crop the source image. |
+ | dirtyHeight | number | No | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
- Example
@@ -1950,12 +1950,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
Creates a linear gradient.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x0 | number | Yes | 0 | X-coordinate of the start point. |
- | y0 | number | Yes | 0 | Y-coordinate of the start point. |
- | x1 | number | Yes | 0 | X-coordinate of the end point. |
- | y1 | number | Yes | 0 | Y-coordinate of the end point. |
+ | x0 | number | Yes | 0 | X-coordinate of the start point. |
+ | y0 | number | Yes | 0 | Y-coordinate of the start point. |
+ | x1 | number | Yes | 0 | X-coordinate of the end point. |
+ | y1 | number | Yes | 0 | Y-coordinate of the end point. |
- Example
@@ -1997,14 +1997,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
Creates a linear gradient.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. |
- | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. |
- | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number. |
- | x1 | number | Yes | 0 | X-coordinate of the center of the end circle. |
- | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
- | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number. |
+ | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. |
+ | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. |
+ | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number. |
+ | x1 | number | Yes | 0 | X-coordinate of the center of the end circle. |
+ | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
+ | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number. |
- Example
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 cbfe726ced5593f908adcef668b7a61789841c3f..8ee3e5431e688b184d430c84299989efadfd5775 100644
--- a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md
+++ b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md
@@ -1,7 +1,7 @@
# Combined Gestures
->  **NOTE：**
+>  **NOTE**
> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,24 +15,24 @@ None
GestureGroup(mode: GestureMode, ...gesture: GestureType[])
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | mode | 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. |
+ | mode | 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 enums
| 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. |
- | Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
- | Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
+ | 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. |
+ | Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
+ | Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
## Events
| Name | Description |
| -------- | -------- |
-| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event. |
+| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
index 1fd47e4c50e772548d9392df87f77addeb4508a2..40adadc6097c2e27f33c7f245661cf070257b096 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
@@ -1,7 +1,7 @@
# Canvas
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,9 +23,9 @@ None
Canvas(context: CanvasRenderingContext2D)
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For details, see CanvasRenderingContext2D. |
+ | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For details, see CanvasRenderingContext2D. |
## Attributes
@@ -39,7 +39,7 @@ In addition to [universal events](ts-universal-events-click.md), the following e
| Name | Parameter | Description |
| -------- | -------- | -------- |
-| onReady(callback: () => void) | None | Triggered when . |
+| onReady(callback: () => void) | None | Triggered when . |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index c218127bbbd13f612e56f6e9a518682efdfe07ee..6e31d4b8ac3cf4641876baa1797008e3cb6214da 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -1,7 +1,7 @@
# CanvasGradient
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,10 +15,10 @@ addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | offset | number | Yes | 0 | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
- | color | string | Yes | 'ffffff' | Gradient color to set. |
+ | offset | number | Yes | 0 | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
+ | color | string | Yes | 'ffffff' | Gradient color to set. |
- Example
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
index 4c19546b8c0b96ead05ae454c90621551f70bbb2..57e91f00329611bf583ed87dfd2d54ae8f56141f 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
@@ -1,7 +1,7 @@
# ImageBitmap
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,6 +12,6 @@
| Name | Type | Description |
| -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels. |
-| height | number | Actual height of the rectangle on the canvas, in pixels. |
-| data | <Uint8ClampedArray> | A one-dimensional array of color values. The values range from 0 to 255. |
+| width | number | Actual width of the rectangle on the canvas, in pixels. |
+| height | number | Actual height of the rectangle on the canvas, in pixels. |
+| data | <Uint8ClampedArray> | A one-dimensional array of color values. The values range from 0 to 255. |
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
index 5b749411fcb8551906e806d8b830c67c2d14865b..9bbccafd5a4376cf7aea0a055a4584edf40b74ce 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
@@ -1,7 +1,7 @@
# ImageData
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,6 +12,6 @@
| Name | Type | Description |
| -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels. |
-| height | number | Actual height of the rectangle on the canvas, in pixels. |
-| data | <Uint8ClampedArray> | A one-dimensional array of color values. The values range from 0 to 255. |
+| width | number | Actual width of the rectangle on the canvas, in pixels. |
+| height | number | Actual height of the rectangle on the canvas, in pixels. |
+| data | <Uint8ClampedArray> | A one-dimensional array of color values. The values range from 0 to 255. |
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
index 2a3247ecc08cf5597aedd5319b3602a61616bfe8..8d676b0de93488e61d5fe09388d758115c6143e3 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
@@ -1,7 +1,7 @@
# Lottie
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -17,7 +17,7 @@ None
import lottie from 'lottie-ohos-ets'
```
->  **NOTE：**
+>  **NOTE**
> In the **Terminal** window, run the **npm install'lottie-ohos-ets...** command to download Lottie.
@@ -32,13 +32,13 @@ Loads an animation. Before calling this method, declare the **Animator('__lottie
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. |
- | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. |
- | render | string | Yes | Rendering type. The value can only be **"canvas"**. |
- | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
- | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
- | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
- | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
+ | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. |
+ | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. |
+ | render | string | Yes | Rendering type. The value can only be **"canvas"**. |
+ | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
+ | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
+ | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
+ | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy
@@ -50,7 +50,7 @@ Destroys the animation. This method must be called when a page exits. This metho
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. |
+ | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. |
- Example
@@ -130,7 +130,7 @@ Plays a specified animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. |
+ | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. |
- Example
@@ -148,7 +148,7 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
+ | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
- Example
@@ -166,7 +166,7 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
+ | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
- Example
@@ -184,7 +184,7 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
+ | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
- Example
@@ -202,8 +202,8 @@ Sets the playback speed of the specified animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. |
- | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. |
+ | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. |
+ | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. |
- Example
@@ -221,8 +221,8 @@ Sets the direction in which the specified animation plays.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. |
- | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. |
+ | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. |
+ | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. |
- Example
@@ -237,26 +237,26 @@ Defines an **AnimationItem** object, which is returned by the **loadAnimation**
| Name | Type | Description |
| -------- | -------- | -------- |
-| name | string | Animation name. |
-| isLoaded | boolean | Whether the animation is loaded. |
-| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. |
-| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. |
-| firstFrame | number | First frame of the animation segment that is being played. |
-| totalFrames | number | Total number of frames in the animation segment that is being played. |
-| frameRate | number | Frame rate (frame/s). |
-| frameMult | number | Frame rate (frame/ms). |
-| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
-| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). |
-| playCount | number | Number of times the animation plays. |
-| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. |
-| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. |
-| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
-| renderer | any | Animation rendering object, which depends on the rendering type. |
-| animationID | string | Animation ID. |
-| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. |
-| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. |
-| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. |
-| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
+| name | string | Animation name. |
+| isLoaded | boolean | Whether the animation is loaded. |
+| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. |
+| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. |
+| firstFrame | number | First frame of the animation segment that is being played. |
+| totalFrames | number | Total number of frames in the animation segment that is being played. |
+| frameRate | number | Frame rate (frame/s). |
+| frameMult | number | Frame rate (frame/ms). |
+| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
+| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). |
+| playCount | number | Number of times the animation plays. |
+| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. |
+| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. |
+| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
+| renderer | any | Animation rendering object, which depends on the rendering type. |
+| animationID | string | Animation ID. |
+| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. |
+| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. |
+| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. |
+| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
## AnimationItem.play
@@ -268,7 +268,7 @@ Plays an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -286,7 +286,7 @@ Destroys an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -304,7 +304,7 @@ Pauses an animation. When the **play** interface is called next time, the animat
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -322,7 +322,7 @@ Pauses or plays an animation. This method is equivalent to the switching between
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -340,7 +340,7 @@ Stops an animation. When the **play** interface is called next time, the animati
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -358,7 +358,7 @@ Sets the playback speed of an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
+ | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
- Example
@@ -376,7 +376,7 @@ Sets the playback direction of an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. |
+ | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.
**AnimationDirection**: 1 \| -1. |
- Example
@@ -394,9 +394,9 @@ Sets the animation to stop at the specified frame or time.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
- | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
+ | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -417,9 +417,9 @@ Sets the animation to start from the specified frame or time progress.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
- | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. |
- | name | string | No | Name of the target animation. By default, the value is null. |
+ | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
+ | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. |
+ | name | string | No | Name of the target animation. By default, the value is null. |
- Example
@@ -440,8 +440,8 @@ Sets the animation to play only the specified segment.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
If all segments in the segment list are played, only the last segment is played in the next cycle. |
- | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
+ | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.
If all segments in the segment list are played, only the last segment is played in the next cycle. |
+ | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
- Example
@@ -462,7 +462,7 @@ Resets the settings configured by the **playSegments** method to play all the fr
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
+ | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
- Example
@@ -493,7 +493,7 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. |
+ | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.
**true**: The **currentFrame** attribute displays floating-point numbers.
**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. |
- Example
@@ -511,7 +511,7 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. |
+ | inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. |
- Example
@@ -529,8 +529,8 @@ Adds an event listener. After the event is complete, the specified callback func
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' |
- | callback | AnimationEventCallback<T> | Yes | Custom callback. |
+ | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' |
+ | callback | AnimationEventCallback<T> | Yes | Custom callback. |
- Example
@@ -554,8 +554,8 @@ Removes an event listener.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' |
- | callback | AnimationEventCallback<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
+ | name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' |
+ | callback | AnimationEventCallback<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
- Example
@@ -573,8 +573,8 @@ Directly triggers all configured callbacks of a specified event.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | name | AnimationEventName | Yes | Animation event type. |
- | args | any | Yes | Custom callback parameters. |
+ | name | AnimationEventName | Yes | Animation event type. |
+ | args | any | Yes | Custom callback parameters. |
- Example
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index 1bf9a31ed4887b3d54e583d42691079277531839..4ac71e31814747edb77ee2ff3409b2c2b88bc1b8 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -1,7 +1,7 @@
# Path2D
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,9 +15,9 @@ addPath(path: Object): void
Adds a path to this path.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | path | Object | Yes | null | Path to be added to this path. |
+ | path | Object | Yes | null | Path to be added to this path. |
- Example
@@ -97,10 +97,10 @@ moveTo(x: number, y: number): void
Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the target point. |
- | y | number | Yes | 0 | Y-coordinate of the target point. |
+ | x | number | Yes | 0 | X-coordinate of the target point. |
+ | y | number | Yes | 0 | Y-coordinate of the target point. |
- Example
@@ -142,10 +142,10 @@ lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the target point. |
- | y | number | Yes | 0 | Y-coordinate of the target point. |
+ | x | number | Yes | 0 | X-coordinate of the target point. |
+ | y | number | Yes | 0 | Y-coordinate of the target point. |
- Example
@@ -188,14 +188,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
- | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
- | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
- | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
- | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
- | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+ | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
+ | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
+ | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
+ | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
+ | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
+ | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
@@ -234,12 +234,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
Draws a quadratic curve on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
- | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
- | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
- | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+ | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
+ | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
+ | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
+ | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
@@ -279,14 +279,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
- | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
- | radius | number | Yes | 0 | Radius of the arc. |
- | startAngle | number | Yes | 0 | Start radian of the arc. |
- | endAngle | number | Yes | 0 | End radian of the arc. |
- | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
+ | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
+ | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
+ | radius | number | Yes | 0 | Radius of the arc. |
+ | startAngle | number | Yes | 0 | Start radian of the arc. |
+ | endAngle | number | Yes | 0 | End radian of the arc. |
+ | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
- Example
@@ -324,13 +324,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
- | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
- | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
- | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
- | radius | number | Yes | 0 | Radius of the arc. |
+ | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
+ | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
+ | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
+ | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
+ | radius | number | Yes | 0 | Radius of the arc. |
- Example
@@ -369,16 +369,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the ellipse center. |
- | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
- | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
- | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
- | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
- | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
- | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
- | anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
+ | x | number | Yes | 0 | X-coordinate of the ellipse center. |
+ | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
+ | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
+ | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
+ | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
+ | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
+ | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
+ | anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
- Example
@@ -417,12 +417,12 @@ rect(x: number, y: number, width: number, height: number): void
Creates a rectangle.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
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 8af93f953f37ce9fc68331b0b068c8b238dae85f..89610005db9561f3cb52282fd4a97cc414a57d23 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
@@ -1,7 +1,7 @@
# AlphabetIndexer
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,41 +23,41 @@ None
AlphabetIndexer(value: {arrayValue : Array<string>, selected : number})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
- | selected | number | Yes | - | ID of a selected item. |
+ | arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
+ | selected | number | Yes | - | ID of a selected item. |
## Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
-| selectedColor | Color | Font color of the selected text. |
-| popupColor | Color | Font color of the pop-up text. |
-| selectedBackgroundColor | Color | Background color of the selected text. |
-| popupBackground | Color | Background color of the pop-up text. |
-| usingPopup | boolean | Whether to use pop-up text. |
-| selectedFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the selected text. |
-| popupFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the pop-up text. |
-| font | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Default font style of the alphabetic index bar. |
-| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
-| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window. |
+| selectedColor | Color | Font color of the selected text. |
+| popupColor | Color | Font color of the pop-up text. |
+| selectedBackgroundColor | Color | Background color of the selected text. |
+| popupBackground | Color | Background color of the pop-up text. |
+| usingPopup | boolean | Whether to use pop-up text. |
+| selectedFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the selected text. |
+| popupFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Font style of the pop-up text. |
+| font | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | Default font style of the alphabetic index bar. |
+| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
+| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window. |
- IndexerAlign enums
| Name | Description |
| -------- | -------- |
- | Left | The pop-up window is displayed on the right of the alphabetic indexer bar. |
- | Right | The pop-up window is displayed on the left of the alphabetic indexer bar. |
+ | Left | The pop-up window is displayed on the right of the alphabetic indexer bar. |
+ | Right | The pop-up window is displayed on the left of the alphabetic indexer bar. |
## Events
| Name | Description |
| -------- | -------- |
-| onSelected(index: number) => void | Callback invoked when an item in the alphabetic indexer bar is selected. |
-| onRequestPopupData(callback: (index: number) => Array<string>)8+ | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.
The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. |
-| onPopupSelected(callback: (index: number) => void)8+ | Invoked when an item in the index pop-up window is selected. |
+| onSelected(index: number) => void | Callback invoked when an item in the alphabetic indexer bar is selected. |
+| onRequestPopupData(callback: (index: number) => Array<string>)8+ | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.
The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. |
+| onPopupSelected(callback: (index: number) => void)8+ | Invoked when an item in the index pop-up window is selected. |
## Example
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 9ab237910aa3d2443e9df09a1f5a9d7703a8034e..c67f1516fdc46e52601b2f4c57a8b5cfa9015271 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-badge.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md
@@ -1,7 +1,7 @@
# Badge
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,38 +23,38 @@ This component supports only one child component.
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | count | number | Yes | - | Number of prompt messages. |
- | position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. |
- | maxCount | number | No | 99 | Maximum number of prompt messages. When the maximum number is reached, only **maxCount+** is displayed. |
- | style | BadgeStyle | No | - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size. |
+ | count | number | Yes | - | Number of prompt messages. |
+ | position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. |
+ | maxCount | number | No | 99 | Maximum number of prompt messages. When the maximum number is reached, only **maxCount+** is displayed. |
+ | style | BadgeStyle | No | - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size. |
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
Creates a **<Badge>** component based on the string.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | value | string | Yes | - | String of the content to prompt. |
- | position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. |
- | style | BadgeStyle | No | - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size. |
+ | value | string | Yes | - | String of the content to prompt. |
+ | position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. |
+ | style | BadgeStyle | No | - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size. |
- BadgeStyle object
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | color | Color | No | Color.White | Text color. |
- | fontSize | number \| string | No | 10 | Text size. |
- | badgeSize | number \| string | Yes | - | Size of the badge. |
- | badgeColor | Color | No | Color.Red | Color of the badge. |
+ | color | Color | No | Color.White | Text color. |
+ | fontSize | number \| string | No | 10 | Text size. |
+ | badgeSize | number \| string | Yes | - | Size of the badge. |
+ | badgeColor | Color | No | Color.Red | Color of the badge. |
- BadgePosition enums
| Name | Description |
| -------- | -------- |
- | Right | The badge is vertically centered on the right of the parent component. |
- | RightTop | The badge is displayed in the upper right corner of the parent component. |
- | Left | The badge is vertically centered on the left of the parent component. |
+ | Right | The badge is vertically centered on the right of the parent component. |
+ | RightTop | The badge is displayed in the upper right corner of the parent component. |
+ | Left | The badge is vertically centered on the left of the parent component. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md
index e0e60472e1fe83911dc23e5a36d6ab444132a282..09b477964abe9bfe171fbbd4bfaa267cf7a1bb11 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-column.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-column.md
@@ -1,7 +1,7 @@
# Column
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -24,24 +24,24 @@ Column(value:{space?: Length})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | space | Length | No | 0 | Space between any two adjacent child components in the vertical layout. |
+ | space | Length | No | 0 | Space between any two adjacent child components in the vertical layout. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of child components in the horizontal direction. |
+| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of child components in the horizontal direction. |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of child components in the vertical direction. |
- HorizontalAlign enums
| Name | Description |
| -------- | -------- |
- | Start | Aligned with the start edge in the same direction as the language in use. |
- | Center | Center alignment. This is the default alignment mode. |
- | End | Aligned with the end edge in the same direction as the language in use. |
+ | Start | Aligned with the start edge in the same direction as the language in use. |
+ | Center | Center alignment. This is the default alignment mode. |
+ | End | Aligned with the end edge in the same direction as the language in use. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
index 97e29299d78e965706d02225033a3c752e5b12e0..3aba5c0fe025180f858ab9b562b7853877bd623e 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
@@ -1,7 +1,7 @@
# ColumnSplit
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -27,9 +27,9 @@ ColumnSplit()
| Name | Type | Description |
| -------- | -------- | -------- |
-| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
+| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
->  **NOTE：**
+>  **NOTE**
> Similar to **<RowSplit>**, the divider of **<ColumnSplit>** can be dragged to a position that just fully holds a component.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-counter.md b/en/application-dev/reference/arkui-ts/ts-container-counter.md
index e9a959bdaf6ec41a969d743c55610a29bc608c34..cdd112c342e290764d4d87f9e560303099678f20 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-counter.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-counter.md
@@ -1,7 +1,7 @@
# Counter
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -29,8 +29,8 @@ Universal events and gestures are not supported. Only the events listed below ar
| Name | Description |
| -------- | -------- |
-| onInc(event: () => void) | Event indicating that the number of monitored objects is increased. |
-| onDec(event: () => void) | Event indicating that the number of monitored objects is decreased. |
+| onInc(event: () => void) | Event indicating that the number of monitored objects is increased. |
+| onDec(event: () => void) | Event indicating that the number of monitored objects is decreased. |
## Example
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 f0392afc2f55f47066b91fd89bbb90a23519fee2..8e47369ccfe0454e165416dc69b84206d3bb8465 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -1,7 +1,7 @@
# Flex
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,38 +25,38 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
Creates a standard **<Flex>** component.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **<Flex>** component, that is, the direction of the main axis. |
- | wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **<Flex>** component has a single line or multiple lines. |
- | justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **<Flex>** component along the main axis. |
- | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **<Flex>** component along the cross axis. |
- | alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
+ | direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **<Flex>** component, that is, the direction of the main axis. |
+ | wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **<Flex>** component has a single line or multiple lines. |
+ | justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **<Flex>** component along the main axis. |
+ | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **<Flex>** component along the cross axis. |
+ | alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
- FlexDirection enums
| Name | Description |
| -------- | -------- |
- | Row | The child components are arranged in the same direction as the main axis runs along the rows. |
- | RowReverse | The child components are arranged opposite to the **Row** direction. |
- | Column | The child components are arranged in the same direction as the main axis runs down the columns. |
- | ColumnReverse | The child components are arranged opposite to the **Column** direction. |
+ | Row | The child components are arranged in the same direction as the main axis runs along the rows. |
+ | RowReverse | The child components are arranged opposite to the **Row** direction. |
+ | Column | The child components are arranged in the same direction as the main axis runs down the columns. |
+ | ColumnReverse | The child components are arranged opposite to the **Column** direction. |
- FlexWrap enums
| Name | Description |
| -------- | -------- |
- | NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. |
- | Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. |
- | WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. |
+ | NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. |
+ | Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. |
+ | WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. |
- FlexAlign enums
| Name | Description |
| -------- | -------- |
- | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
- | Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
- | End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
- | SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
- | SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
- | SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
+ | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
+ | Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
+ | End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
+ | SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
+ | SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
+ | SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
## Example
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 9dcde4d28f857984dcea9bc7a37d22948df9ab87..cba299a352b8ccc092a9926a3a33333255ab4b24 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-grid.md
@@ -1,7 +1,7 @@
# Grid
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,18 +25,18 @@ Grid()
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| columnsTemplate | string | '1fr' | Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts. |
-| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts. |
-| columnsGap | Length | 0 | Spacing between columns. |
-| rowsGap | Length | 0 | Spacing between rows. |
-| editMode8+ | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **<[GridItem](ts-container-griditem.md)>** in the **<Gird>** component. |
+| columnsTemplate | string | '1fr' | Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts. |
+| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts. |
+| columnsGap | Length | 0 | Spacing between columns. |
+| rowsGap | Length | 0 | Spacing between rows. |
+| editMode8+ | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **<[GridItem](ts-container-griditem.md)>** in the **<Gird>** component. |
| layoutDirection8+ | [LayoutDirection](ts-appendix-enums.md#layoutdirection-enums) | LayoutDirection.Row | Main axis direction of the layout. The options are as follows:- **LayoutDirection.Row**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.- **LayoutDirection.Column**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns. |
-| maxCount8+ | number | 1 | Maximum number of rows that can be displayed. |
-| minCount8+ | number | 1 | Minimum number of rows that can be displayed. |
-| cellLength8+ | number | 0 | Fixed height per row. |
-| multiSelectable8+ | boolean | false | Whether to enable mouse frame selection.
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is disabled. |
+| maxCount8+ | number | 1 | Maximum number of rows that can be displayed. |
+| minCount8+ | number | 1 | Minimum number of rows that can be displayed. |
+| cellLength8+ | number | 0 | Fixed height per row. |
+| multiSelectable8+ | boolean | false | Whether to enable mouse frame selection.
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is disabled. |
| edgeEffection8+ | EdgeEffect | EdgeEffect.Spring | Edge effect. For details, see **EdgeEffect**. |
- EdgeEffect enums
@@ -50,7 +50,7 @@ Grid()
| Name | Description |
| -------- | -------- |
-| onScrollIndex(first: number) => void | Triggered when the start item of the grid changes. |
+| onScrollIndex(first: number) => void | Triggered when the start item of the grid changes. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
index 5db6c9fc044571a2e9bd6ac1cb013111d0bd11cb..cf01858f70382307d4aaea98819d1a93f861e9b9 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
@@ -1,7 +1,7 @@
# GridContainer
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,21 +23,21 @@ This component can contain child components.
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
- Parameter
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
- | sizeType | SizeType | No | SizeType.Auto | Device size type. |
- | gutter | Length | No | - | Gutter of the grid layout. |
- | margin | Length | No | - | Margin of the grid layout. |
+ | columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
+ | sizeType | SizeType | No | SizeType.Auto | Device size type. |
+ | gutter | Length | No | - | Gutter of the grid layout. |
+ | margin | Length | No | - | Margin of the grid layout. |
- SizeType enums
| Name | Description |
| -------- | -------- |
- | XS | Device of the minimum size. |
- | SM | Small-sized device. |
- | MD | Medium-sized device. |
- | LG | Large-sized device. |
- | Auto | Auto. The size type is selected based on the device type. |
+ | XS | Device of the minimum size. |
+ | SM | Small-sized device. |
+ | MD | Medium-sized device. |
+ | LG | Large-sized device. |
+ | Auto | Auto. The size type is selected based on the device type. |
## Attributes
diff --git a/en/application-dev/reference/arkui-ts/ts-container-griditem.md b/en/application-dev/reference/arkui-ts/ts-container-griditem.md
index e035bee25bf7b1f93205c1efa4d5b5c6c9f3364f..7133cf4d8027b231eb430e02601d806b4ee34c41 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-griditem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-griditem.md
@@ -1,7 +1,7 @@
# GridItem
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,7 +13,7 @@ The **<GridItem>** component provides a single item in a grid.
None
-## Child Component
+## Child Components
This component can contain child components.
@@ -25,26 +25,26 @@ GridItem()
## Attributes
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| rowStart | number | - | Start row number of the component. |
-| rowEnd | number | - | End row number of the component. |
-| columnStart | number | - | Start column number of the component. |
-| columnEnd | number | - | End column number of the component. |
-| forceRebuild | boolean | false | Whether to re-create this node when the component is being built. |
-| selectable8+ | boolean | true | Whether the current **<GridItem>** is selectable by the mouse.
>  **NOTE：**
> This attribute takes effect only when mouse frame selection is enabled for the parent **<Grid>** container. |
+| rowStart | number | - | Start row number of the component. |
+| rowEnd | number | - | End row number of the component. |
+| columnStart | number | - | Start column number of the component. |
+| columnEnd | number | - | End column number of the component. |
+| forceRebuild | boolean | false | Whether to re-create this node when the component is being built. |
+| selectable8+ | boolean | true | Whether the current **<GridItem>** is selectable by the mouse.
>  **NOTE**
> This attribute takes effect only when mouse frame selection is enabled for the parent **<Grid>** container. |
## Events
- | Name | Description |
+| Name | Description |
| -------- | -------- |
-| onSelect(callback: (isSelected: boolean) => any)8+ | Triggered when the selected state of the **<GridItem>** changes.
**isSelected**: Returns **true** if the **<GridItem>** is selected by the mouse; returns **false** otherwise. |
+| onSelect(callback: (isSelected: boolean) => any)8+ | Triggered when the selected state of the **<GridItem>** changes.
**isSelected**: Returns **true** if the **<GridItem>** is selected by the mouse; returns **false** otherwise. |
## Example
-
+
```
@Entry
@Component
diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md
index afd97f25485b0924c910d6c8387cd564e436a0b3..ec669200e28c1bc6870c80f484dca647cc179764 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-list.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-list.md
@@ -1,7 +1,7 @@
# List
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,39 +23,39 @@ This component contains the child component [](../reference/arkui-ts/t
List(value:{space?: number, initialIndex?: number})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | space | number | No | 0 | Spacing between list items. |
- | initialIndex | number | No | 0 | Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect. |
+ | space | number | No | 0 | Spacing between list items. |
+ | initialIndex | number | No | 0 | Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction in which the list items are arranged. For details, see **Axis** enums. |
-| divider | {
strokeWidth: Length,
color?:Color,
startMargin?: Length,
endMargin?: Length
} | - | Style of the divider for the list items. By default, there is no divider.
**strokeWidth**: stroke width of the divider.
**color**: color of the divider.
**startMargin**: distance between the divider and the start of the list.
**endMargin**: distance between the divider and the end of the list. |
-| editMode | boolean | false | Whether the **<List>** component is in editable mode. |
-| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding effect. For details, see EdgeEffect enums. |
-| chainAnimation | boolean | false | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed. |
-| multiSelectable8+ | boolean | false | Whether to enable mouse frame selection.
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is disabled. |
-| restoreId8+ | number | - | Migration ID of the component. During application migration, the status of the component is migrated to the component with the same migration ID on the peer end.
For a **<List>** component, the status includes the item serial number displayed at the start position. |
+| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction in which the list items are arranged. For details, see **Axis** enums. |
+| divider | {
strokeWidth: Length,
color?:Color,
startMargin?: Length,
endMargin?: Length
} | - | Style of the divider for the list items. By default, there is no divider.
**strokeWidth**: stroke width of the divider.
**color**: color of the divider.
**startMargin**: distance between the divider and the start of the list.
**endMargin**: distance between the divider and the end of the list. |
+| editMode | boolean | false | Whether the **<List>** component is in editable mode. |
+| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding effect. For details, see EdgeEffect enums. |
+| chainAnimation | boolean | false | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed. |
+| multiSelectable8+ | boolean | false | Whether to enable mouse frame selection.
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is disabled. |
+| restoreId8+ | number | - | Migration ID of the component. During application migration, the status of the component is migrated to the component with the same migration ID on the peer end.
For a **<List>** component, the status includes the item serial number displayed at the start position. |
- EdgeEffect enums
| Name | Description |
| -------- | -------- |
- | Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. |
- | None | No effect after the scroll bar is moved to the edge. |
+ | Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. |
+ | None | No effect after the scroll bar is moved to the edge. |
## Events
| Name | Description |
| -------- | -------- |
-| onItemDelete(index: number) => boolean | Triggered when a list item is deleted. |
-| onScrollIndex(firstIndex: number, lastIndex: number) => void | Triggered when the start position and end position of the current list are changed. |
+| onItemDelete(index: number) => boolean | Triggered when a list item is deleted. |
+| onScrollIndex(firstIndex: number, lastIndex: number) => void | Triggered when the start position and end position of the current list are changed. |
->  **NOTE：**
+>  **NOTE**
> To enable the editable mode for a list, the following conditions must be met:
>
> - **editMode** is set to **true**.
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 0d25e6da92d97adc98d06916695f585d668673d2..7377898fa1d955f999e5a67f794e064d62069bf8 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -1,7 +1,7 @@
# ListItem
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,24 +25,24 @@ ListItem()
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| sticky | Sticky | Sticky.None | Sticky effect of the list item. For details, see Sticky enums. |
-| editable | boolean | false | Whether the list item is editable. A list item can be deleted in editing mode. |
-| selectable8+ | boolean | true | Whether the current **<ListItem>** is selectable by the mouse.
>  **NOTE：**
> This attribute takes effect only when mouse frame selection is enabled for the parent **<List>** container. |
+| sticky | Sticky | Sticky.None | Sticky effect of the list item. For details, see Sticky enums. |
+| editable | boolean | false | Whether the list item is editable. A list item can be deleted in editing mode. |
+| selectable8+ | boolean | true | Whether the current **<ListItem>** is selectable by the mouse.
>  **NOTE**
> This attribute takes effect only when mouse frame selection is enabled for the parent **<List>** container. |
- Sticky enums
| Name | Description |
| -------- | -------- |
- | None | No sticky. |
- | Normal | The list item is sticky. |
+ | None | No sticky. |
+ | Normal | The list item is sticky. |
## Events
| Name | Description |
| -------- | -------- |
-| onSelect(callback: (isSelected: boolean) => any)8+ | Triggered when the selected state of the **<ListItem>** changes.
**isSelected**: Returns **true** if the **<ListItem>** is selected by the mouse; returns **false** otherwise. |
+| onSelect(callback: (isSelected: boolean) => any)8+ | Triggered when the selected state of the **<ListItem>** changes.
**isSelected**: Returns **true** if the **<ListItem>** is selected by the mouse; returns **false** otherwise. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
index ef7f0b331086ed9506fa083ae76ba32e5c5c89b5..df3e651383f44aa20499e0a17a6dd9c0366e9409 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
@@ -1,7 +1,7 @@
# Navigator
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,25 +25,25 @@ Navigator(value?: {target: string, type?: NavigationType})
Creates a navigator.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | target | string | Yes | - | Path of the target page to be redirected to. |
- | type | NavigationType | No | NavigationType.Push | Navigation type. |
+ | target | string | Yes | - | Path of the target page to be redirected to. |
+ | type | NavigationType | No | NavigationType.Push | Navigation type. |
- NavigationType enums
| Name | Description |
| -------- | -------- |
- | Push | Navigates to a specified page in the application. |
- | Replace | Replaces the current page with another one in the application and destroys the current page. |
- | Back | Returns to the previous page or a specified page. |
+ | Push | Navigates to a specified page in the application. |
+ | Replace | Replaces the current page with another one in the application and destroys the current page. |
+ | Back | Returns to the previous page or a specified page. |
## Attributes
- | Name | Parameters | Default Value | Description |
+ | Name | Parameters | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| active | boolean | - | Whether the **<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. |
-| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
+| active | boolean | - | Whether the **<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. |
+| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
## Example
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 85416243d108e02d4e90fa7503eaa5acb70b463b..a73447518e43234f226ca322d04418858f1df2da 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-panel.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md
@@ -1,7 +1,7 @@
# Panel
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,42 +23,42 @@ This component can contain child components.
Panel(value:{show:boolean})
- Parameter
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | show | boolean | Yes | - | Whether the panel is shown or hidden. |
+ | show | boolean | Yes | - | Whether the panel is shown or hidden. |
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| type | PanelType | PanelType.Foldable | Type of the panel. |
-| mode | PanelMode | - | Initial status of the panel. |
-| dragBar | boolean | true | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite. |
-| fullHeight | Length | - | Panel height in the **PanelMode.Full** mode. |
-| halfHeight | Length | - | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height. |
-| miniHeight | Length | - | Panel height in the **PanelMode.Mini** mode. |
+| type | PanelType | PanelType.Foldable | Type of the panel. |
+| mode | PanelMode | - | Initial status of the panel. |
+| dragBar | boolean | true | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite. |
+| fullHeight | Length | - | Panel height in the **PanelMode.Full** mode. |
+| halfHeight | Length | - | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height. |
+| miniHeight | Length | - | Panel height in the **PanelMode.Mini** mode. |
- PanelType enums
| Name | Description |
| -------- | -------- |
- | Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-like) area. |
- | Foldable | A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area. |
- | Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area. |
+ | Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-like) area. |
+ | Foldable | A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area. |
+ | Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area. |
- PanelMode enums
| Name | Description |
| -------- | -------- |
- | Mini | Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels. |
- | Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels. |
- | Full | Displays a panel in a large (fullscreen-like) area. |
+ | Mini | Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels. |
+ | Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels. |
+ | Full | Displays a panel in a large (fullscreen-like) area. |
## Events
| Name | Description |
| -------- | -------- |
-| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragbar** is **true**, the height of the panel is the dragbar height plus the height of the content area. |
+| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragbar** is **true**, the height of the panel is the dragbar height plus the height of the content area. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-refresh.md b/en/application-dev/reference/arkui-ts/ts-container-refresh.md
index fefd46e33b5f0f43fe4565882e288b10fa7952f9..27cff4d2ede5da8828b0af1d783a4bd5060520fc 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-refresh.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-refresh.md
@@ -23,7 +23,7 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\)
| -------- | -------- | -------- | -------- | -------- |
| refreshing | boolean | Yes| - | Whether the current component is being refreshed.|
| offset | Length | No| 16 | Distance to the top of the parent component from the **** component that comes to rest after a successful pull-down gesture.|
- | friction | number | No| 62 | Coefficient of friction, which indicates the **** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.
- **0** indicates that the **** component is not sensitive to the pull-down gesture.
- **100** indicates that the **** component is highly sensitive to the pull-down gesture.
- A larger value indicates a more sensitive response of the **** component to the pull-down gesture.|
+ | friction | number | No| 62 | Coefficient of friction, which indicates the **** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.
- **0** indicates that the **** component is not sensitive to the pull-down gesture.
- **100** indicates that the **** component is highly sensitive to the pull-down gesture.
- A larger value indicates a more sensitive response of the **** component to the pull-down gesture.|
diff --git a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
index 1b034f866a8a95b0a193c8b93d65ee226060d588..66689eb6452cf7a71a11d2f242be8d996526728a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
@@ -1,7 +1,7 @@
# RowSplit
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -27,9 +27,9 @@ RowSplit()
| Name | Type | Description |
| -------- | -------- | -------- |
-| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
+| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
->  **NOTE：**
+>  **NOTE**
> Similar to **<RowSplit>**, the divider of **<RowSplit>** can be dragged to a position that just fully holds a component.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
index 47880bae2416862adf0e39aa872d53106bdbc75a..fe9f455dd4fe3052843fd4f22e76605acd0457f2 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -1,7 +1,7 @@
# Scroll
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -25,19 +25,19 @@ Scroll(scroller?: Scroller)
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. |
-| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. |
-| scrollBarColor | Color | - | Color of the scroll bar. |
-| scrollBarWidth | Length | - | Width of the scrollbar. |
+| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. |
+| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. |
+| scrollBarColor | Color | - | Color of the scroll bar. |
+| scrollBarWidth | Length | - | Width of the scrollbar. |
- ScrollDirection
| Name | Description |
| -------- | -------- |
- | Horizontal | Only horizontal scrolling is supported. |
- | Vertical | Only vertical scrolling is supported. |
- | None | Scrolling is disabled. |
+ | Horizontal | Only horizontal scrolling is supported. |
+ | Vertical | Only vertical scrolling is supported. |
+ | None | Scrolling is disabled. |
## Scroller
@@ -62,11 +62,11 @@ Scrolls to the specified position.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | xOffset | Length | Yes | - | Horizontal scrolling offset. |
- | yOffset | Length | Yes | - | Vertical scrolling offset. |
- | animation | {
duration: number,
curve: Curve \|
CubicBezier \|
SpringCurve
} | No | | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve. |
+ | xOffset | Length | Yes | - | Horizontal scrolling offset. |
+ | yOffset | Length | Yes | - | Vertical scrolling offset. |
+ | animation | {
duration: number,
curve: Curve \|
CubicBezier \|
SpringCurve
} | No | | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve. |
### scroller.scrollEdge
@@ -78,9 +78,9 @@ Scrolls to the edge of the container.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | value | Edge | Yes | - | Edge position to scroll to. |
+ | value | Edge | Yes | - | Edge position to scroll to. |
### scroller.scrollPage
@@ -90,9 +90,9 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
Scrolls to the next or previous page.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
+ | next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
### scroller.currentOffset
@@ -106,7 +106,7 @@ Obtains the scrolling offset.
- Return values
| Type | Description |
| -------- | -------- |
- | {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset. |
+ | {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset. |
### scroller.scrollToIndex
@@ -117,23 +117,23 @@ scroller.scrollToIndex(value: number): void
Scrolls to the specified index.
->  **NOTE：**
+>  **NOTE**
> Only the **<List>** component is supported.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | value | number | Yes | - | Index of the item to be scrolled to in the list. |
+ | value | number | Yes | - | Index of the item to be scrolled to in the list. |
## Events
| Name | Description |
| -------- | -------- |
-| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
-| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. |
-| onScrollEnd() => void | Invoked when scrolling stops. |
+| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
+| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. |
+| onScrollEnd() => void | Invoked when scrolling stops. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-stack.md b/en/application-dev/reference/arkui-ts/ts-container-stack.md
index efb1e0276661c1861d2de6d3e9c561d073991b96..c97e158c1f9d9320903cf5db3e51afbefa0d6602 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-stack.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-stack.md
@@ -1,7 +1,7 @@
# Stack
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ The **<Stack>** component provides a stack container where child component
None
-## Child Component
+## Child Components
-The **<Stack>** component can contain child components.
+ Supported
## APIs
@@ -23,9 +23,9 @@ The **<Stack>** component can contain child components.
Stack(value:{alignContent?: Alignment})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | alignContent | [Alignment](ts-appendix-enums.md#alignment-enums) | No | Center | Alignment of child components in the container. |
+ | alignContent | [Alignment](ts-appendix-enums.md#alignment-enums) | No | Center | Alignment of child components in the container. |
## Example
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 34617b654d5347fa1ec45380191a7723d141e752..ce400d6a529c1d46d0edef2fcbd0dbd033610067 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -1,7 +1,7 @@
# Swiper
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,26 +23,26 @@ This component can contain child components.
Swiper(value:{controller?: SwiperController})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. |
+ | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| index | number | 0 | Index of the child component currently displayed in the container. |
-| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the indicator dots do not take effect. |
-| interval | number | 3000 | Interval for automatic playback, in ms. |
-| indicator | boolean | true | Whether to enable the navigation dots. |
-| loop | boolean | true | Whether to enable loop playback. |
-| duration | number | 400 | Duration of the animation for switching child components, in ms. |
-| vertical | boolean | false | Whether vertical swiping is used. |
-| itemSpace | Length | 0 | Space between child components. |
-| cachedCount8+ | number | 1 | Number of child components to be cached. |
-| disableSwipe8+ | boolean | false | Whether to disable the swipe feature. |
-| curve8+ | [Curve](ts-animatorproperty.md) \| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
+| index | number | 0 | Index of the child component currently displayed in the container. |
+| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the indicator dots do not take effect. |
+| interval | number | 3000 | Interval for automatic playback, in ms. |
+| indicator | boolean | true | Whether to enable the navigation dots. |
+| loop | boolean | true | Whether to enable loop playback. |
+| duration | number | 400 | Duration of the animation for switching child components, in ms. |
+| vertical | boolean | false | Whether vertical swiping is used. |
+| itemSpace | Length | 0 | Space between child components. |
+| cachedCount8+ | number | 1 | Number of child components to be cached. |
+| disableSwipe8+ | boolean | false | Whether to disable the swipe feature. |
+| curve8+ | [Curve](ts-animatorproperty.md) \| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
### SwiperController
@@ -51,15 +51,15 @@ Controller of the **<Swiper>** component. You can bind this object to the
| Name | Description |
| -------- | -------- |
-| showNext():void | Turns to the next page. |
-| showPrevious():void | Turns to the previous page. |
+| showNext():void | Turns to the next page. |
+| showPrevious():void | Turns to the previous page. |
## Events
| Name | Description |
| -------- | -------- |
-| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
+| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
index 7f3af8d922d2bceb26d41a338364bf81bc263516..5999c9de7c717a3ec1ad7bb06725a9a20795c5bf 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
@@ -1,7 +1,7 @@
# TabContent
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,7 +13,7 @@ The **<TabContent>** component is used only in the **<Tabs>** compon
None
-## Child Component
+## Child Components
This component supports only one child component.
@@ -27,11 +27,11 @@ TabContent()
Touch target configuration is not supported.
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| tabBar | string \| {
icon?: string,
text?: string
}
\|[CustomBuilder](../../ui/ts-types.md) | - | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
>  **NOTE：**
> If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. |
+| tabBar | string \| {
icon?: string,
text?: string
}
\|[CustomBuilder](../../ui/ts-types.md) | - | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
>  **NOTE**
> If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. |
->  **NOTE：**
+>  **NOTE**
> - The **<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **<Tabs>** component.
>
> - The **<TabContent>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **<Tabs>** component and the **<TabBar>** component.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/arkui-ts/ts-container-tabs.md
index 8e0fca0e9fa3da2b40a4c2f3eb6199fde96765fc..42797131cef70c6f80bc8baa55302732432f2e06 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-tabs.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-tabs.md
@@ -1,7 +1,7 @@
# Tabs
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,7 +13,7 @@ The **<Tabs>** component is a container component that allows users to swi
None
-## Child Component
+## Child Components
The **<Tabs>** component can contain [TabContent](ts-container-tabcontent.md) child components.
@@ -23,53 +23,53 @@ The **<Tabs>** component can contain [TabContent](ts-container-tabcontent.
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | barPosition | BarPosition | No | BarPosition.Start | Tab bar position for creating the **<Tabs>** container component. |
- | index | number | No | 0 | Initial tab index. |
- | controller | [TabsController](#tabscontroller) | No | - | Tab controller. |
+ | barPosition | BarPosition | No | BarPosition.Start | Tab bar position for creating the **<Tabs>** container component. |
+ | index | number | No | 0 | Initial tab index. |
+ | controller | [TabsController](#tabscontroller) | No | - | Tab controller. |
- BarPosition enums
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
- | Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container. |
- | End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container. |
+ | Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container. |
+ | End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container. |
### TabsController
Defines a tab controller, which is used to control switching of tabs.
- | API | Description |
+| API | Description |
| -------- | -------- |
-| changeIndex(value: number): void | Changes the index of a tab. The value starts from **0**. |
+| changeIndex(value: number): void | Changes the index of a tab. The value starts from **0**. |
## Attributes
Touch target configuration is not supported.
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| vertical | boolean | false | Whether a tab is a vertical tab. |
-| scrollable | boolean | true | Whether page switching can be performed by swiping left or right. |
-| barMode | BarMode | - | Tab bar layout mode. |
-| barWidth | number | - | Width of the tab bar. If this parameter is not set, the default value in the system theme is used. |
-| barHeight | number | - | Height of the tab bar. If this parameter is not set, the default value in the system theme is used. |
-| animationDuration | number | 200 | Animation duration of the tab content. |
+| vertical | boolean | false | Whether a tab is a vertical tab. |
+| scrollable | boolean | true | Whether page switching can be performed by swiping left or right. |
+| barMode | BarMode | - | Tab bar layout mode. |
+| barWidth | number | - | Width of the tab bar. If this parameter is not set, the default value in the system theme is used. |
+| barHeight | number | - | Height of the tab bar. If this parameter is not set, the default value in the system theme is used. |
+| animationDuration | number | 200 | Animation duration of the tab content. |
- BarMode enums
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
- | Scrollable | The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable. |
- | Fixed | The widths of all tab bars are evenly allocated. |
+ | Scrollable | The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable. |
+ | Fixed | The widths of all tab bars are evenly allocated. |
## Events
- | Name | Description |
+| Name | Description |
| -------- | -------- |
-| onChange(callback: (index: number) => void) | Event triggered when a tab is switched. |
+| onChange(callback: (index: number) => void) | Event triggered when a tab is switched. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
index f27d8720103662925dab1c720d4d9da249bb611e..d462606e550e10892d64e45a31af955f13a6d2e8 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
@@ -1,7 +1,7 @@
# Circle
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,12 +23,12 @@ None
Circle(options?: {width: Length, height: Length})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | options | Object | No | - | For details, see the **options** parameters. |
+ | options | Object | No | - | For details, see the **options** parameters. |
- options parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
@@ -36,10 +36,10 @@ Circle(options?: {width: Length, height: Length})
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the circle is located. |
-| height | Length | 0 | No | Height of the rectangle where the circle is located. |
+| width | Length | 0 | No | Width of the rectangle where the circle is located. |
+| height | Length | 0 | No | Height of the rectangle where the circle is located. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
index 8c12c8fc6b178006a44b252cc03e5f32ad2af4ce..8dc038f4cd1244eac9597a8895d34a83e5335e65 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
@@ -1,7 +1,7 @@
# Ellipse
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,12 +23,12 @@ None
ellipse(options?: {width: Length, height: Length})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | options | Object | No | - | For details, see the **options** parameters. |
+ | options | Object | No | - | For details, see the **options** parameters. |
- options parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
@@ -36,10 +36,10 @@ ellipse(options?: {width: Length, height: Length})
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the ellipse is located. |
-| height | Length | 0 | No | Height of the rectangle where the ellipse is located. |
+| width | Length | 0 | No | Width of the rectangle where the ellipse is located. |
+| height | Length | 0 | No | Height of the rectangle where the ellipse is located. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
index 0221bc3737911512a51cd62cd018394ccbb87400..6bc655a5407bb61b277f2a36006c9f495538d301 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
@@ -1,7 +1,7 @@
# Line
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,12 +23,12 @@ None
Line(options?: {width: Length, height: Length})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | options | Object | No | - | For details, see the **options** parameters. |
+ | options | Object | No | - | For details, see the **options** parameters. |
- options parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
@@ -36,12 +36,12 @@ Line(options?: {width: Length, height: Length})
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the straight line is located. |
-| height | Length | 0 | No | Height of the rectangle where the straight line is located. |
-| startPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the start point of the straight line. |
-| endPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the end point of the straight line. |
+| width | Length | 0 | No | Width of the rectangle where the straight line is located. |
+| height | Length | 0 | No | Height of the rectangle where the straight line is located. |
+| startPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the start point of the straight line. |
+| endPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the end point of the straight line. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
index 230877976324202f8f0d4c581506c8793d62e37a..640678045ce64df22aeb570f436b66e86a3d9c3d 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
@@ -1,7 +1,7 @@
# Path
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -20,11 +20,11 @@ None
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the path is located. |
-| height | Length | 0 | No | Height of the rectangle where the path is located. |
-| commands | string | '' | Yes | Command string for drawing the path. |
+| width | Length | 0 | No | Width of the rectangle where the path is located. |
+| height | Length | 0 | No | Height of the rectangle where the path is located. |
+| commands | string | '' | Yes | Command string for drawing the path. |
The supported commands are as follows:
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
index a3a4678f857822de576e7a7b51371d076636021a..65d26dc9d1388cac2d8eddb4da24b420fec9d2e3 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
@@ -1,7 +1,7 @@
# Polygon
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,12 +23,12 @@ None
Polygon(value:{options?: {width: Length, height: Length}})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | options | Object | No | - | For details, see the **options** parameters. |
+ | options | Object | No | - | For details, see the **options** parameters. |
- options parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
@@ -36,11 +36,11 @@ Polygon(value:{options?: {width: Length, height: Length}})
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the polygon is located. |
-| height | Length | 0 | No | Height of the rectangle where the polygon is located. |
-| points | Array<Point> | - | Yes | Vertex coordinates of the polygon. |
+| width | Length | 0 | No | Width of the rectangle where the polygon is located. |
+| height | Length | 0 | No | Height of the rectangle where the polygon is located. |
+| points | Array<Point> | - | Yes | Vertex coordinates of the polygon. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
index ddffe533def58acca13e346c0a7be8a594c1141e..1ffdd3cb28943e1d2f1b7a4c1a35b611af5f4d6b 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
@@ -1,7 +1,7 @@
# Polyline
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,12 +23,12 @@ None
Polyline(options?: {width: Length, height: Length})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | options | Object | No | - | For details, see the **options** parameters. |
+ | options | Object | No | - | For details, see the **options** parameters. |
- options parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
@@ -36,11 +36,11 @@ Polyline(options?: {width: Length, height: Length})
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the polyline is located. |
-| height | Length | 0 | No | Height of the rectangle where the polyline is located. |
-| points | Array<Point> | - | Yes | List of coordinates that the polyline passes through. |
+| width | Length | 0 | No | Width of the rectangle where the polyline is located. |
+| height | Length | 0 | No | Height of the rectangle where the polyline is located. |
+| points | Array<Point> | - | Yes | List of coordinates that the polyline passes through. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
index 561cd243b2ef3c64c5eda583de312cdd3e9954c5..45abfb085736f57bc08876512b9e4fabd3402328 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
@@ -1,7 +1,7 @@
# Rect
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -23,29 +23,29 @@ None
Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<Length>} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | options | Object | No | - | For details, see the **options** parameters. |
+ | options | Object | No | - | For details, see the **options** parameters. |
- options parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
- | radius | Length \| Array<Length> | No | 0 | Radius of a rounded corner. You can set the radius of four rounded corners. |
- | radiusWidth | Length | No | 0 | Width of the rounded corner. |
- | radiusHeight | Length | No | 0 | Height of the rounded corner. |
+ | radius | Length \| Array<Length> | No | 0 | Radius of a rounded corner. You can set the radius of four rounded corners. |
+ | radiusWidth | Length | No | 0 | Width of the rounded corner. |
+ | radiusHeight | Length | No | 0 | Height of the rounded corner. |
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width. |
| height | Length | 0 | No | Height. |
-| radiusWidth | Length | 0 | No | Width of a rounded corner. The width and height are the same when only the width is set. |
-| radiusHeight | Length | 0 | No | Height of the rounded corner. The width and height are the same only when the height is set. |
-| radius | Length \| Array<Length> | 0 | No | Size of the rounded corner. |
+| radiusWidth | Length | 0 | No | Width of a rounded corner. The width and height are the same when only the width is set. |
+| radiusHeight | Length | 0 | No | Height of the rounded corner. The width and height are the same only when the height is set. |
+| radius | Length \| Array<Length> | 0 | No | Size of the rounded corner. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
index 41a23559e400e413604e052acfa9497c5bfec812..5c17b095ddbf3fe50dabe66f1db4cf15331d1f02 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
@@ -1,7 +1,7 @@
# Shape
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -29,33 +29,33 @@ The **<Shape>** component can contain child components.
Shape(value:{target?: PixelMap})
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | target | PixelMap | No | null | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. |
+ | target | PixelMap | No | null | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. |
## Attributes
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| viewPort | {
x: Length,
y: Length,
width: Length,
height: Length
} | - | Yes | View port of the shape. |
-| fill | Color | Black | No | Fill color. |
-| stroke | Color | - | No | Stroke color. |
-| strokeDashArray | Array<Length> | [] | No | Stroke dash. |
-| strokeDashOffset | Length | 0 | No | Offset of the start point for drawing the stroke. |
-| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap style of the stroke. |
-| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join style of the stroke. |
-| strokeMiterLimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. |
-| strokeOpacity | number | 1 | No | Stroke opacity. |
-| strokeWidth | Length | 1 | No | Stroke width. |
-| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
+| viewPort | {
x: Length,
y: Length,
width: Length,
height: Length
} | - | Yes | View port of the shape. |
+| fill | Color | Black | No | Fill color. |
+| stroke | Color | - | No | Stroke color. |
+| strokeDashArray | Array<Length> | [] | No | Stroke dash. |
+| strokeDashOffset | Length | 0 | No | Offset of the start point for drawing the stroke. |
+| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap style of the stroke. |
+| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join style of the stroke. |
+| strokeMiterLimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. |
+| strokeOpacity | number | 1 | No | Stroke opacity. |
+| strokeWidth | Length | 1 | No | Stroke width. |
+| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
- LineJoinStyle enums
| Name | Description |
| -------- | -------- |
- | Bevel | Bevel is used to connect paths. |
- | Miter | Miter is used to connect paths. |
- | Round | Round is used to connect paths. |
+ | Bevel | Bevel is used to connect paths. |
+ | Miter | Miter is used to connect paths. |
+ | Round | Round is used to connect paths. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
index aa9f4e4009164f24843748c3eaa7fbdbb0721d86..f8c65982db423a9dc3eb4a7573b9501e15a1b73d 100644
--- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -1,31 +1,31 @@
# Explicit Animation
->  **NOTE：**
+>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Description |
| -------- | -------- |
-| animateTo(value: [AnimationOption](#animationoption-object), event: ()=> void) : void | Provides a transition animation when the status changes due to the closure code.
**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
+| animateTo(value: [AnimationOption](#animationoption-object), event: ()=> void) : void | Provides a transition animation when the status changes due to the closure code.
**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
## AnimationOption Object
- Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
- | duration | number | 1000 | Animation duration, in ms. |
- | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
- | curve | Curve \| Curves | Linear | Animation curve. |
- | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
- | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
- | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
+ | duration | number | 1000 | Animation duration, in ms. |
+ | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
+ | curve | Curve \| Curves | Linear | Animation curve. |
+ | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
+ | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
+ | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
- APIs
| Name | Description |
| -------- | -------- |
- | onFinish() => void | Callback invoked when the animation playback is complete. |
+ | onFinish() => void | Callback invoked when the animation playback is complete. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
index c467540f76faf3cd350a8dbbd7c96c086b72f1e4..b51abd4a6cdb11e4c2678d5983c2ca7e44cdd1ca 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -1,7 +1,7 @@
# Gesture Binding Methods
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,29 +16,29 @@ None
Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| gesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
-| priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to preferentially recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE：**
> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
-| parallelGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE：**
> - The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect. |
+| gesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
+| priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to preferentially recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE**
> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
+| parallelGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE**
> - The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect. |
- GestureMask enums
| Name | Description |
| -------- | -------- |
- | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
- | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.
>  **NOTE：**
> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. |
+ | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
+ | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.
>  **NOTE**
> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. |
- Gesture types
| Name | Description |
| -------- | -------- |
- | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
- | LongPressGesture | Long press gesture. |
- | PanGesture | Pan gesture. |
- | PinchGesture | Pinch gesture. |
- | RotationGesture | Rotation gesture. |
- | GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
+ | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
+ | LongPressGesture | Long press gesture. |
+ | PanGesture | Pan gesture. |
+ | PinchGesture | Pinch gesture. |
+ | RotationGesture | Rotation gesture. |
+ | GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
## Gesture Response Event
@@ -48,13 +48,13 @@ The component uses the **gesture** method to bind the gesture object and uses th
- TapGesture events
| Name | Description |
| -------- | -------- |
- | onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
+ | onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
- GestureEvent attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | timestamp | number | Timestamp of the event. |
- | target8+ | EventTarget | Object that triggers the gesture event. |
+ | timestamp | number | Timestamp of the event. |
+ | target8+ | EventTarget | Object that triggers the gesture event. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
index 11443bfc54db26d3fafef85fb3713b7a9457f36d..de18fea31cc344b2e25091cbb442df29ad87fda9 100644
--- a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
+++ b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
@@ -1,7 +1,7 @@
# Interpolation Calculation
->  **NOTE：**
+>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -27,9 +27,9 @@ Implements initialization for the interpolation curve, which is used to create a
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | curve | Curve | No | Linear | Curve object. |
+ | curve | Curve | No | Linear | Curve object. |
- Return values
Curve object.
@@ -44,10 +44,10 @@ Constructs a step curve object.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | count | number | Yes | - | Number of steps. Must be a positive integer. |
- | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
+ | count | number | Yes | - | Number of steps. Must be a positive integer. |
+ | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
- Return values
Curve object.
@@ -64,10 +64,10 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
- | y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
- | x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
- | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
+ | x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
+ | y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
+ | x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
+ | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Return values
Curve object.
@@ -84,7 +84,7 @@ Constructs a spring curve object.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | velocity | number | Yes | Initial velocity. |
+ | velocity | number | Yes | Initial velocity. |
| mass | number | Yes | Mass. |
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
@@ -108,7 +108,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
Curve objects can be created only by the preceding APIs.
| API | Description |
| -------- | -------- |
-| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
**time**: indicates the current normalized time. The value ranges from 0 to 1.
The curve interpolation corresponding to the normalized time point is returned. |
+| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
**time**: indicates the current normalized time. The value ranges from 0 to 1.
The curve interpolation corresponding to the normalized time point is returned. |
- Example
diff --git a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
index 0b441459e0459dc0a6f9466a1f3d16a1531f766c..a6f5c1c5d0e300331f5b927fdfd1c69473938a9d 100644
--- a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
+++ b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
@@ -1,7 +1,7 @@
# Matrix Transformation
->  **NOTE：**
+>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -27,34 +27,34 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | array | Array<number> | Yes | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. |
+ | array | Array<number> | Yes | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. |
- Return values
| Type | Description |
| -------- | -------- |
- | Object | 4x4 matrix object created based on the input parameter. |
+ | Object | 4x4 matrix object created based on the input parameter. |
- Parameter description
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. |
- | m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. |
- | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
+ | m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. |
+ | m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. |
+ | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
| m03 | number | Yes | Meaningless. |
- | m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. |
- | m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. |
- | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. |
+ | m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. |
+ | m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. |
+ | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. |
| m13 | number | Yes | Meaningless. |
- | m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. |
- | m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. |
- | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. |
+ | m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. |
+ | m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. |
+ | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. |
| m23 | number | Yes | Meaningless. |
- | m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. |
- | m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. |
- | m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. |
- | m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. |
+ | m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. |
+ | m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. |
+ | m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. |
+ | m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. |
- Example
@@ -79,7 +79,7 @@ Matrix initialization function. Can return a unit matrix object.
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Unit matrix object. |
+ | Object | Unit matrix object. |
- Example
@@ -105,7 +105,7 @@ Matrix copy function, which is used to copy the current matrix object.
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Copy object of the current matrix. |
+ | Object | Copy object of the current matrix. |
- Example
@@ -147,14 +147,14 @@ Matrix overlay function, which is used to overlay the effects of two matrices to
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | matrix | Matrix4 | Yes | - | Matrix object to be overlaid. |
+ | matrix | Matrix4 | Yes | - | Matrix object to be overlaid. |
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Object after matrix overlay. |
+ | Object | Object after matrix overlay. |
- Example
@@ -191,7 +191,7 @@ Matrix inverse function. Can return an inverse matrix of the current matrix obje
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Inverse matrix object of the current matrix. |
+ | Object | Inverse matrix object of the current matrix. |
- Example
@@ -212,17 +212,17 @@ Matrix translation function, which is used to add the translation effect to the
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | No | 0 | Translation distance of the x-axis, in px. |
- | y | number | No | 0 | Translation distance of the y-axis, in px. |
- | z | number | No | 0 | Translation distance of the z-axis, in px. |
+ | x | number | No | 0 | Translation distance of the x-axis, in px. |
+ | y | number | No | 0 | Translation distance of the y-axis, in px. |
+ | z | number | No | 0 | Translation distance of the z-axis, in px. |
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Matrix object after the translation effect is added. |
+ | Object | Matrix object after the translation effect is added. |
- Example
@@ -254,19 +254,19 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | No | 1 | Scaling multiple of the x-axis. |
- | y | number | No | 1 | Scaling multiple of the y-axis. |
- | z | number | No | 1 | Scaling multiple of the z-axis. |
- | centerX | number | No | 0 | X coordinate of the center point. |
- | centerY | number | No | 0 | Y coordinate of the center point. |
+ | x | number | No | 1 | Scaling multiple of the x-axis. |
+ | y | number | No | 1 | Scaling multiple of the y-axis. |
+ | z | number | No | 1 | Scaling multiple of the z-axis. |
+ | centerX | number | No | 0 | X coordinate of the center point. |
+ | centerY | number | No | 0 | Y coordinate of the center point. |
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Matrix object after the scaling effect is added. |
+ | Object | Matrix object after the scaling effect is added. |
- Example
@@ -298,20 +298,20 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | No | 1 | X coordinate of the rotation axis vector. |
- | y | number | No | 1 | Y coordinate of the rotation axis vector. |
- | z | number | No | 1 | Z coordinate of the rotation axis vector. |
- | angle | number | No | 0 | Rotation angle. |
- | centerX | number | No | 0 | X coordinate of the center point. |
- | centerY | number | No | 0 | Y coordinate of the center point. |
+ | x | number | No | 1 | X coordinate of the rotation axis vector. |
+ | y | number | No | 1 | Y coordinate of the rotation axis vector. |
+ | z | number | No | 1 | Z coordinate of the rotation axis vector. |
+ | angle | number | No | 0 | Rotation angle. |
+ | centerX | number | No | 0 | X coordinate of the center point. |
+ | centerY | number | No | 0 | Y coordinate of the center point. |
- Return values
| Type | Description |
| -------- | -------- |
- | Object | Matrix object after the rotation effect is added. |
+ | Object | Matrix object after the rotation effect is added. |
- Example
@@ -343,15 +343,15 @@ Matrix point transformation function, which is used to apply the current transfo
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | point | Point | Yes | - | Point to be transformed. |
+ | point | Point | Yes | - | Point to be transformed. |
- Return values
| Type | Description |
| -------- | -------- |
- | Point | Point object after matrix transformation |
+ | Point | Point object after matrix transformation |
- Example
diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
index c00ac70de9b3ff1dfd321b41c92655826224b8de..8e2f943835a48517e45377c0ac81fd6145471bed 100644
--- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md
+++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
@@ -1,7 +1,7 @@
# Video
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -18,69 +18,69 @@ The **<Video>** component does not support any child component.
Video(value: VideoOption)
- VideoOption attributes
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | src | string | No | - | Path of the video source. |
- | currentProgressRate | number \| PlaybackSpeed8+ | No | 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | Video playback speed.
>  **NOTE：**
> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.
>
> |
- | previewUri | string \| PixelMap8+ \|[Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
+ | src | string | No | - | Path of the video source. |
+ | currentProgressRate | number \| PlaybackSpeed8+ | No | 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | Video playback speed.
>  **NOTE**
> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.
>
> |
+ | previewUri | string \| PixelMap8+ \|[Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No | - | Controller. |
- PlaybackSpeed8+
| Name | Description |
| -------- | -------- |
- | Speed_Forward_0_75_X | 0.75x playback speed. |
- | Speed_Forward_1_00_X | 1x playback speed. |
- | Speed_Forward_1_25_X | 1.25x playback speed. |
- | Speed_Forward_1_75_X | 1.75x playback speed. |
- | Speed_Forward_2_00_X | 2x playback speed. |
+ | Speed_Forward_0_75_X | 0.75x playback speed. |
+ | Speed_Forward_1_00_X | 1x playback speed. |
+ | Speed_Forward_1_25_X | 1.25x playback speed. |
+ | Speed_Forward_1_75_X | 1.75x playback speed. |
+ | Speed_Forward_2_00_X | 2x playback speed. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| muted | boolean | false | Whether the video is muted. |
-| autoPlay | boolean | false | Whether the video is automatically played. |
-| controls | boolean | true | Whether the video playback control bar is displayed. |
-| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video display mode. |
-| loop | boolean | false | Whether a single video is played cyclically. |
+| muted | boolean | false | Whether the video is muted. |
+| autoPlay | boolean | false | Whether the video is automatically played. |
+| controls | boolean | true | Whether the video playback control bar is displayed. |
+| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video display mode. |
+| loop | boolean | false | Whether a single video is played cyclically. |
## Events
| Name | Description |
| -------- | -------- |
-| onStart() => void | Triggered when the video is played. |
-| onPause() => void | Triggered when the video playback is paused. |
-| onFinish() => void | Triggered when the video playback is finished. |
-| onError() => void | Triggered when the video playback fails. |
-| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
-| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
-| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
-| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
+| onStart() => void | Triggered when the video is played. |
+| onPause() => void | Triggered when the video playback is paused. |
+| onFinish() => void | Triggered when the video playback is finished. |
+| onError() => void | Triggered when the video playback fails. |
+| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
+| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
+| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
+| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
### VideoController
->  **NOTE：**
+>  **NOTE**
> A **VideoController** object can control one or more videos.
| Name | Description |
| -------- | -------- |
-| start() : void | Starts playback. |
-| pause() : void | Pauses playback. |
-| stop() : void | Stops playback. |
-| setCurrentTime(value: number) | Sets the video playback position. |
-| setCurrentTime(value: number, seekMode: SeekMode)8+ | Sets the video playback position with the specified seek mode. |
+| start() : void | Starts playback. |
+| pause() : void | Pauses playback. |
+| stop() : void | Stops playback. |
+| setCurrentTime(value: number) | Sets the video playback position. |
+| setCurrentTime(value: number, seekMode: SeekMode)8+ | Sets the video playback position with the specified seek mode. |
- SeekMode8+
| Name | Description |
| -------- | -------- |
- | PreviousKeyframe | Seeks to the nearest previous keyframe. |
- | NextKeyframe | Seeks to the nearest next keyframe. |
- | ClosestKeyframe | Seeks to the nearest keyframe. |
- | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
+ | PreviousKeyframe | Seeks to the nearest previous keyframe. |
+ | NextKeyframe | Seeks to the nearest next keyframe. |
+ | ClosestKeyframe | Seeks to the nearest keyframe. |
+ | Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
index 8140b6010e17a2c3e5a271bfbb45778933b3fed2..c8a310087b939df95ab07c2c26cd9b447d53e1b0 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
@@ -1,7 +1,7 @@
# Action Sheet
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -20,24 +20,24 @@ show(options: { paramObject1})
Defines and shows the action sheet.
- paramObject1 parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | title | string \|[Resource](../../ui/ts-types.md#resource) | No | None | Title of the dialog box. |
- | message | string \|[Resource](../../ui/ts-types.md#resource) | | | 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),
action: () => void
} | number | string | Text content of the confirm button and callback upon button clicking.
**value**: button text.
**action**: callback upon button clicking. |
- | 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)
} | No | - | Offset of the dialog box relative to the alignment position. |
- | sheets | Array<SheetInfo> | Yes | - | Options in the dialog box. Each option supports the image, text, and callback. |
+ | title | string \|[Resource](../../ui/ts-types.md#resource) | No | None | Title of the dialog box. |
+ | message | string \|[Resource](../../ui/ts-types.md#resource) | | | 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),
action: () => void
} | number | string | Text content of the confirm button and callback upon button clicking.
**value**: button text.
**action**: callback upon button clicking. |
+ | 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)
} | No | - | Offset of the dialog box relative to the alignment position. |
+ | sheets | Array<SheetInfo> | Yes | - | Options in the dialog box. Each option supports the image, text, and callback. |
- SheetInfo parameters
| | | | | |
| -------- | -------- | -------- | -------- | -------- |
- | Name | Type | Mandatory | Default Value | Description |
- | title | string | Yes | - | Sheet text. |
- | icon | string | No | None | Sheet icon. |
- | action | ()=>void | Yes | - | Callback when the sheet is selected. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | title | string | Yes | - | Sheet text. |
+ | icon | string | No | None | Sheet icon. |
+ | action | ()=>void | Yes | - | Callback when the sheet is selected. |
## Example
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 fd9f05f595923840ffb8cdc47b398e795919bb65..c8d6a77bf8fb48729908106e40c5693daf6ab849 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,7 +1,7 @@
# Alert Dialog Box
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -10,34 +10,34 @@ You can set the text content and response callback for an alert dialog box.
## 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 **<AlertDialog>** component. |
- paramObject1 parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | 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. |
- | 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. |
- | 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. |
- | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
+ | 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. |
+ | 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. |
+ | 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. |
+ | 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. |
- | 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. |
- | 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. |
- | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
+ | 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. |
+ | 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. |
+ | 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. |
+ | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
index 85d09336c4b500251fc8226a99e1ae7e1bc4f391..d4585e9691bfbe8d1ec34c0e8643a30ef9b27f67 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
@@ -1,7 +1,7 @@
# Custom Dialog Box
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -14,28 +14,28 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | builder | [CustomDialog](../../ui/ ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. |
- | cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay exits. |
- | autoCancel | boolean | No | true | Whether to allow users to click the overlay to exit. |
- | 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. |
- | customStyle | boolean | No | false | Whether the style of the dialog box is customized. |
+ | builder | [CustomDialog](../../ui/ ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. |
+ | cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay exits. |
+ | autoCancel | boolean | No | true | Whether to allow users to click the overlay to exit. |
+ | 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. |
+ | customStyle | boolean | No | false | Whether the style of the dialog box is customized. |
- DialogAlignment enums
| Name | Description |
| -------- | -------- |
- | Top | Aligns vertically to the top. |
- | Center | Aligns vertically to the middle. |
- | Bottom | Aligns vertically to the bottom. |
- | Default | Default alignment. |
- | TopStart8+ | Top left alignment. |
- | TopEnd8+ | Top right alignment. |
- | CenterStart8+ | Center left alignment. |
- | CenterEnd8+ | Center right alignment. |
- | BottomStart8+ | Bottom left alignment. |
- | BottomEnd8+ | Bottom right alignment. |
+ | Top | Aligns vertically to the top. |
+ | Center | Aligns vertically to the middle. |
+ | Bottom | Aligns vertically to the bottom. |
+ | Default | Default alignment. |
+ | TopStart8+ | Top left alignment. |
+ | TopEnd8+ | Top right alignment. |
+ | CenterStart8+ | Center left alignment. |
+ | CenterEnd8+ | Center right alignment. |
+ | BottomStart8+ | Bottom left alignment. |
+ | BottomEnd8+ | Bottom right alignment. |
### CustomDialogController
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md b/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md
index a76ad367d5750f57dc08dfeefec29d0b70b22423..e5f20cef2cae60690a45a4d796bdaa8a4ebbb4a4 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md
@@ -1,7 +1,7 @@
# Image Cache
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -26,7 +26,7 @@ setImageCacheCount(value: number): void
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | value | number | Yes | Number of decoded images that are cached in the memory. |
+ | value | number | Yes | Number of decoded images that are cached in the memory. |
- Example
@@ -55,7 +55,7 @@ Sets the maximum size (in bytes) of the image data cached in the memory before d
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | value | number | Yes | Size of the image data cached before decoding, in bytes. |
+ | value | number | Yes | Size of the image data cached before decoding, in bytes. |
- Example
@@ -84,7 +84,7 @@ Sets the maximum size of the image file cache (in bytes) to speed up the loading
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
- | value | number | Yes | Size of the image file cache, in bytes. |
+ | value | number | Yes | Size of the image file cache, in bytes. |
- Example
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-media-query.md b/en/application-dev/reference/arkui-ts/ts-methods-media-query.md
deleted file mode 100644
index 1f7e1e91bc03a267030aae252f9045e8841283ab..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-methods-media-query.md
+++ /dev/null
@@ -1,150 +0,0 @@
-# Media Query
-
-
->  **NOTE：**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Modules to Import
-
-
-```
-import mediaquery from '@ohos.mediaquery'
-```
-
-
-## Required Permissions
-
-None
-
-
-## mediaquery.matchMediaSync
-
-matchMediaSync(condition: string): MediaQueryListener
-
-Sets the media query criteria and returns the corresponding listening handle.
-
-- Parameters
- | Name | Type | Mandatory | Description |
- | -------- | -------- | -------- | -------- |
- | condition | string | Yes | Matching condition of a media event. |
-
-- Return values
- | Type | Description |
- | -------- | -------- |
- | MediaQueryListener | Listening handle to a media event, which is used to register or unregister the listening callback. |
-
-- Example
-
- ```
- listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen to landscape events.
- ```
-
-
-## MediaQueryListener
-
-Media query handle, including the first query result when the handle is applied for.
-
-
-### Attributes
-
- | Name | Type | Readable | Writable | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| matches | boolean | Yes | No | Whether the match condition is met. |
-| media | string | Yes | No | Matching condition of a media event. |
-
-
-### on
-
-on(type: 'change', callback: Callback<MediaQueryResult>): void
-
-Registers a callback with the corresponding query condition by using the handle. This callback is triggered when the media attributes change.
-
-- Parameters
- | Name | Type | Mandatory | Description |
- | -------- | -------- | -------- | -------- |
- | type | string | Yes | Must enter the string **change**. |
- | callback | Callback<MediaQueryResult> | Yes | Callback registered with media query. |
-
-- Example
- For details, see the [off example](#off).
-
-
-### off
-
-off(type: 'change', callback?: Callback<MediaQueryResult>): void
-
- Unregisters a callback with the corresponding query condition by using the handle, so that no callback is triggered when the media attributes change.
-- Parameters
- | Name | Type | Mandatory | Description |
- | -------- | -------- | -------- | -------- |
- | type | boolean | Yes | Must enter the string **change**. |
- | callback | Callback<MediaQueryResult> | No | Callback to be unregistered. If the default value is used, all callbacks of the handle are unregistered. |
-
-- Example
-
- ```
- listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listens to landscape events.
- onPortrait(mediaQueryResult) {
- if (mediaQueryResult.matches) {
- // do something here
- } else {
- // do something here
- }
- }
- listener.on('change', onPortrait) // Register a callback.
- listener.off('change', onPortrait) // Unregister a callback.
- ```
-
-
-## MediaQueryResult
-
-
-### Attributes
-
- | Name | Type | Readable | Writable | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| matches | boolean | Yes | No | Whether the match condition is met. |
-| media | string | Yes | No | Matching condition of a media event. |
-
-
-### Example
-
-
-```
-import mediaquery from '@ohos.mediaquery'
-
-let portraitFunc = null
-
-@Entry
-@Component
-struct MediaQueryExample {
- @State color: string = '#DB7093'
- @State text: string = 'Portrait'
- listener = mediaquery.matchMediaSync('(orientation: landscape)')
-
- onPortrait(mediaQueryResult) {
- if (mediaQueryResult.matches) {
- this.color = '#FFD700'
- this.text = 'Landscape'
- } else {
- this.color = '#DB7093'
- this.text = 'Portrait'
- }
- }
-
- aboutToAppear() {
- portraitFunc = this.onPortrait.bind(this) //bind current js instance
- this.listener.on('change', portraitFunc)
- }
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Text(this.text).fontSize(24).fontColor(this.color)
- }
- .width('100%').height('100%')
- }
-}
-```
-
-
diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
index ec0b7d8d9bf3845532644f36ea0ef4af41632816..0293a61a861421aeb80118dbb63c6d34c9ce3058 100644
--- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
@@ -1,7 +1,7 @@
# Motion Path Animation
->  **NOTE：**
+>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -10,9 +10,9 @@ The attributes described in this topic are used to set the motion path of the co
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
>  **NOTE：**
> In a path, **start** and **end** can be used to replace the start point and end point. Example:
>
> 'Mstart.x start.y L50 50 Lend.x end.y Z' | {
"",
0.0,
1.0,
false
} | Motion path of the component. The input parameters are described as follows:
- **path**: motion path of the translation animation. The **svg** path string is used.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. |
+| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
>  **NOTE**
> In a path, **start** and **end** can be used to replace the start point and end point. Example:
>
> 'Mstart.x start.y L50 50 Lend.x end.y Z' | {
"",
0.0,
1.0,
false
} | Motion path of the component. The input parameters are described as follows:
- **path**: motion path of the translation animation. The **svg** path string is used.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 1e133ff6887fc17339b79d54532053c582d5e5ec..7cdd1c5d4a50505cbdc27ce0292c95b853e04566 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1,7 +1,7 @@
# OffscreenCanvasRenderingConxt2D
->  **NOTE：**
+>  **NOTE**
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,37 +13,37 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text o
OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | width | number | Yes | - | Width of the offscreen canvas. |
- | height | number | Yes | - | Height of the offscreen canvas. |
- | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
+ | width | number | Yes | - | Width of the offscreen canvas. |
+ | height | number | Yes | - | Height of the offscreen canvas. |
+ | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineWidth](#linewidth) | number | - | Line width. |
-| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
-| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
-| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
-| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: specifies the font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
-| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
>  **NOTE：**
> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. |
-| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
-| [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
-| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
-| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
-| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
-| [shadowColor](#shadowcolor) | <color> | - | Shadow color. |
-| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
-| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
-| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
-
->  **NOTE：**
+| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
+| [lineWidth](#linewidth) | number | - | Line width. |
+| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
+| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
+| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
+| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
+| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: specifies the font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
+| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
>  **NOTE**
> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. |
+| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
+| [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
+| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
+| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
+| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
+| [shadowColor](#shadowcolor) | <color> | - | Shadow color. |
+| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
+| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
+| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
+
+>  **NOTE**
> The value of the **<color>** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
@@ -464,17 +464,17 @@ struct LineDashOffset {
| Name | Description |
| -------- | -------- |
-| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
-| source-atop | Displays the new drawing on the top of the existing drawing. |
-| source-in | Displays the new drawing inside the existing drawing. |
-| source-out | Displays the part of the new drawing that is outside of the existing drawing. |
-| destination-over | Displays the existing drawing above the new drawing. |
-| destination-atop | Displays the existing drawing on the top of the new drawing. |
-| destination-in | Displays the existing drawing inside the new drawing. |
-| destination-out | Displays the part of the existing drawing that is outside of the new drawing. |
-| lighter | Displays both the new drawing and the existing drawing. |
-| copy | Displays the new drawing and neglects the existing drawing. |
-| xor | Combines the new drawing and existing drawing using the XOR operation. |
+| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
+| source-atop | Displays the new drawing on the top of the existing drawing. |
+| source-in | Displays the new drawing inside the existing drawing. |
+| source-out | Displays the part of the new drawing that is outside of the existing drawing. |
+| destination-over | Displays the existing drawing above the new drawing. |
+| destination-atop | Displays the existing drawing on the top of the new drawing. |
+| destination-in | Displays the existing drawing inside the new drawing. |
+| destination-out | Displays the part of the existing drawing that is outside of the new drawing. |
+| lighter | Displays both the new drawing and the existing drawing. |
+| copy | Displays the new drawing and neglects the existing drawing. |
+| xor | Combines the new drawing and existing drawing using the XOR operation. |
```
@@ -702,12 +702,12 @@ fillRect(x: number, y: number, w: number, h: number): void
Fills a rectangle on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -747,12 +747,12 @@ strokeRect(x: number, y: number, w: number, h: number): void
Draws an outlined rectangle on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -791,12 +791,12 @@ clearRect(x: number, y: number, w: number, h: number): void
Clears the content in a rectangle on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -837,11 +837,11 @@ fillText(text: string, x: number, y: number): void
Draws filled text on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | text | string | Yes | "" | Text to draw. |
- | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
- | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
+ | text | string | Yes | "" | Text to draw. |
+ | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
+ | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
- Example
@@ -881,11 +881,11 @@ strokeText(text: string, x: number, y: number): void
Draws a text stroke on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | text | string | Yes | "" | Text to draw. |
- | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
- | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
+ | text | string | Yes | "" | Text to draw. |
+ | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
+ | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
- Example
@@ -925,19 +925,19 @@ measureText(text: string): TextMetrics
Returns a **TextMetrics** object used to obtain the width of specified text.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | text | string | Yes | "" | Text to be measured. |
+ | text | string | Yes | "" | Text to be measured. |
- Return value
| Type | Description |
| -------- | -------- |
- | [ERROR:Invalid link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref4588645104013,link:#en-us_topic_0000001192595178_li0376175812415](#en-us_topic_0000001192595178_li0376175812415) | **TextMetrics** object. |
+ | [ERROR:Invalid link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref4588645104013,link:#en-us_topic_0000001192595178_li0376175812415](#en-us_topic_0000001192595178_li0376175812415) | **TextMetrics** object. |
- **TextMetrics** attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | width | number | Width of the text. |
+ | width | number | Width of the text. |
- Example
@@ -978,9 +978,9 @@ stroke(path?: Path2D): void
Strokes a path.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
+ | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
- Example
@@ -1063,10 +1063,10 @@ moveTo(x: number, y: number): void
Moves a drawing path to a target position on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the target position. |
- | y | number | Yes | 0 | Y-coordinate of the target position. |
+ | x | number | Yes | 0 | X-coordinate of the target position. |
+ | y | number | Yes | 0 | Y-coordinate of the target position. |
- Example
@@ -1108,10 +1108,10 @@ lineTo(x: number, y: number): void
Connects the current point to a target position using a straight line.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the target position. |
- | y | number | Yes | 0 | Y-coordinate of the target position. |
+ | x | number | Yes | 0 | X-coordinate of the target position. |
+ | y | number | Yes | 0 | Y-coordinate of the target position. |
- Example
@@ -1194,10 +1194,10 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
Creates a pattern for image filling based on a specified source image and repetition mode.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | image | [ERROR:Invalid link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref1892917323814,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Source image. For details, see [ERROR:Invalid link:en-us_topic_0000001212218420.xml#xref13437192515430,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
- | repetition | string | Yes | "" | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
+ | image | [ERROR:Invalid link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref1892917323814,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Source image. For details, see [ERROR:Invalid link:en-us_topic_0000001212218420.xml#xref13437192515430,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
+ | repetition | string | Yes | "" | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
- Example
@@ -1239,14 +1239,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas.
- Name
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
- | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
- | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
- | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
- | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
- | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+ | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
+ | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
+ | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
+ | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
+ | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
+ | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
@@ -1288,12 +1288,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
- | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
- | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
- | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+ | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
+ | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
+ | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
+ | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
@@ -1335,14 +1335,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
- | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
- | radius | number | Yes | 0 | Radius of the arc. |
- | startAngle | number | Yes | 0 | Start radian of the arc. |
- | endAngle | number | Yes | 0 | End radian of the arc. |
- | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
+ | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
+ | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
+ | radius | number | Yes | 0 | Radius of the arc. |
+ | startAngle | number | Yes | 0 | Start radian of the arc. |
+ | endAngle | number | Yes | 0 | End radian of the arc. |
+ | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
- Example
@@ -1383,13 +1383,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
- | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
- | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
- | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
- | radius | number | Yes | 0 | Radius of the arc. |
+ | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
+ | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
+ | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
+ | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
+ | radius | number | Yes | 0 | Radius of the arc. |
- Example
@@ -1430,16 +1430,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the ellipse center. |
- | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
- | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
- | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
- | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
- | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
- | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
- | anticlockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
+ | x | number | Yes | 0 | X-coordinate of the ellipse center. |
+ | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
+ | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
+ | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
+ | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
+ | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
+ | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
+ | anticlockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
- Example
@@ -1481,12 +1481,12 @@ rect(x: number, y: number, width: number, height: number): void
Creates a rectangle.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
- | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
- | width | number | Yes | 0 | Width of the rectangle. |
- | height | number | Yes | 0 | Height of the rectangle. |
+ | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
+ | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
+ | width | number | Yes | 0 | Width of the rectangle. |
+ | height | number | Yes | 0 | Height of the rectangle. |
- Example
@@ -1603,9 +1603,9 @@ rotate(rotate: number): void
Rotates a canvas clockwise around its coordinate axes.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
+ | rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
- Example
@@ -1645,10 +1645,10 @@ scale(x: number, y: number): void
Scales a canvas based on scale factors.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | Horizontal scale factor. |
- | y | number | Yes | 0 | Vertical scale factor. |
+ | x | number | Yes | 0 | Horizontal scale factor. |
+ | y | number | Yes | 0 | Vertical scale factor. |
- Example
@@ -1688,7 +1688,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
->  **NOTE：**
+>  **NOTE**
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
> - x' = scaleX \* x + skewY \* y + translateX
@@ -1696,14 +1696,14 @@ Defines a transformation matrix. To transform a graph, you only need to set para
> - y' = skewX \* x + scaleY \* y + translateY
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | scaleX | number | Yes | 0 | X-axis scale. |
- | skewX | number | Yes | 0 | X-axis skew. |
- | skewY | number | Yes | 0 | Y-axis skew. |
- | scaleY | number | Yes | 0 | Y-axis scale. |
- | translateX | number | Yes | 0 | X-axis translation. |
- | translateY | number | Yes | 0 | Y-axis translation. |
+ | scaleX | number | Yes | 0 | X-axis scale. |
+ | skewX | number | Yes | 0 | X-axis skew. |
+ | skewY | number | Yes | 0 | Y-axis skew. |
+ | scaleY | number | Yes | 0 | Y-axis scale. |
+ | translateX | number | Yes | 0 | X-axis translation. |
+ | translateY | number | Yes | 0 | Y-axis translation. |
- Example
@@ -1749,14 +1749,14 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | scaleX | number | Yes | 0 | X-axis scale. |
- | skewX | number | Yes | 0 | X-axis skew. |
- | skewY | number | Yes | 0 | Y-axis skew. |
- | scaleY | number | Yes | 0 | Y-axis scale. |
- | translateX | number | Yes | 0 | X-axis translation. |
- | translateY | number | Yes | 0 | Y-axis translation. |
+ | scaleX | number | Yes | 0 | X-axis scale. |
+ | skewX | number | Yes | 0 | X-axis skew. |
+ | skewY | number | Yes | 0 | Y-axis skew. |
+ | scaleY | number | Yes | 0 | Y-axis scale. |
+ | translateX | number | Yes | 0 | X-axis translation. |
+ | translateY | number | Yes | 0 | Y-axis translation. |
- Example
@@ -1799,10 +1799,10 @@ translate(x: number, y: number): void
Moves the origin of the coordinate system.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | number | Yes | 0 | X-axis translation. |
- | y | number | Yes | 0 | Y-axis translation. |
+ | x | number | Yes | 0 | X-axis translation. |
+ | y | number | Yes | 0 | Y-axis translation. |
- Example
@@ -1847,17 +1847,17 @@ drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: n
Draws an image.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | image | [ERROR:Invalid link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref2365443135017,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Image resource. For details, see [ERROR:Invalid link:en-us_topic_0000001212218420.xml#xref10476113612499,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
- | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
- | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
- | sWidth | number | No | 0 | Target width to crop the source image. |
- | sHeight | number | No | 0 | Target height to crop the source image. |
- | dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. |
- | dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. |
- | dWidth | number | No | 0 | Width of the drawing area. |
- | dHeight | number | No | 0 | Height of the drawing area. |
+ | image | [ERROR:Invalid link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref2365443135017,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Image resource. For details, see [ERROR:Invalid link:en-us_topic_0000001212218420.xml#xref10476113612499,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). |
+ | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
+ | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
+ | sWidth | number | No | 0 | Target width to crop the source image. |
+ | sHeight | number | No | 0 | Target height to crop the source image. |
+ | dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. |
+ | dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. |
+ | dWidth | number | No | 0 | Width of the drawing area. |
+ | dHeight | number | No | 0 | Height of the drawing area. |
- Example
@@ -1898,10 +1898,10 @@ createImageData(width: number, height: number): Object
Creates an **ImageData** object based on the specified width and height. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | width | number | Yes | 0 | Width of the **ImageData** object. |
- | height | number | Yes | 0 | Height of the **ImageData** object. |
+ | width | number | Yes | 0 | Width of the **ImageData** object. |
+ | height | number | Yes | 0 | Height of the **ImageData** object. |
### createImageData
@@ -1911,9 +1911,9 @@ createImageData(imageData: ImageData): Object
Creates an **ImageData** object by copying an existing **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | imagedata | [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object to copy. |
+ | imagedata | [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object to copy. |
### getImageData
@@ -1923,12 +1923,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
Creates an [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
- | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
- | sw | number | Yes | 0 | Width of the output area. |
- | sh | number | Yes | 0 | Height of the output area. |
+ | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
+ | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
+ | sw | number | Yes | 0 | Width of the output area. |
+ | sh | number | Yes | 0 | Height of the output area. |
### putImageData
@@ -1938,15 +1938,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
Puts the [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. |
- | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
- | dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
- | dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
- | dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
- | dirtyWidth | number | No | Width of the **ImageData** object | Width of the rectangular area to crop the source image. |
- | dirtyHeight | number | No | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
+ | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. |
+ | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
+ | dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
+ | dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
+ | dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
+ | dirtyWidth | number | No | Width of the **ImageData** object | Width of the rectangular area to crop the source image. |
+ | dirtyHeight | number | No | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
- Example
@@ -2060,12 +2060,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
Creates a linear gradient.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x0 | number | Yes | 0 | X-coordinate of the start point. |
- | y0 | number | Yes | 0 | Y-coordinate of the start point. |
- | x1 | number | Yes | 0 | X-coordinate of the end point. |
- | y1 | number | Yes | 0 | Y-coordinate of the end point. |
+ | x0 | number | Yes | 0 | X-coordinate of the start point. |
+ | y0 | number | Yes | 0 | Y-coordinate of the start point. |
+ | x1 | number | Yes | 0 | X-coordinate of the end point. |
+ | y1 | number | Yes | 0 | Y-coordinate of the end point. |
- Example
@@ -2110,14 +2110,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
Creates a linear gradient.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. |
- | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. |
- | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number. |
- | x1 | number | Yes | 0 | X-coordinate of the center of the end circle. |
- | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
- | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number. |
+ | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. |
+ | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. |
+ | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number. |
+ | x1 | number | Yes | 0 | X-coordinate of the center of the end circle. |
+ | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
+ | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number. |
- Example
diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
index 8d3972d2b697cdb68ff25ad1ae031916b729cfb7..d1994283b68175de9c564c9cae284448cb2ed9ad 100644
--- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
@@ -1,7 +1,7 @@
# Page Transition
->  **NOTE：**
+>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -10,44 +10,44 @@ Customize the page transition animations by configuring the page entrance and ex
| Name | Parameter | Description |
| -------- | -------- | -------- |
-| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
-| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
+| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
+| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
- Animation parameters
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
- | type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
- | duration | number | 1000 | No | Animation duration, in ms. |
- | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
- | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
+ | type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
+ | duration | number | 1000 | No | Animation duration, in ms. |
+ | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
+ | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
- RouteType enums
| Name | Description |
| -------- | -------- |
- | Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. |
- | Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. |
+ | Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. |
+ | Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. |
## Attributes
The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes:
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
-| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see the description of [ERROR:Invalid link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). |
-| translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
-| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
-| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
+| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see the description of [ERROR:Invalid link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). |
+| translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
+| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
+| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums
| Name | Description |
| -------- | -------- |
- | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
- | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
- | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
- | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. |
+ | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
+ | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
+ | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
+ | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. |
## Events
@@ -56,8 +56,8 @@ The PageTransitionEnter and PageTransitionExit components support the following
| Event | Description |
| -------- | -------- |
-| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
-| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
+| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
+| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
index 7524c4fa4c0bdf5322c78c996053f726a8e4d298..ddc5ffc7a177b41595c6207c5f37b7dbd2ccde0a 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
@@ -1,7 +1,7 @@
# Component Transition
->  **NOTE：**
+>  **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -10,25 +10,25 @@ Configure the component transition animations for when a component is inserted o
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| transition | Object | - | All parameters are optional. For details, see **transition** parameters. |
+| transition | Object | - | All parameters are optional. For details, see **transition** parameters. |
- transition parameters
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
- | type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.
>  **NOTE：**
> If **type** is not specified, insertion and deletion use the same transition type. |
- | opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- | translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- | rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
+ | type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.
>  **NOTE**
> If **type** is not specified, insertion and deletion use the same transition type. |
+ | opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
+ | translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
+ | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
+ | rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- TransitionType enums
| Name | Description |
| -------- | -------- |
- | All | The transition takes effect in all scenarios. |
- | Insert | The transition takes effect when a component is inserted. |
- | Delete | The transition takes effect when a component is deleted. |
+ | All | The transition takes effect in all scenarios. |
+ | Insert | The transition takes effect when a component is inserted. |
+ | Delete | The transition takes effect when a component is deleted. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
index 41bb952be72928cd57adde58417f3274d4820336..ce8b999dee711ca5a0b36695c1fed166e41529ab 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
@@ -1,7 +1,7 @@
# Transition of Shared Elements
->  **NOTE：**
+>  **NOTE**
> This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -10,16 +10,16 @@ Shared element transition can be used for transition between pages, for example,
## Type
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| sharedTransition | id: string,
options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. |
+| sharedTransition | id: string,
options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. |
- options parameters
- | Name | Type | Default Value | Mandatory | Description |
+ | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
- | duration | number | 1000 | No | Animation duration, in ms. The default duration is 1000 ms. |
- | curve | Curve \| Curves | Linear | No | The default curve is linear. For details about the valid values, see **Curve enums**. |
- | delay | number | 0 | No | Delay of animation playback, in ms. By default, the playback is not delayed. |
+ | duration | number | 1000 | No | Animation duration, in ms. The default duration is 1000 ms. |
+ | curve | Curve \| Curves | Linear | No | The default curve is linear. For details about the valid values, see **Curve enums**. |
+ | delay | number | 0 | No | Delay of animation playback, in ms. By default, the playback is not delayed. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
index 41959f374b15727d0a94c46856b63d25e49c29dc..160187ab4a3dfce60d7284b42692f6946e488de6 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
@@ -1,7 +1,7 @@
# Background
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,20 +16,20 @@ None
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| backgroundColor | Color | - | Background color of a component. |
-| backgroundImage | src: string,
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)
**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
-| backgroundImageSize | {
width?: Length,
height?: Length
} \| ImageSize | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
-| backgroundImagePosition | {
x?: Length,
y?: Length
} \| [Alignment](ts-appendix-enums.md#alignment-enums) | {
x: 0,
y: 0
} | Position of the background image in the component. |
+| backgroundColor | Color | - | Background color of a component. |
+| backgroundImage | src: string,
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)
**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
+| backgroundImageSize | {
width?: Length,
height?: Length
} \| ImageSize | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
+| backgroundImagePosition | {
x?: Length,
y?: Length
} \| [Alignment](ts-appendix-enums.md#alignment-enums) | {
x: 0,
y: 0
} | Position of the background image in the component. |
- ImageSize enums
| Name | Description |
| -------- | -------- |
- | Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. |
- | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
- | Auto | The original image aspect ratio is retained. |
+ | Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. |
+ | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
+ | Auto | The original image aspect ratio is retained. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
index 84561f7671decc24f8d4a8e81d02c705762cc275..bd6bf94083d3c8fdf3158db736c2493f394faaa5 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
@@ -1,7 +1,7 @@
# Border
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,21 +16,21 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| border | {
width?: Length,
color?: Color,
radius?: Length,
style?: BorderStyle
} | - | Sets a unified border style. |
-| borderStyle | BorderStyle | BorderStyle.Solid | Sets the border style of an element. |
-| borderWidth | Length | 0 | Sets the border width of an element. |
-| borderColor | Color | - | Sets the border color of an element. |
-| borderRadius | Length | 0 | Sets the border radius of an element. |
+| border | {
width?: Length,
color?: Color,
radius?: Length,
style?: BorderStyle
} | - | Sets a unified border style. |
+| borderStyle | BorderStyle | BorderStyle.Solid | Sets the border style of an element. |
+| borderWidth | Length | 0 | Sets the border width of an element. |
+| borderColor | Color | - | Sets the border color of an element. |
+| borderRadius | Length | 0 | Sets the border radius of an element. |
- BorderStyle enums
| Name | Description |
| -------- | -------- |
- | Dotted | Dotted border. The radius of a dot is half of **borderWidth**. |
- | Dashed | Dashed border. |
- | Solid | Solid border. |
+ | Dotted | Dotted border. The radius of a dot is half of **borderWidth**. |
+ | Dashed | Dashed border. |
+ | Solid | Solid border. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
index 1679db73148f51450f2c1687d0521b46712f8b5c..dfdd81c8275ad9c5ddebf9aeec2626c7959d5402 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
@@ -1,7 +1,7 @@
# Click Control
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ None
## Attributes
- | **Name** | **Type** | **Default Value** | **Description** |
+ | **Name** | **Type** | **Default Value** | **Description** |
| -------- | -------- | -------- | -------- |
-| touchable | boolean | true | Whether the current component is touchable. |
+| touchable | boolean | true | Whether the current component is touchable. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
index 8fe23854906a4709f817060b8667c3c7131d22ce..4e27ab2eb1aaf983c0128787925377339d67ad3e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
@@ -1,7 +1,7 @@
# Component ID
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,9 +12,9 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| id | string | '' | Unique ID of the component. The uniqueness is ensured by the user. |
+| id | string | '' | Unique ID of the component. The uniqueness is ensured by the user. |
## APIs
@@ -27,14 +27,14 @@ getInspectorByKey(id: string): string
Obtains all attributes of the component with the specified ID, excluding the information about child components.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | id | string | Yes | - | ID of the component whose attributes are to be obtained. |
+ | id | string | Yes | - | ID of the component whose attributes are to be obtained. |
- Return value
| Type | Description |
| -------- | -------- |
- | string | JSON string of the component attribute list. |
+ | string | JSON string of the component attribute list. |
### sendEventByKey
@@ -44,16 +44,16 @@ sendEventByKey(id: string, action: number, params: string): boolean
Sends an event to the component with the specified ID.
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | id | string | Yes | - | ID of the component for which the event is to be sent. |
- | action | number | Yes | - | Type of the event to be sent. The options are as follows:
- Click event: 10.
- LongClick: 11. |
- | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. |
+ | id | string | Yes | - | ID of the component for which the event is to be sent. |
+ | action | number | Yes | - | Type of the event to be sent. The options are as follows:
- Click event: 10.
- LongClick: 11. |
+ | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. |
- Return value
| Type | Description |
| -------- | -------- |
- | boolean | Returns **false** if the component with the specified ID cannot be found; returns **true** otherwise. |
+ | boolean | Returns **false** if the component with the specified ID cannot be found; returns **true** otherwise. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
index 1c2ccdfc0895dada913069589f3a27d0c8822ef1..cce050ef1b447147c5c06ff1df66c47ff35de41a 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
@@ -1,7 +1,7 @@
# Enable/Disable
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| enabled | boolean | true | The value **true** means that the component is available and can respond to operations such as clicking. The value **false** means that the component does not respond to operations such as clicking. |
+| enabled | boolean | true | The value **true** means that the component is available and can respond to operations such as clicking. The value **false** means that the component does not respond to operations such as clicking. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index eaa92f882dfcce0c50c276b907fcb246bc87e4c7..42a4bcbbe80e782cc0151bfd237cf4bf35fd184e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -1,7 +1,7 @@
# Flex Layout
->  **NOTE：**
+>  **NOTE**
> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - This attribute is valid only when the parent component is a **Flex** component.
@@ -15,12 +15,12 @@ None
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| flexBasis | 'auto' \| Length | 'auto' | Base dimension of a component in the main axis of the **Flex** layout. |
-| flexGrow | number | 0 | Percentage of the **Flex** layout's remaining space that is allocated to the component. |
-| flexShrink | number | 1 | Percentage of the **Flex** layout's shrink size that is allocated to the component. |
-| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | Auto | Alignment mode, which overwrites the default **alignItems** configuration in the **Flex** layout. |
+| flexBasis | 'auto' \| Length | 'auto' | Base dimension of a component in the main axis of the **Flex** layout. |
+| flexGrow | number | 0 | Percentage of the **Flex** layout's remaining space that is allocated to the component. |
+| flexShrink | number | 1 | Percentage of the **Flex** layout's shrink size that is allocated to the component. |
+| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | Auto | Alignment mode, which overwrites the default **alignItems** configuration in the **Flex** layout. |
## Example
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 9f3e2481f97d4d40e7f65d106cb245a0a2d68f0f..6af105effec7f96f654d2a3acbb31cbb3017eead 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
@@ -1,7 +1,7 @@
# Focus Control
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,11 +12,11 @@ None
## Attributes
- | **Name** | **Type** | **Default Value** | **Description** |
+ | **Name** | **Type** | **Default Value** | **Description** |
| -------- | -------- | -------- | -------- |
-| focusable | boolean | false | Whether the current component is focusable. |
+| focusable | boolean | false | Whether the current component is focusable. |
->  **NOTE：**
+>  **NOTE**
> The following components support focus control: **<Button>**, **<Text>**, **<Image>**, **<List>**, and **<Grid>**.
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
index dace1744afc31a70ef38060e1c56e514198459c9..abba7c987d32cb45c0fe1513c0d8adeb02a7cc33 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
@@ -1,7 +1,7 @@
# Gradient Color
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,11 +13,11 @@ None
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| linearGradient | {
angle?: [Angle](../../ui/ts-types.md),
direction?:GradientDirection,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Linear gradient.
**angle**: angle of the linear gradient.
**direction**: direction of the linear gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. |
-| sweepGradient | {
center: Point,
start?: angle,
end?: angle,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Angle gradient.
**center**: center point of the angle gradient.
**start**: start point of the angle gradient.
**end**: end point of the angle gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. |
-| radialGradient | {
center: Point,
radius: Length,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating: boolean
} | - | Radial gradient.
**center**: center point of the radial gradient.
**radius**: radius of the radial gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. |
+| linearGradient | {
angle?: [Angle](../../ui/ts-types.md),
direction?:GradientDirection,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Linear gradient.
**angle**: angle of the linear gradient.
**direction**: direction of the linear gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. |
+| sweepGradient | {
center: Point,
start?: angle,
end?: angle,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Angle gradient.
**center**: center point of the angle gradient.
**start**: start point of the angle gradient.
**end**: end point of the angle gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. |
+| radialGradient | {
center: Point,
radius: Length,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating: boolean
} | - | Radial gradient.
**center**: center point of the radial gradient.
**radius**: radius of the radial gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. |
- GradientDirection enums
@@ -25,15 +25,15 @@ None
| Name | Description |
| -------- | -------- |
- | Left | The gradient direction is from right to left. |
- | Top | The gradient direction is from bottom to top. |
- | Right | The gradient direction is from left to right. |
- | Bottom | The gradient direction is from top to bottom. |
- | LeftTop | The gradient direction is upper left. |
- | LeftBottom | The gradient direction is lower left. |
- | RightTop | The gradient direction is upper right. |
- | RightBottom | The gradient direction is lower right. |
- | None | No gradient. |
+ | Left | The gradient direction is from right to left. |
+ | Top | The gradient direction is from bottom to top. |
+ | Right | The gradient direction is from left to right. |
+ | Bottom | The gradient direction is from top to bottom. |
+ | LeftTop | The gradient direction is upper left. |
+ | LeftBottom | The gradient direction is lower left. |
+ | RightTop | The gradient direction is upper right. |
+ | RightBottom | The gradient direction is lower right. |
+ | None | No gradient. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
index c62278b652e26902bd50fe1e62723c1cd48a11ae..da80aedf560d47a0cad462cf4d17072a1a7eb8ec 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
@@ -1,7 +1,7 @@
# Grid
->  **NOTE：**
+>  **NOTE**
> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
@@ -15,11 +15,11 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| useSizeType | {
xs?: number \| { span: number, offset: number },
sm?: number \| { span: number, offset: number },
md?: number \| { span: number, offset: number },
lg?: number \| { span: number, offset: number }
} | - | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns.
If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.
- **xs** indicates that the device width type is **SizeType.XS**.
- **sm** indicates that the device width type is **SizeType.SM**.
- **md** indicates that the device width type is **SizeType.MD**.
- **lg** indicates that the device width type is **SizeType.LG**. |
-| gridSpan | number | 1 | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.
>  **NOTE：**
> If the **span** attribute is set, the component width is determined by the grid layout. |
-| gridOffset | number | 0 | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.
>  **NOTE：**
> 1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.
>
> 2. Offset = (Column width + Gap) x Number of columns
>
> 3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. |
+| useSizeType | {
xs?: number \| { span: number, offset: number },
sm?: number \| { span: number, offset: number },
md?: number \| { span: number, offset: number },
lg?: number \| { span: number, offset: number }
} | - | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns.
If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.
- **xs** indicates that the device width type is **SizeType.XS**.
- **sm** indicates that the device width type is **SizeType.SM**.
- **md** indicates that the device width type is **SizeType.MD**.
- **lg** indicates that the device width type is **SizeType.LG**. |
+| gridSpan | number | 1 | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.
>  **NOTE**
> If the **span** attribute is set, the component width is determined by the grid layout. |
+| gridOffset | number | 0 | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.
>  **NOTE**
> 1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.
>
> 2. Offset = (Column width + Gap) x Number of columns
>
> 3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
index 6e47ced759df2a67842ece1c9f67a4b455786df2..7c1c225962fcbda50f7277fba18bef4166a3f1e2 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
@@ -1,7 +1,7 @@
# Hover Effect
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,17 +12,17 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
+| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
- HoverEffect enums
| Name | Description |
| -------- | -------- |
- | Auto | Default hover effect. |
- | Scale | Scale effect. |
- | Board | Fade-in and fade-out effect. |
- | None | No effect. |
+ | Auto | Default hover effect. |
+ | Scale | Scale effect. |
+ | Board | Fade-in and fade-out effect. |
+ | None | No effect. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index 25e98c6ea8dd47def3c7d1cd7deaf44db3e1f4ee..c2612644a3b7391255c4e9aa9c9c0434d48f78a2 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -1,7 +1,7 @@
# Image Effect Configuration
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,19 +13,19 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
-| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
-| shadow | {
radius: number,
color?: Color,
offsetX?: number,
offsetY?: number
} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
-| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
-| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
-| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
-| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
-| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
-| colorBlend 8+ | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
-| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
-| hueRotate | Angle | 0deg | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated one ore more circles. |
+| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
+| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
+| shadow | {
radius: number,
color?: Color,
offsetX?: number,
offsetY?: number
} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
+| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
+| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
+| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
+| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
+| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
+| colorBlend 8+ | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
+| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
+| hueRotate | Angle | 0deg | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated one ore more circles. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
index 7b599ad4112cfc8f50c103b232508eaa227bad7d..e60aec3ac212bb2d1b83ec9fa3a8e07267ee9346 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
@@ -1,7 +1,7 @@
# Layout Constraints
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,10 +13,10 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| aspectRatio | number | - | Specifies an aspect ratio for the current component. |
-| displayPriority | number | - | Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.
>  **NOTE：**
> This parameter is valid only for the Row/Column/Flex (single-row) container component. |
+| aspectRatio | number | - | Specifies an aspect ratio for the current component. |
+| displayPriority | number | - | Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.
>  **NOTE**
> This parameter is valid only for the Row/Column/Flex (single-row) container component. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
index f5154e37c8765f6424c9a856a4b1b733f6c5c9f0..7ddedfd2182bcddfeb9ae7a31a8753bff2f4b7e5 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
@@ -1,7 +1,7 @@
# Location
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,21 +13,21 @@ None
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| align | [Alignment](ts-appendix-enums.md#alignment-enums) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content. |
-| direction | Direction | Auto | Horizontal layout of the component. For details about the options, see **Direction** enums. |
-| position | {
x: Length,
y: Length
} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
-| markAnchor | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset. |
-| offset | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
+| align | [Alignment](ts-appendix-enums.md#alignment-enums) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content. |
+| direction | Direction | Auto | Horizontal layout of the component. For details about the options, see **Direction** enums. |
+| position | {
x: Length,
y: Length
} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
+| markAnchor | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset. |
+| offset | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
- Direction enums
| Name | Description |
| -------- | -------- |
- | Ltr | Components are arranged from left to right. |
- | Rtl | Components are arranged from right to left. |
- | Auto | The default layout direction is used. |
+ | Ltr | Components are arranged from left to right. |
+ | Rtl | Components are arranged from right to left. |
+ | Auto | The default layout direction is used. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
index f2ddaf63cf1301dc36c792a53a1b1cdcb170d08b..aac3bbfa1f1253a491d134b607c13094ca664582 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
@@ -14,15 +14,15 @@ None
| Name| Type| Default Value | Description|
| -------- | -------- | -------- | -------- |
-| bindMenu | Array8+ | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
-| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md)
responseType: ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
+| bindMenu | Array8+ | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
+| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md)
responseType: ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
- MenuItem
| Name| Type| Description|
| -------- | -------- | -------- |
| value | string | Menu item text.|
- | action | () => void | Action triggered when a menu item is clicked.|
+ | action | () => void | Action triggered when a menu item is clicked.|
- ResponseType8+
| Value| Description|
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
index c786ef89d6bb43988a3f2039886d3ff8665e5dc9..03c5ded62399d33dbc21e73048585e98b5a937ad 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
@@ -1,7 +1,7 @@
# Opacity
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,9 +16,9 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| opacity | number | 1 | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
+| opacity | number | 1 | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
index f07ffeb31db4e19ff7af1f79c739e7a2d387378d..5ac0a48723e0adc94d18337d64591ac0328d9e62 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
@@ -1,7 +1,7 @@
# Overlay
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ None
## Attributes
-| Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| overlay | title: string,
options: {
align?: [Alignment](ts-appendix-enums.md#alignment-enums),
offset?: {x: number, y: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Mask added to the component. The mask has the same layout as the component. |
+| overlay | title: string,
options: {
align?: [Alignment](ts-appendix-enums.md#alignment-enums),
offset?: {x: number, y: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Mask added to the component. The mask has the same layout as the component. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
index 0baadc21f6c8f99d56770f692e580d74b656154f..e4ab894bb4ec9529aaec2fcdc073b8fa56132b0a 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
@@ -1,7 +1,7 @@
# Polymorphic Style
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -15,16 +15,16 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| stateStyle | StateStyles | - | Sets the styles of a component for different states. |
+| stateStyle | StateStyles | - | Sets the styles of a component for different states. |
- StateStyles8+
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | normal | ()=>void | No | - | Style of the component when stateless. |
- | pressed | ()=>void | No | - | Style of the component in the pressed state. |
- | disabled | ()=>void | No | - | Style of the component in disabled state. |
+ | normal | ()=>void | No | - | Style of the component when stateless. |
+ | pressed | ()=>void | No | - | Style of the component in the pressed state. |
+ | disabled | ()=>void | No | - | Style of the component in disabled state. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index e3e1aa2400713a3b5a58bb45ede5385ed16b9173..224ece16207a0d67c4ebdb05f55d157442271301 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -1,7 +1,7 @@
# Popup Control
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,42 +13,42 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| bindPopup | show: boolean,
popup: PopupOption \| CustomPopupOption | - | Settings of the popup bound to a component.
**show**: whether to display the popup on the creation page by default. The default value is **false**.
**popup**: parameters of the current popup. |
+| bindPopup | show: boolean,
popup: PopupOption \| CustomPopupOption | - | Settings of the popup bound to a component.
**show**: whether to display the popup on the creation page by default. The default value is **false**.
**popup**: parameters of the current popup. |
- PopupOption attributes
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | message | string | Yes | - | Content of the popup message. |
- | placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
- | primaryButton | {
value: string,
action: () => void
} | No | - | First button.
**value**: text of the primary button in the popup.
**action**: callback function for clicking the primary button. |
- | secondaryButton | {
value: string,
action: () => void
} | No | - | Second button.
**value**: text of the secondary button in the popup.
**action**: callback function for clicking the secondary button. |
- | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
+ | message | string | Yes | - | Content of the popup message. |
+ | placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
+ | primaryButton | {
value: string,
action: () => void
} | No | - | First button.
**value**: text of the primary button in the popup.
**action**: callback function for clicking the primary button. |
+ | secondaryButton | {
value: string,
action: () => void
} | No | - | Second button.
**value**: text of the secondary button in the popup.
**action**: callback function for clicking the secondary button. |
+ | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- CustomPopupOption8+
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | builder | () => any | Yes | - | Builder of the tooltip content. |
- | placement | Placement | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
- | maskColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip mask. |
- | popupColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip. |
- | enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
- | autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. |
- | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
+ | builder | () => any | Yes | - | Builder of the tooltip content. |
+ | placement | Placement | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
+ | maskColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip mask. |
+ | popupColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip. |
+ | enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
+ | autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. |
+ | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- Placement8+ enums
| Name | Description |
| -------- | -------- |
- | Left | The tooltip is on the left of the component. |
- | Right | The tooltip is on the right of the component. |
- | Top | The tooltip is on the top of the component. |
- | Bottom | The tooltip is at the bottom of the component. |
- | TopLeft | The tooltip is in the upper left corner of the component. |
- | TopRight | The tooltip is in the upper right corner of the component. |
- | BottomLeft | The tooltip is in the lower left corner of the component. |
- | BottomRight | The tooltip is in the lower right corner of the component. |
+ | Left | The tooltip is on the left of the component. |
+ | Right | The tooltip is on the right of the component. |
+ | Top | The tooltip is on the top of the component. |
+ | Bottom | The tooltip is at the bottom of the component. |
+ | TopLeft | The tooltip is in the upper left corner of the component. |
+ | TopRight | The tooltip is in the upper right corner of the component. |
+ | BottomLeft | The tooltip is in the lower left corner of the component. |
+ | BottomRight | The tooltip is in the lower right corner of the component. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index eef44b85ca3a83a5d60b78462db9b9b28061c7f8..e0468dfe5e7d39816efc9e8a6c10a08a3412321c 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -1,7 +1,7 @@
# Shape Clipping
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,10 +13,10 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| clip | Shape \| boolean | false | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline. |
-| mask | Shape | - | Adds a mask of the specified shape to the current component. |
+| clip | Shape \| boolean | false | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline. |
+| mask | Shape | - | Adds a mask of the specified shape to the current component. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
index f35376f94477923703e61ac33c9e9a6b12a10552..8b38b28aa67c95627ad2ec9e55f0626bf0e0c22d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
@@ -1,7 +1,11 @@
+
+
+
+
# Size
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,15 +17,15 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| width | Length | - | Width of a component. By default, the width required to fully hold the component content is used. |
-| height | Length | - | Height of the component. By default, the height required to fully hold the component content is used. |
-| size | {
width?: Length,
height?: Length
} | - | Height and width of the component. |
-| padding | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
} \| Length | 0 | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect. |
-| margin | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
}
\| Length | 0 | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect. |
-| constraintSize | {
minWidth?: Length,
maxWidth?: Length,
minHeight?: Length,
maxHeight?: Length
} | {
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | Constraint size of the component, which is used to limit the size range during component layout. |
-| layoutWeight | number | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.
>  **NOTE：**
> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts. |
+| width | Length | - | Width of a component. By default, the width required to fully hold the component content is used. |
+| height | Length | - | Height of the component. By default, the height required to fully hold the component content is used. |
+| size | {
width?: Length,
height?: Length
} | - | Height and width of the component. |
+| padding | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
} \| Length | 0 | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect. |
+| margin | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
}
\| Length | 0 | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect. |
+| constraintSize | {
minWidth?: Length,
maxWidth?: Length,
minHeight?: Length,
maxHeight?: Length
} | {
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | Constraint size of the component, which is used to limit the size range during component layout. |
+| layoutWeight | number | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.
>  **NOTE**
> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
index 8cfa736c145a1c1e378a90b34abd9aede4a6a5ea..a4d33eff40559e589befb6a6054dd19b922744a4 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
@@ -1,7 +1,7 @@
# Text Style
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,31 +16,31 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| fontColor | Color | - | Text color. |
-| fontSize | Length | - | Text size. If the value is of the number type, the unit fp is used. |
-| fontStyle | FontStyle | FontStyle.Normal | Font style of the text. |
-| fontWeight | number \| FontWeight | FontWeight.Normal | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.
For common values of the **FontWeight** type, see **FontWeight** enums. |
-| fontFamily | string | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
+| fontColor | Color | - | Text color. |
+| fontSize | Length | - | Text size. If the value is of the number type, the unit fp is used. |
+| fontStyle | FontStyle | FontStyle.Normal | Font style of the text. |
+| fontWeight | number \| FontWeight | FontWeight.Normal | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.
For common values of the **FontWeight** type, see **FontWeight** enums. |
+| fontFamily | string | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
- FontStyle enums
| Name | Description |
| -------- | -------- |
- | Normal | Standard font style. |
- | Italic | Italic font style. |
+ | Normal | Standard font style. |
+ | Italic | Italic font style. |
- FontWeight enums
| Name | Description |
| -------- | -------- |
- | Lighter | The font weight is lighter. |
- | Normal | The font weight is normal. |
- | Regular | The font weight is regular. |
- | Medium | The font weight is medium. |
- | Bold | The font weight is bold. |
- | Bolder | The font weight is bolder. |
+ | Lighter | The font weight is lighter. |
+ | Normal | The font weight is normal. |
+ | Regular | The font weight is regular. |
+ | Medium | The font weight is medium. |
+ | Bold | The font weight is bold. |
+ | Bolder | The font weight is bolder. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
index 62fd9db2ddca3e177003555ef8ee806f67c59627..73456af6d99f50b4c5e0b7a75356e00d447ba2e1 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
@@ -1,7 +1,7 @@
# Touch Target
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,20 +16,20 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| responseRegion | Array<Rectangle> \| Rectangle | {
x: 0,
y: 0,
width: '100%',
height: '100%'
} | One or more touch targets, including their location and size.
>  **NOTE：**
> The percentage is measured relative to the component itself.
>
> **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is offset from the top edge of the component by the component's height.
>
> **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component; when **height** is set to **'100%'**, the height of the touch target is equal to that of the component. |
+| responseRegion | Array<Rectangle> \| Rectangle | {
x: 0,
y: 0,
width: '100%',
height: '100%'
} | One or more touch targets, including their location and size.
>  **NOTE**
> The percentage is measured relative to the component itself.
>
> **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is offset from the top edge of the component by the component's height.
>
> **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component; when **height** is set to **'100%'**, the height of the touch target is equal to that of the component. |
- Rectangle attributes
- | Name | Type | Mandatory | Default Value | Description |
+ | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
- | x | Length | No | 0vp | X coordinate of the touch point relative to the left edge of the component. |
- | y | Length | No | 0vp | Y coordinate of the touch point relative to the left edge of the component. |
- | width | Length | No | 100% | Width of the touch target. |
- | height | Length | No | 100% | Height of the touch target. |
+ | x | Length | No | 0vp | X coordinate of the touch point relative to the left edge of the component. |
+ | y | Length | No | 0vp | Y coordinate of the touch point relative to the left edge of the component. |
+ | width | Length | No | 100% | Width of the touch target. |
+ | height | Length | No | 100% | Height of the touch target. |
- >  **NOTE：**
+ >  **NOTE**
> When both **x** and **y** are set to positive values, the entire touch target offsets towards the lower right corner of the component. How much the touch target offsets is subject to the set values.
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
index 9872e09c8ee299860ac42290bd8240284bd48305..e3016cfb9cabac73f6379f8af86687e5c00d5791 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
@@ -1,7 +1,7 @@
# Transformation
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,12 +13,12 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | {
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point. |
-| translate | {
x?: Length,
y?: Length,
z? : Length
} | {
x: 0,
y: 0,
z: 0
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is **0**. |
-| scale | {
x?: number,
y?: number,
z?: number,
centerX?: Length,
centerY?: Length
} | {
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point. |
-| transform | matrix: Matrix4 | - | Transformation matrix of the component. |
+| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | {
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point. |
+| translate | {
x?: Length,
y?: Length,
z? : Length
} | {
x: 0,
y: 0,
z: 0
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is **0**. |
+| scale | {
x?: number,
y?: number,
z?: number,
centerX?: Length,
centerY?: Length
} | {
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point. |
+| transform | matrix: Matrix4 | - | Transformation matrix of the component. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
index 0754cd8cc2061dbd136ae8e88e9bc0de84e79592..05c601ac22daf362e1e0cb5f05019a090fa2351c 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
@@ -1,7 +1,7 @@
# Visibility
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,17 +13,17 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| visibility | Visibility | Visibility.Visible | Whether the component is shown or hidden. |
+| visibility | Visibility | Visibility.Visible | Whether the component is shown or hidden. |
- Visibility enums
| Name | Description |
| -------- | -------- |
- | Hidden | The component is hidden, and a placeholder is used for it in the layout. |
- | Visible | The component is shown. |
- | None | The component is hidden. It is not involved in the layout, and no placeholder is used for it. |
+ | Hidden | The component is hidden, and a placeholder is used for it in the layout. |
+ | Visible | The component is shown. |
+ | None | The component is hidden. It is not involved in the layout, and no placeholder is used for it. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
index 75c12a927c600b0f2a2254f7fa6f4b7e3e414a1f..c18d5a4e20ca5f48ab6d5ccf368d9936c174fe0d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
@@ -1,7 +1,7 @@
# Z-order Control
->  **NOTE：**
+>  **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -13,9 +13,9 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+ | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level. |
+| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
index 200f994c813dd0768abdb859bbdd92b4c0530ca3..b9a78d55f5819fd4fdfd70eb2a095dc15d0674f8 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
@@ -1,7 +1,7 @@
# Component Area Change Event
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,9 +12,9 @@ None
## Events
- | Name | Bubble Supported | Description |
+ | Name | Bubble Supported | Description |
| -------- | -------- | -------- |
-| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
+| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
index 0cf31dce9664da5dcc4296f199e613088629bcd1..f69971a1e257683180bd89129e51e92727ee1a4f 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
@@ -1,7 +1,7 @@
# Click Event
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,21 +12,21 @@ None
## Events
- | Name | Bubble Supported | Description |
+ | Name | Bubble Supported | Description |
| -------- | -------- | -------- |
-| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
+| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
### ClickEvent
| Name | Type | Description |
| -------- | -------- | -------- |
-| screenX | number | X coordinate of the click relative to the left edge of the screen. |
-| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
-| x | number | X coordinate of the click relative to the left edge of the component being clicked. |
-| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
-| target8+ | EventTarget | Target element that is clicked. |
-| timestamp | number | Timestamp of the event. |
+| screenX | number | X coordinate of the click relative to the left edge of the screen. |
+| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
+| x | number | X coordinate of the click relative to the left edge of the component being clicked. |
+| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
+| target8+ | EventTarget | Target element that is clicked. |
+| timestamp | number | Timestamp of the event. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
index b8725c95e27c3d04a9c556eb35ffb6721c99111f..27d59bc63bd453ba0baa65f30288f45d3ca864ca 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
@@ -1,17 +1,17 @@
# Drag/Drop Event
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-| Name | Bubble Supported | Description |
+| Name | Bubble Supported | Description |
| -------- | -------- | -------- |
-| onDragStart(callback: (event: [DragEvent](#DragEvent), extraParams?: string) =>\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
Return value: object being dragged, which is used for prompts displayed when the object is dragged.
>  **NOTE：**
> - A drag event can be triggered by a 150 ms long press.
>
> - If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
-| onDragEnter(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
>  **NOTE：**
> This event is valid only when the **onDrop** event is listened to. |
-| onDragMove(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
>  **NOTE：**
> This event is valid only when the **onDrop** event is listened to. |
-| onDragLeave(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
>  **NOTE：**
> This event is valid only when the **onDrop** event is listened to. |
-| onDrop(callback: (event:[DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam. |
+| onDragStart(callback: (event: [DragEvent](#DragEvent), extraParams?: string) =>\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
Return value: object being dragged, which is used for prompts displayed when the object is dragged.
>  **NOTE**
> - A drag event can be triggered by a 150 ms long press.
>
> - If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
+| onDragEnter(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
>  **NOTE**
> This event is valid only when the **onDrop** event is listened to. |
+| onDragMove(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
>  **NOTE**
> This event is valid only when the **onDrop** event is listened to. |
+| onDragLeave(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam.
>  **NOTE**
> This event is valid only when the **onDrop** event is listened to. |
+| onDrop(callback: (event:[DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.
-**event**: information about the drag event, including the coordinates of the item that is being dragged.
-**extraParams**: additional information about the drag event. For details, see extraParam. |
- extraParam
@@ -20,17 +20,17 @@
**extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
| Name | Type | Description |
| -------- | -------- | -------- |
- | selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.
>  **NOTE：**
> This attribute is valid only in the **ListItem** component. |
- | insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.
>  **NOTE：**
> This attribute is valid only in the drag event of the **List** component. |
+ | selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.
>  **NOTE**
> This attribute is valid only in the **ListItem** component. |
+ | insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.
>  **NOTE**
> This attribute is valid only in the drag event of the **List** component. |
### DragEvent
- APIs
- | Name | Return Value Type | Description |
+ | Name | Return Value Type | Description |
| -------- | -------- | -------- |
- | getX() | number | X-coordinate of the item that is being dragged, in vp. |
- | getY() | number | Y-coordinate of the item that is being dragged, in vp. |
+ | getX() | number | X-coordinate of the item that is being dragged, in vp. |
+ | getY() | number | Y-coordinate of the item that is being dragged, in vp. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
index 38e1218012c8597c5d2f3022672f88a6ba55a118..ca5694f8efd070b2ed5eab223f44474b03a54bb5 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
@@ -1,7 +1,7 @@
# Key Event
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,9 +12,9 @@ None
## Events
-| Name | Bubble Supported | Description |
+| Name | Bubble Supported | Description |
| -------- | -------- | -------- |
-| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about the event parameters, see [KeyEvent Object](#KeyEvent Object). |
+| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about the event parameters, see [KeyEvent Object](#KeyEvent Object). |
### KeyEvent Object
@@ -22,42 +22,42 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | type | KeyType | Type of a key. |
- | keyCode | number | Key code. |
- | keyText | string | Key value. |
- | keySource | KeySource | Type of the input device that triggers the key event. |
- | deviceId | number | ID of the input device that triggers the key event. |
- | metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
- | timestamp | number | Timestamp when the key is pressed. |
+ | type | KeyType | Type of a key. |
+ | keyCode | number | Key code. |
+ | keyText | string | Key value. |
+ | keySource | KeySource | Type of the input device that triggers the key event. |
+ | deviceId | number | ID of the input device that triggers the key event. |
+ | metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
+ | timestamp | number | Timestamp when the key is pressed. |
- APIs
| Name | Description |
| -------- | -------- |
- | stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
+ | stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
- KeyType enums
| Name | Description |
| -------- | -------- |
- | Down | The key is pressed. |
- | Up | The key is released. |
+ | Down | The key is pressed. |
+ | Up | The key is released. |
- KeySource enums
| Name | Description |
| -------- | -------- |
- | Unknown | Unknown input device. |
- | Keyboard | The input device is a keyboard. |
+ | Unknown | Unknown input device. |
+ | Keyboard | The input device is a keyboard. |
- Common KeyCode description
- | Value | Behavior | Physical Button |
+ | Value | Behavior | Physical Button |
| -------- | -------- | -------- |
- | 19 | Upward | Up button. |
- | 20 | Downward | Down button. |
- | 21 | Leftward | Left button. |
- | 22 | Rightward | Right button. |
- | 23 | OK | **OK** key on a remote control. |
- | 66 | OK | **Enter** key on a keyboard. |
- | 160 | OK | **Enter** button on the numeric keypad. |
+ | 19 | Upward | Up button. |
+ | 20 | Downward | Down button. |
+ | 21 | Leftward | Left button. |
+ | 22 | Rightward | Right button. |
+ | 23 | OK | **OK** key on a remote control. |
+ | 66 | OK | **Enter** key on a keyboard. |
+ | 160 | OK | **Enter** button on the numeric keypad. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
index 52a99183757e86f8d1ca0abb41c89a2288dda87b..17b1df873571c1dde4d573ceab61b097a9f8fe3f 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
@@ -1,7 +1,7 @@
# Show/Hide Event
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,10 +12,10 @@ None
## Events
- | Name | Bubble Supported | Description |
+ | Name | Bubble Supported | Description |
| -------- | -------- | -------- |
-| onAppear(callback: () => void) | No | Called when the component is displayed. |
-| onDisappear(callback: () => void) | No | Called when the component disappears. |
+| onAppear(callback: () => void) | No | Called when the component is displayed. |
+| onDisappear(callback: () => void) | No | Called when the component disappears. |
## Example
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 b6945b816e3d27db7e556a0132e709d0698bf60e..2f5506a590931d37dffca4a7df4fbdf2e538a6d8 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,7 +1,7 @@
# Touch Event
->  **NOTE：**
+>  **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -14,7 +14,7 @@ None
| Name | Pop-up | Description |
| -------- | -------- | -------- |
-| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about the event parameters, see [TouchEvent](#touchevent). |
+| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about the event parameters, see [TouchEvent](#touchevent). |
### TouchEvent
@@ -22,36 +22,36 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | type | TouchType | Type of a touch event. |
- | touches | Array<TouchObject> | All finger information. |
- | changedTouches | Array<TouchObject> | Finger information changed. |
- | timestamp | number | Timestamp of the event. |
- | target8+ | EventTarget | Target of the event. |
+ | type | TouchType | Type of a touch event. |
+ | touches | Array<TouchObject> | All finger information. |
+ | changedTouches | Array<TouchObject> | Finger information changed. |
+ | timestamp | number | Timestamp of the event. |
+ | target8+ | EventTarget | Target of the event. |
- APIs
| API | Description |
| -------- | -------- |
- | stopPropagation(): void | Pop-up of the stop event. |
+ | stopPropagation(): void | Pop-up of the stop event. |
- TouchObject
| Name | Type | Description |
| -------- | -------- | -------- |
- | type | 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. |
+ | type | 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. |
+ | 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. |
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
index eb5281c52794e2604c06c38be51f76a6e0494d7d..9af1b1d69f3e929fab7684e68a8172514ae98fa7 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
@@ -1,7 +1,7 @@
# Focus Event
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,12 +12,12 @@ None
## Events
- | **Name** | **Bubble Supported** | **Description** |
+ | **Name** | **Bubble Supported** | **Description** |
| -------- | -------- | -------- |
-| onFocus(callback: () => void) | No | Triggered when the current component obtains focus. |
-| onBlur(callback:() => void) | No | Triggered when the current component loses focus. |
+| onFocus(callback: () => void) | No | Triggered when the current component obtains focus. |
+| onBlur(callback:() => void) | No | Triggered when the current component loses focus. |
->  **NOTE：**
+>  **NOTE**
> The following components support focus events: **<Button>**, **<Text>**, **<Image>**, **<List>**, and **<Grid>**.
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
index c256a22f9f83c094be8a30b736d05609e8d2a486..c7a488006883bf0c32f4693025f41ce7d659b2df 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
@@ -1,7 +1,7 @@
# Mouse Event
->  **NOTE：**
+>  **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,10 +12,10 @@ None
## Events
- | Name | Bubble Supported | Description |
+ | Name | Bubble Supported | Description |
| -------- | -------- | -------- |
-| onHover(callback: (isHover: boolean) => void) | No | Triggered when the mouse cursor enters or leaves the component.
**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
-| onMouse(callback: (event?: MouseEvent) => void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
+| onHover(callback: (isHover: boolean) => void) | No | Triggered when the mouse cursor enters or leaves the component.
**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
+| onMouse(callback: (event?: MouseEvent) => void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
### MouseEvent
@@ -23,31 +23,31 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | timestamp | number | Timestamp when the event is triggered. |
- | screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
- | screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
- | x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
- | y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
- | button | MouseButton | Mouse button. |
- | action | MouseAction | Event action. |
+ | timestamp | number | Timestamp when the event is triggered. |
+ | screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
+ | screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
+ | x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
+ | y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
+ | button | MouseButton | Mouse button. |
+ | action | MouseAction | Event action. |
- MouseButton attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | Left | number | Left mouse button. |
- | Right | number | Right mouse button. |
- | Middle | number | Middle mouse button. |
- | Back | number | Back button on the left of the mouse. |
- | Forward | number | Forward button on the left of the mouse. |
- | None | number | No button. |
+ | Left | number | Left mouse button. |
+ | Right | number | Right mouse button. |
+ | Middle | number | Middle mouse button. |
+ | Back | number | Back button on the left of the mouse. |
+ | Forward | number | Forward button on the left of the mouse. |
+ | None | number | No button. |
- MouseAction attributes
| Name | Type | Description |
| -------- | -------- | -------- |
- | Press | number | The mouse button is pressed. |
- | Release | number | The mouse button is released. |
- | Move | number | The mouse cursor moves. |
+ | Press | number | The mouse button is pressed. |
+ | Release | number | The mouse button is released. |
+ | Move | number | The mouse cursor moves. |
## Example