Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 6946212d 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (9484) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 2506e0fc
展开全部 隐藏空白更改
内联 并排
Showing with 4337 addition and 3178 deletion
en/application-dev/reference/arkui-ts/Readme-EN.md
浏览文件 @ 6946212d
# TypeScript-based Declarative Development Paradigm # eTS-based Declarative Development Paradigm
- Universal Component Information - Universal Component Information
- Universal Events - Universal Events
...@@ -120,12 +120,13 @@ ...@@ -120,12 +120,13 @@
- Canvas Components - Canvas Components
- [Canvas](ts-components-canvas-canvas.md) - [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- [OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- [Path2D](ts-components-canvas-path2d.md)
- [CanvasGradient](ts-components-canvas-canvasgradient.md) - [CanvasGradient](ts-components-canvas-canvasgradient.md)
- [ImageBitmap](ts-components-canvas-imagebitmap.md) - [ImageBitmap](ts-components-canvas-imagebitmap.md)
- [ImageData](ts-components-canvas-imagedata.md) - [ImageData](ts-components-canvas-imagedata.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- Animation - Animation
- [AnimatorProperty](ts-animatorproperty.md) - [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animation](ts-explicit-animation.md) - [Explicit Animation](ts-explicit-animation.md)
...@@ -136,8 +137,9 @@ ...@@ -136,8 +137,9 @@
- [Motion Path Animation](ts-motion-path-animation.md) - [Motion Path Animation](ts-motion-path-animation.md)
- [Matrix Transformation](ts-matrix-transformation.md) - [Matrix Transformation](ts-matrix-transformation.md)
- [Interpolation Calculation](ts-interpolation-calculation.md) - [Interpolation Calculation](ts-interpolation-calculation.md)
- Global UI Methods - Global UI Methods
- Pop-up Window - Dialog Box
- [Alert Dialog Box](ts-methods-alert-dialog-box.md) - [Alert Dialog Box](ts-methods-alert-dialog-box.md)
- [Action Sheet](ts-methods-action-sheet.md) - [Action Sheet](ts-methods-action-sheet.md)
- [Custom Dialog Box](ts-methods-custom-dialog-box.md) - [Custom Dialog Box](ts-methods-custom-dialog-box.md)
......
en/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 6946212d
# Property Animator # Property Animator
You can create a property animator to animate the universal attributes of a component. You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
animation(value: {duration?: number, tempo?: number, curve?: string | Curve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
Applies a property animator to the component to animate its attributes over time.
| Name | Type | Default Value | Description | **Parameters**
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
| curve | [Curve](ts-appendix-enums.md#curve) | Curve.Linear | Animation curve. The default curve is linear. | | Name | Type | Mandatory | Description |
| 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. | | duration | number | No | Animation duration, in ms.<br>Default value: **1000**|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.| | tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**|
| curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve) | No | Animation curve.<br>Default value: **Curve.Linear** |
| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>Default value: **0** |
| iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**|
| onFinish | () => void | No | Callback invoked when the animation playback is complete. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 6946212d
...@@ -54,14 +54,14 @@ ...@@ -54,14 +54,14 @@
## MouseButton ## MouseButton
| Name | Description | | Name | Description |
| ------- | ---------------- | | ------- | ---------------------------------------- |
| Left | Left button on the mouse. | | Left | Left button on the mouse. |
| Right | Right button on the mouse. | | Right | Right button on the mouse. |
| Middle | Middle button on the mouse. | | Middle | Middle button on the mouse. |
| Back | Back button on the left of the mouse.| | Back | Back button on the left of the mouse. |
| Forward | Forward button on the left of the mouse.| | Forward | Forward button on the left of the mouse. |
| None | No button. | | None | No button. |
## MouseAction ## MouseAction
......
en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 6946212d
# CheckboxGroup # CheckboxGroup
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<CheckboxGroup>** component is used to select or deselect all check boxes in a group. The **\<CheckboxGroup>** component is used to select or deselect all check boxes in a group.
## Required Permissions > **NOTE**
>
None > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components ## Child Components
None Not supported
## APIs ## APIs
CheckboxGroup( group?: string ) CheckboxGroup(options?: { group?: string })
Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group. Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group.
- Parameters **Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| group | string | No| - | Group name.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| group | string | No| Group name.|
## Attributes ## Attributes
| Name| Type| Default Value| Description|
| Name| Type| Default Value | Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selectAll | bool | false | Whether to select all.| | selectAll | boolean | false | Whether to select all. |
| selectedColor | Color | - | Color of the selected check box.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Color of the selected check box.|
## Events ## Events
| Name| Description| ## onChange
| -------- | -------- |
| onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.<br>- **names**: names of all selected check boxes in the group.<br>- **status**: selection status.| onChange (callback: (event: CheckboxGroupResult ) => void )
- SelectStatus enums Triggered when the selection status of the check box group or any check box wherein changes.
| Name | Description|
| ----- | -------------------- | | Name | Type | Mandatory | Description |
| All | All check boxes in the group are selected.| | ----- | ------------------- | --------- | ----------------------------------- |
| Part | Some check boxes in the group are selected.| | event | CheckboxGroupResult | Yes | Callback used to return the result. |
| None | None of the check boxes in the group are selected.|
## CheckboxGroupResult
| Name | Type | Description |
| ------ | ------ | ------- |
| name | Array&lt;string&gt; | Names of all the selected check boxes in the group.|
| status | SelectStatus | Selected status.|
## SelectStatus
| Name | Description|
| ----- | -------------------- |
| All | All check boxes in the group are selected.|
| Part | Some check boxes in the group are selected.|
| None | None of the check boxes in the group are selected.|
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CheckboxExample { struct CheckboxExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 6946212d
# Gauge # Gauge
The **\<Gauge>** component is used to display data in a ring chart.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
Data gauge chart widget, which is used to display data in a ring chart. >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Gauge(value:{value: number, min?: number, max?: number}) Gauge(options:{value: number, min?: number, max?: number})
- Parameter **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Current data value. |
| min | number | No | 0 | Minimum value of the current data segment. |
| max | number | No | 100 | Maximum value of the current data segment. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | number | Yes| Current data value.|
| min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
| max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| value | number | 0 | Sets the value of the current data chart. | | value | number | Value of the chart.<br>Default value: **0**|
| startAngle | Angle | -150 | Set the start angle. Clock 0 indicates 0 degree, and the clockwise direction indicates the positive angle. | | startAngle | number | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **-150**|
| endAngle | Angle | 150 | Sets the end angle position. The clock 0 point is 0 degree, and the clockwise direction is the positive angle. | | endAngle | number | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **150**|
| colors | Color \| Array&lt;ColorStop&gt; | - | Set the color of the chart. You can set the pure color or segmental gradient color. | | colors | Array&lt;ColorStop&gt; | Colors of the chart. Colors can be set for individual segments.|
| strokeWidth | Length | - | Sets the ring thickness of a ring chart. | | strokeWidth | [Length](ts-types.md#length) | Stroke width of the chart.|
## ColorStop
Describes a gradient stop.
| Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor8), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.|
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GaugeExample { struct GaugeExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 6946212d
# Image # Image
The **\<Image>** component is used to render and display local and online images. The **\<image>** component is used to render and display images.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
To use online images, you need to add the **ohos.permission.INTERNET** permission to the corresponding abilities in the **config.json** (for the FA model) or **module.json5** file (for the stage model). To use online images, the application must have the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md).
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
## Child Components ## Child Components
...@@ -31,37 +19,38 @@ Not supported ...@@ -31,37 +19,38 @@ Not supported
Image(src: string | PixelMap | Resource) Image(src: string | PixelMap | Resource)
Obtains an image from the specified source for subsequent rendering and display.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name| Type | Mandatory| Default Value| Description |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.| | src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](ts-types.md#resource) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.<br>\- Strings with the `file:///data/storage` prefix are supported, which are used to read image resources in the` files` folder in the installation directory of the application. Using such strings requires read permission on the files in the installation directory. |
## Attributes ## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description | | --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ | | alt | string \| [Resource](ts-types.md#resource) | - | Placeholder image displayed during loading. Only local images are supported. |
| alt | string \| [Resource](ts-types.md#resource) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. | | objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale mode. |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale type. | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>> **NOTE**<br>> This attribute is not applicable to SVG images.|
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. | | interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>> **NOTE**<br>> This attribute is not applicable to SVG images or **PixelMap** objects. |
| interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects. | | renderMode | ImageRenderMode | Original | Rendering mode of the image.<br>> **NOTE**<br>> This attribute is not applicable to SVG images.|
| renderMode | ImageRenderMode | Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. | | sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.<br>> **NOTE**<br>> This attribute is not applicable to **PixelMap** objects.|
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. | | matchTextDirection | boolean | false | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context. |
| matchTextDirection | boolean | false | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.| | fitOriginalSize | boolean | true | Whether to fit the component to the original size of the image source when the component size is not set. |
| fitOriginalSize | boolean | true | Whether to fit the component to the original size of the image source when the component size is not set.| | fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Fill color of the image. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image. |
| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Fill color. This parameter is valid only for SVG images. Once set, the fill color will replace that of the SVG image.| | autoResize | boolean | true | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.|
| autoResize | boolean | true | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.| | syncLoad<sup>8+</sup> | boolean | false | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
| syncLoad<sup>8+</sup> | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
> **NOTE**
>
> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, **animate**, **animateMotion**, and **animateTransform**.
## ImageInterpolation ## ImageInterpolation
| Name | Description | | Name | Description |
| ------ | ------------------------- | | ------ | ------------------------ |
| None | Interpolation image data is not used. | | None | Interpolation image data is not used. |
| High | The interpolation image data is used at the high level, which may affect the image rendering speed.| | High | The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.|
| Medium | The interpolation image data is used at the medium level. | | Medium | The interpolation image data is used at the medium level. |
| Low | The interpolation image data is used at the low level. | | Low | The interpolation image data is used at the low level. |
...@@ -74,12 +63,11 @@ Obtains an image from the specified source for subsequent rendering and display. ...@@ -74,12 +63,11 @@ Obtains an image from the specified source for subsequent rendering and display.
## Events ## Events
| Name | Description |
| Name | Description | | ---------------------------------------- | ---------------------------------------- |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The loaded image is returned. |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status. | | onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading. |
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels. | | onFinish(event: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.|
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. |
## Example ## Example
...@@ -281,3 +269,53 @@ struct ImageExample3 { ...@@ -281,3 +269,53 @@ struct ImageExample3 {
``` ```
![en-us_image_0000001256858397](figures/en-us_image_0000001256858397.gif) ![en-us_image_0000001256858397](figures/en-us_image_0000001256858397.gif)
### Rendering Sandbox Images
```
import fileio from '@ohos.fileio';
import image from '@ohos.multimedia.image';
const EMPTY_PATH = 'file://';
@Entry
@Component
struct LoadImageExample {
@State fileContent: string = '';
@State path: string = EMPTY_PATH;
@State accountInfoHeadPic: any = '';
build() {
Column() {
Button ('Read Sandbox Image')
.margin({ bottom: 10 })
.onClick(() => {
try {
this.path = EMPTY_PATH;
let context = getContext(this);
let path = context.getApplicationContext().filesDir + '/icon.png';
console.log(`Read the sandbox image=========>${path}`);
let fd = fileio.openSync(path, 0o100, 0o666);
console.log(`create file========>${fd}`);
let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png';
fileio.copyFileSync(srcPath, path);
console.log(`error:=============>${e.message}`);
}
})
Button ('Read Image')
.margin({ bottom: 10 })
.onClick(() => {
this.path = EMPTY_PATH;
this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png');
})
Text(`Image path: ${this.path}`)
.fontSize(20)
.margin({ bottom: 10 })
Image(this.path)
.width(100)
.height(100)
}
.width('100%').height('100%')
}
}
```
en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 6946212d
# ImageAnimator # ImageAnimator
The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured. The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Not supported Not supported
...@@ -25,17 +22,16 @@ ImageAnimator() ...@@ -25,17 +22,16 @@ ImageAnimator()
## Attributes ## Attributes
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ----------------------- | -------- | -------- | -------- |
| images | Array&lt;{<br/>src: string,<br/>width?: number \| string,<br/>height?: number \| string,<br/>top?: number \| string,<br/>left?: number \| string,<br/>duration?: number<br/>}&gt; | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br/>**src**: image path. The image format can be SVG, PNG, or JPG.<br/>**width**: image width.<br/>**height**: image height.<br/>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br/>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br/>**duration**: playback duration of the image, in ms. | | images | Array&lt;{<br/>src: string,<br/>width?: number \| string,<br/>height?: number \| string,<br/>top?: number \| string,<br/>left?: number \| string,<br/>duration?: number<br/>}&gt; | [] | No | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br/>**src**: image path. The image format can be SVG, PNG, or JPG.<br/>**width**: image width.<br/>**height**: image height.<br/>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br/>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br/>**duration**: playback duration of the image, in ms. |
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.| | state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No | Playback status of the animation. |
| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.| | duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid. |
| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.| | reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. |
| fixedSize | boolean | true | No| Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.| | fixedSize | boolean | true | No | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately. |
| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.| | preDecode | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance. |
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.| | fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. |
| iterations | number | 1 | No| 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.| | iterations | number | 1 | No | 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. |
## Events ## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 6946212d
# LoadingProgress # LoadingProgress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** The **\<LoadingProgress>** component is used to create a loading animation.
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<LoadingProgress>** component is used to display the loading progress.
## Required Permissions > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
LoadingProgress() LoadingProgress()
Creates a **LoadingProgress** instance. Creates a **\<LoadingProgress>** component.
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| ----- | ----- | ------------- | ---------------------------------------- | | -------- | -------- | -------- |
| color | Color | - | Foreground color of the loading progress bar. | | color | [ResourceColor](ts-types.md#resourcecolor8) | Foreground color of the **\<LoadingProgress>** component.|
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LoadingProgressExample { struct LoadingProgressExample {
...@@ -41,4 +40,4 @@ struct LoadingProgressExample { ...@@ -41,4 +40,4 @@ struct LoadingProgressExample {
} }
``` ```
![zh-cn_image_0000001198839004](figures/loadingProgress.png) ![en-us_image_000000111864201](figures/en-us_image_000000111864201.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 6946212d
# Marquee # Marquee
The **\<Marquee>** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Marquee>** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
## Required Permissions ## Required Permissions
None None
...@@ -23,23 +22,28 @@ Not supported ...@@ -23,23 +22,28 @@ Not supported
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
- Parameters **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| start | boolean | Yes| - | Whether to start scrolling.| | start | boolean | Yes| - | Whether to start scrolling.|
| step | number | No| 6 | Scrolling step.| | step | number | No| 6 | Scrolling step.|
| loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.| | loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.|
| fromStart | boolean | No| true | Whether the text scrolls from the start.| | fromStart | boolean | No| true | Whether the text scrolls from the start.|
| src | string | Yes| - | Text to scroll.| | src | string | Yes| - | Text to scroll.|
## Attributes
| Name | Type| Default Value | Description |
| ---------- | -------- | ------------------------------------ | ------------------------------------ |
| allowScale | boolean | false | Whether to allow text to scale. |
## Events ## Events
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.| | onStart(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.|
| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.| | onBounce(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.|
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.| | onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.|
## Example ## Example
...@@ -84,7 +88,7 @@ struct MarqueeExample { ...@@ -84,7 +88,7 @@ struct MarqueeExample {
Button('start') Button('start')
.onClick(() => { .onClick(() => {
this.start = true this.start = true
}) })
.width(200) .width(200)
.height(60) .height(60)
.margin({bottom:20}) .margin({bottom:20})
......
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 6946212d
# Navigation # Navigation
The **\<Navigation>** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings.
> **NOTE**<br> > **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Navigation&gt;** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings.
## Required Permissions
None
## Child Components ## Child Components
Supported Supported
...@@ -24,56 +18,58 @@ Navigation() ...@@ -24,56 +18,58 @@ Navigation()
Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings. Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Description |
| -------- | -------- | -------- | -------- | | -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string \| [CustomBuilder](../../ui/ts-types.md) | - | Page title. | | title | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Page title. |
| subtitle | string | - | Subtitle of the page. | | subtitle | string | Subtitle of the page. |
| menus | Array&lt;NavigationMenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. | | menus | Array<NavigationMenuItem&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu in the upper right corner of the page. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. | | titleMode | NavigationTitleMode | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md) | - | Content of the toolbar.<br/>**items**: all items on the toolbar. | | toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: all items on the toolbar. |
| hideToolBar | boolean | false | Whether to hide the toolbar.<br/>**true**: Hide the toolbar.<br/>**false**: Show the toolbar. | | hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.|
| hideTitleBar | boolean | false | Whether to hide the title bar. | | hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false** |
| hideBackButton | boolean | false | Whether to hide the back button. | | hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false** |
- NavigationMenuItem attributes ## NavigationMenuItem
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory| Description |
| value | string | Yes | - | Text of an option on the menu bar. | | ------ | ----------------------- | ---- | ------------------------------ |
| icon | string | No | - | Icon path of an option on the menu bar. | | value | string | Yes | Text of a menu item. |
| action | () =&gt; void | No | - | Callback invoked when an option is selected. | | icon | string | No | Icon path of a menu item.|
| action | () =&gt; void | No | Callback invoked when a menu item is selected. |
- Object attributes
| Name | Type | Mandatory | Default Value | Description | ## object
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | Text of an option on the toolbar. | | Name | Type | Mandatory| Description |
| icon | string | No | - | Icon path of an option on the toolbar. | | ------ | ----------------------- | ---- | ------------------------------ |
| action | () =&gt; void | No | - | Callback invoked when an option is selected. | | value | string | Yes | Text of an option on the toolbar. |
| icon | string | No | Icon path of an option on the toolbar.|
- NavigationTitleMode enums | action | () =&gt; void | No | Callback invoked when an option is selected. |
| Name | Description |
| -------- | -------- | ## NavigationTitleMode
| Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. |
| Mini | The mode is fixed at mini mode (icon + main title and subtitle). | | Name | Description |
| Full | The mode is fixed at full mode (main title and subtitle). | | ---- | ---------------------------------------- |
| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.|
> **NOTE** | Mini | The icon, main title, and subtitle are in mini mode. |
> Currently, only the scrollable component **&lt;List&gt;** is supported. | Full | The main title and subtitle are in full mode. |
> **NOTE**
>
> Currently, the scrollable component can only be **\<List>**.
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. | | onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
## Example ## Example
```ts
```
// Example 01 // Example 01
@Entry @Entry
@Component @Component
...@@ -161,8 +157,7 @@ struct NavigationExample { ...@@ -161,8 +157,7 @@ struct NavigationExample {
![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif) ![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif)
```ts
```
// Example 02 // Example 02
@Entry @Entry
@Component @Component
......
en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 6946212d
# Progress # Progress
The **\<Progress>** component is used to provide a progress indicator that displays the progress of content loading or an operation.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
## Required Permissions
None
## Child Components ## Child Components
...@@ -21,40 +14,50 @@ Not supported ...@@ -21,40 +14,50 @@ Not supported
## APIs ## APIs
Progress(value: {value: number, total?: number, type?: ProgressType}) Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ProgressType})
Creates a progress bar. Creates a progress indicator.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Current progress. |
| total | number | No | 100 | Total progress. |
| type | ProgressType | No | ProgressType.Linear | Type of the progress bar. |
- ProgressType enums
| Name | Description |
| -------- | -------- |
| Linear | Linear type. |
| Ring<sup>8+</sup> | Ring type without scale. The ring fills up as the progress increases. |
| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full. |
| ScaleRing<sup>8+</sup> | Ring type with scale, which is similar to the clock scale style. |
| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | number | Yes| Current progress.|
| total | number | No| Total progress.<br>Default value: **100**|
| type<sup>8+</sup> | ProgressType | No| Type of the progress indicator.<br>Default value: **ProgressType.Linear**|
| style<sup>deprecated</sup> | ProgressStyle | No| Style the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
## ProgressType
| Name| Description|
| -------- | -------- |
| Linear | Linear type.|
| Ring<sup>8+</sup> | Indeterminate ring type. The ring fills up as the progress increases.|
| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
| ScaleRing<sup>8+</sup> | Determinate ring type, which is similar to the clock scale.|
| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type.|
## ProgressStyle
| Name | Description |
| --------- | ------------------------------------------------------------ |
| Linear | Linear type. |
| Ring | Indeterminate ring type. The ring fills up as the progress increases. |
| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
| ScaleRing | Determinate ring type, which is similar to the clock scale. |
| Capsule | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type.|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| value | number | - | Current progress. | | value | number | Current progress.|
| color | Color | - | Background color of the progress bar. | | color | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the progress indicator.|
| style<sup>8+</sup> | {<br/>strokeWidth? : Length,<br/>scaleCount? : number,<br/>scaleWidth? : Length<br/>} | - | Component style.<br/>- **strokeWidth**: width of the progress bar.<br/>- **scaleCount**: scale count of the circular progress bar.<br/>- **scaleWidth**: scale width of the circular progress bar.<br/>If the scale thickness is greater than the progress bar width, the default scale thickness is used. | | style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **strokeWidth**: stroke width of the progress indicator.<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>- **scaleWidth**: scale bar width of the determinate ring-type process indicator. If it is greater than the progress indicator width, the default value is used instead.|
## Example ## Example
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
......
en/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 6946212d
# Radio # Radio
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Radio>** component allows users to select from a set of mutually exclusive options. The **\<Radio>** component allows users to select from a set of mutually exclusive options.
> **NOTE**
## Required Permissions >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Radio(options: {value: string, group: string}) Radio(options: {value: string, group: string})
- Parameters **Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes| - | Value of the current radio button.|
| group | string | Yes| - | Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | string | Yes| Value of the current radio button.|
| group | string | Yes| Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.|
## Attributes ## Attributes
| Name| Type| Default Value| Description| | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| checked | boolean | false | Whether the radio button is selected.| | checked | boolean | Whether the radio button is selected.<br>Default value: **false**|
## Events ## Events
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(callback: (value: boolean) => void) | Triggered when the selected state of the radio button changes.<br> -The value **true** means that the radio button is selected.<br> -The value **false** means that the radio button is not selected.| | onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.<br> - If **isChecked** is **true**, the radio button is selected.<br> - If **isChecked** is **false**, the radio button is not selected.|
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RadioExample { struct RadioExample {
...@@ -55,8 +50,8 @@ struct RadioExample { ...@@ -55,8 +50,8 @@ struct RadioExample {
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
.height(50) .height(50)
.width(50) .width(50)
.onChange((value: boolean) => { .onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + value) console.log('Radio1 status is ' + isChecked)
}) })
} }
Column() { Column() {
...@@ -64,8 +59,8 @@ struct RadioExample { ...@@ -64,8 +59,8 @@ struct RadioExample {
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.height(50) .height(50)
.width(50) .width(50)
.onChange((value: boolean) => { .onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + value) console.log('Radio2 status is ' + isChecked)
}) })
} }
Column() { Column() {
...@@ -73,8 +68,8 @@ struct RadioExample { ...@@ -73,8 +68,8 @@ struct RadioExample {
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.height(50) .height(50)
.width(50) .width(50)
.onChange((value: boolean) => { .onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + value) console.log('Radio3 status is ' + isChecked)
}) })
} }
}.padding({ top: 30 }) }.padding({ top: 30 })
......
en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 6946212d
...@@ -6,10 +6,6 @@ The **\<ScrollBar>** is used together with scrollable components, such as **\<Li ...@@ -6,10 +6,6 @@ The **\<ScrollBar>** is used together with scrollable components, such as **\<Li
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
...@@ -22,20 +18,20 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B ...@@ -22,20 +18,20 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
**Parameters** **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 scrollable components.| | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.| | direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.| | state | [BarState](ts-appendix-enums.md#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. > 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. > 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.
## ScrollBarDirection ## ScrollBarDirection
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| Vertical | Vertical scrollbar.| | Vertical | Vertical scrollbar.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 6946212d
...@@ -6,10 +6,6 @@ The **\<Search>** component provides an input area for users to search. ...@@ -6,10 +6,6 @@ The **\<Search>** component provides an input area for users to search.
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
Not supported Not supported
...@@ -20,32 +16,31 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -20,32 +16,31 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory| Description |
| ----------- | ---------------- | ---- | ---------------------------------------- | | ----------- | ---------------- | ---- | ------------------------------------------------------------ |
| value | string | No | Text input in the search text box. | | value | string | No | Text input in the search text box. |
| placeholder | string | No | Text displayed when there is no input. | | placeholder | string | No | Text displayed when there is no input. |
| icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.| | icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
| controller | SearchController | No | Controller. | | controller | SearchController | No | Controller. |
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| ----------------------- | ---------------------------------------- | --------------------- | | ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
| searchButton | string | Text on the search button located next to the search text box. By default, there is no search button.| | searchButton | string | Text on the search button located next to the search text box. By default, there is no search button. |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. | | placeholderFont | [Font](ts-types.md#font) | Placeholder text style. |
| textFont | [Font](ts-types.md#font) | Text font for the search text box. | | textFont | [Font](ts-types.md#font) | Text font for the search text box. |
## Events ## Events
| Name | Description | | Name | Description |
| ------------------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br>- **value**: current text input. | | onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> -**value**: current text input.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br>- **value**: current text input. | | onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br>- **value**: text copied. | | onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br>- **value**: text cut. | | onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br>- **value**: text pasted. | | onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
## SearchController ## SearchController
...@@ -63,11 +58,9 @@ Sets the position of the caret. ...@@ -63,11 +58,9 @@ Sets the position of the caret.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name| Type| Mandatory| Description |
| ----- | ------ | ---- | ----------------- | | ------ | -------- | ---- | ---------------------------------- |
| value | number | Yes | Length from the start of the character string to the position where the caret is located.| | value | number | Yes | Length from the start of the character string to the position where the caret is located.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 6946212d
# Select # Select
> ![](public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<Select\>** component provides a drop-down list box that allows users to select among multiple options. The **<Select\>** component provides a drop-down list box that allows users to select among multiple options.
## Required Permissions > **NOTE**
>
None > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Select(options: Array\<SelectOption>\) Select(options: Array\<SelectOption\>)
- SelectOption parameters **SelectOption**
| Name| Type| Mandatory| Default Value| Description| | Name| Type | Mandatory| Description |
| ------ | ----------------------------------------------- | ---- | ------ | -------------- | | ------ | ----------------------------------- | ---- | -------------- |
| value | [ResourceStr](../../ui/ts-types.md) | Yes| - | Value of an option in the drop-down list box.| | value | [ResourceStr](ts-types.md#resourcestr8) | Yes | Value of an option in the drop-down list box.|
| icon | [ResourceStr](../../ui/ts-types.md) | No| - | Icon of an option in the drop-down list box.| | icon | [ResourceStr](ts-types.md#resourcestr8) | No | Icon of an option in the drop-down list box.|
## Attributes ## Attributes
| Name| Type| Default Value| Description| | Name | Type | Description |
| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- | | ----------------------- | ------------------------------------- | --------------------------------------------- |
| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.| | selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
| value | string | - | Text of the drop-down button.| | value | string | Text of the drop-down button. |
| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.| | font | [Font](ts-types.md#font) | Text font of the drop-down button. |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the drop-down button.| | fontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the drop-down button. |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the selected option in the drop-down list box.| | selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected option in the drop-down list box. |
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.| | selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the selected option in the drop-down list box.| | selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the selected option in the drop-down list box. |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of an option in the drop-down list box.| | optionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of an option in the drop-down list box. |
| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.| | optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.| | optionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of an option in the drop-down list box. |
## Events ## Events
| Name| Description| | Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------------------------- | ------------------------------------------------------------ |
| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.| | onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br/>**value**: value of the selected option. |
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SelectExample { struct SelectExample {
...@@ -61,7 +60,7 @@ struct SelectExample { ...@@ -61,7 +60,7 @@ struct SelectExample {
.font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal }) .font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
.selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) .selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
.optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) .optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
.onSelecte((index:number)=>{ .onSelect((index:number)=>{
console.info("Select:" + index) console.info("Select:" + index)
}) })
} }
......
en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 6946212d
# Slider # Slider
The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The *\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
## Required Permissions
None
## Child Components ## Child Components
...@@ -21,59 +14,64 @@ Not supported ...@@ -21,59 +14,64 @@ Not supported
## APIs ## APIs
Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis}) Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})
**Parameters**
- Parameters | Name | Type | Mandatory| Description |
| Name | Type | Mandatory | Default Value | Description | | ---------------------- | --------------------------------- | ---- | ------------------------------------------------------------ |
| ---------------------- | --------------------------------------- | --------- | ------------------ | ---------------------------------------- | | value | number | No | Current progress.<br>Default value: **0** |
| value | number | No | 0 | Current progress. | | min | number | No | Minimum value.<br>Default value: **0** |
| min | number | No | 0 | Minimum value. | | max | number | No | Maximum value.<br>Default value: **100** |
| max | number | No | 100 | Maximum value. | | step | number | No | Step of the slider.<br>Default value: **1** |
| step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. | | style | SliderStyle | No | Style of the slider.<br>Default value: **SliderStyle.OutSet** |
| style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. | | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No | Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**|
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether the slider moves horizontally or vertically. | | reverse<sup>8+</sup> | boolean | No | Whether the slider values are reversed.<br>**NOTE**<br>The value **false** indicates that the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider. The value **true** indicates that the values increase from right to left for a horizontal slider and from bottom to top for a vertical slider.<br>Default value: **false**|
| reverse<sup>8+</sup> | boolean | No | false | Whether the slider values are reversed. |
- SliderStyle enums ## SliderStyle
| Name | Description |
| ------ | --------------------------------- |
| OutSet | The slider is on the slider rail. |
| InSet | The slider is in the slider rail. |
| Name | Description |
| ------ | ------- |
| OutSet | The slider is on the slider rail.|
| InSet | The slider is in the slider rail.|
## Attributes ## Attributes
Touch target configuration is not supported. Touch target configuration is not supported.
| Name | Type | Default Value | Description | | Name | Type | Description |
| ------------- | ------- | ------------- | ---------------------------------------- | | ------------- | ------- | ----------------- |
| blockColor | Color | - | Color of the slider. | | blockColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider. |
| trackColor | Color | - | Background color of the slider. | | trackColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the slider. |
| selectedColor | Color | - | Color of the slider rail that has been slid. | | selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider rail that has been slid. |
| showSteps | boolean | false | Whether to display the current step. | | showSteps | boolean | Whether to display the current step.<br>Default value: **false**|
| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. | | showTips | boolean | Whether to display a bubble to indicate the percentage when sliding.<br>Default value: **false**|
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.|
| maxLabel | string | Maximum label.|
| minLabel | string | Minimum label.|
## Events ## Events
Among all the universal events, only **OnAppear** and **OnDisAppear** are supported. In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported.
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Callback invoked when the slider slides.<br/>**value**: current progress.<br/>**mode**: dragging state. | | onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider slides.<br>**value**: current progress. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the required precision.<br>**mode**: dragging state.|
- SliderChangeMode enums ## SliderChangeMode
| Name | Value | Description |
| ------ | ----- | ----------------------------------- |
| Begin | 0 | The user starts to drag the slider. |
| Moving | 1 | The user is dragging the slider. |
| End | 2 | The user stops dragging the slider. |
| Name | Value | Description |
| ------ | ---- | --------- |
| Begin | 0 | The user starts to drag the slider.|
| Moving | 1 | The user is dragging the slider. |
| End | 2 | The user stops dragging the slider.|
| Click | 3 | The user moves the slider by touching the slider rail.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 6946212d
# Span # Span
The **\<Span>** component is used to display inline text in the **\<Text>** component.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Span&gt;** component is used to display a paragraph of textual information. It can be used only as a child component in the **&lt;Text&gt;** component.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Span(content: string) Span(value: string | Resource)
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.|
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| content | string | Yes | - | Text content. |
## Attributes ## Attributes
In addition to the text style attributes, the attributes below are supported. In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported.
| Name | Type | Default Value | Description | | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| decoration | {<br/>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),<br/>color?: Color<br/>} | {<br/>type: TextDecorationType.None<br/>} | Style and color of the text decorative line. | | decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None<br>color: Color.Black<br>} |
| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. | | letterSpacing | number \| string | Letter spacing. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **Normal** |
## Events ## Events
Among all the universal events, only the click event is supported. Among all the [universal events](ts-universal-attributes-click.md), only the click event is supported.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> As the **&lt;Span&gt;** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid. >
> As the **\<Span>** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct SpanExample { struct SpanExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 6946212d
...@@ -7,11 +7,6 @@ The **\<Text>** component is used to display a piece of textual information. ...@@ -7,11 +7,6 @@ The **\<Text>** component is used to display a piece of textual information.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
This component can contain the [\<Span>](ts-basic-components-span.md) child component. This component can contain the [\<Span>](ts-basic-components-span.md) child component.
...@@ -22,26 +17,25 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp ...@@ -22,26 +17,25 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp
Text(content?: string | Resource) Text(content?: string | Resource)
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.<br>Default value: ' ' | | content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.<br>Default value: **' '**|
## Attributes ## Attributes
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.<br/>Default value: **TextAlign.Start** | | textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.<br>Default value: **TextAlign.Start**|
| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.<br/>Default value: **{overflow:&nbsp;TextOverflow.Clip}**<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. | | textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.<br>Default value: **{overflow: TextOverflow.Clip}**<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
| maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity** | | maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity** |
| lineHeight | string \| number \| [Resource](ts-types.md#resource) | 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. | | lineHeight | string \| number \| [Resource](ts-types.md#resource) | 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 | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor8)<br>} | Style and color of the text decorative line.<br/>Default value: **{<br/>type: TextDecorationType.None,<br/>color: Color.Black<br/>}** | | decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor8)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} |
| baselineOffset | number \| string | Offset of the text baseline. | | baselineOffset | number \| string | Offset of the text baseline. |
| letterSpacing | number \| string | Letter spacing. | | letterSpacing | number \| string | Letter spacing. |
| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size. | | minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size. |
| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size. | | maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br/>Default value: **TextCase.Normal** | | textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**|
> **NOTE** > **NOTE**
> >
......
en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 6946212d
# TextArea # TextArea
The **\<TextArea>** component provides multi-line text input and responds to certain input events. The **\<TextArea>** component provides multi-line text input.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
...@@ -23,34 +18,33 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex ...@@ -23,34 +18,33 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Description |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- | | ----------------------- | ---------------------------------------- | ---- | -------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | No | - | Text displayed when there is no input. | | placeholder | [ResourceStr](ts-types.md#resourcestr8) | No | Text displayed when there is no input. |
| text | [ResourceStr](ts-types.md#resourcestr8) | No | - | Current text input. | | text | [ResourceStr](ts-types.md#resourcestr8) | No | Current text input. |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | - | Text area controller.| | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | Text area controller.|
## Attributes ## Attributes
In addition to universal attributes, the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value | Description |
| ------------------------ | ---------------------------------------- | ----- | ---------------------------------------- |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | - | Placeholder text style.<br>- **size**: font size. If the value is of the number type, the unit is fp.<br>- **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.<br>- **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.<br>- **style**: font style.|
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Start | Horizontal alignment of the text.<br/>Default value: **TextAlign.Start** |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Color of the caret in the text box. |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | - | 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.<br>- **value**: regular expression to set.<br>- **error**: ignored content to return when regular expression matching fails.|
| Name | Type | Description |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**|
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the caret in the text box. |
| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br>error?: (value: string) => void<br>} | 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.<br>- **value**: regular expression to set.<br>- **error**: ignored content to return when regular expression matching fails.|
## Events ## Events
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. | | onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.| | onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>- **value**: text to be copied.|
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.| | onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>- **value**: text to be cut.|
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.| | onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>- **value**: text to be pasted.|
## TextAreaController<sup>8+</sup> ## TextAreaController<sup>8+</sup>
...@@ -60,7 +54,6 @@ Defines the controller for controlling the **\<TextArea>** component. ...@@ -60,7 +54,6 @@ Defines the controller for controlling the **\<TextArea>** component.
``` ```
controller: TextAreaController = new TextAreaController() controller: TextAreaController = new TextAreaController()
``` ```
### caretPosition<sup>8+</sup> ### caretPosition<sup>8+</sup>
...@@ -71,9 +64,9 @@ Sets the position of the caret. ...@@ -71,9 +64,9 @@ Sets the position of the caret.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name| Type| Mandatory| Description |
| ----- | ------ | ---- | ---- | ------------------- | | ------ | -------- | ---- | -------------------------------------- |
| value | number | Yes | - | Length from the start of the string to the position where the caret is located.| | value | number | Yes | Length from the start of the string to the position where the caret is located.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 6946212d
...@@ -18,8 +18,8 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController ...@@ -18,8 +18,8 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------------- | -------- | ------ | --------------------------------------------------------------------------- | | -------------- | -------- | ------ | --------------------------------------------------------------------------- |
| timeZoneOffset | number | No | Time zone offset.<br>The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8.<br>For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region. If the set value is not within the valid range, the time zone offset of the current system will be used.<br/>Default value: time zone offset of the current system | | timeZoneOffset | number | No | Time zone offset.<br>The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8.<br>For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region. If the set value is not within the valid range, the time zone offset of the current system will be used.<br>Default value: time zone offset of the current system|
| controller | [TextClockController](#textclockcontroller) | No | Controller to control the status of the **<TextClock\>** component. | | controller | [TextClockController](#textclockcontroller) | No | Controller to control the status of the **<TextClock\>** component.|
## Attributes ## Attributes
...@@ -27,24 +27,24 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -27,24 +27,24 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| ------ | --------------- | ------------------------------------------------------------ | | ------ | --------------- | ------------------------------------------------------------ |
| format | string | Time format.<br>The date separator is a slash (/), and the time separator is a colon (:).<br>For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd,<br>and hhmmss is displayed as hh:mm:ss.<br>Only one digit is required for the time format. This means that hhmmss is equivalent to hms.<br>Supported time format strings:<br>- YYYY/yyyy: four-digit year<br>- YY/yy: last two digits of year<br>- M: one-digit month (MM for two-digit month, for example, 01)<br>- d: one-digit day (dd for two-digit day, for example, 01)<br>- D: number of days that have elapsed in the year<br>- H: 24-hour format<br>- h: 12-hour format<br>- m: minute<br>- s: second<br>- SSS: millisecond<br>Default value: **'hms'**| | format | string | Time format.<br>The date separator is a slash (/), and the time separator is a colon (:).<br>For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd,<br>and hhmmss is displayed as hh:mm:ss.<br>Only one digit is required for the time format. This means that **"hhmmss"** is equivalent to **"hms"**.<br>Supported time format strings:<br>- YYYY/yyyy: four-digit year<br>- YY/yy: last two digits of year<br>- M: one-digit month (MM for two-digit month, for example, 01)<br>- d: one-digit day (dd for two-digit day, for example, 01)<br>- D: number of days that have elapsed in the year<br>- H: 24-hour format<br>- h: 12-hour format<br>- m: minute<br>- s: second<br>- SSS: millisecond<br>If the specified format does not match the supported formats, the default value is used.<br>Default value: **'hms'**|
## Events ## Events
In addition to the universal events (ts-universal-events-click.md), the following events are supported. In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description | | Name | Description |
| -------------------------------------------- | ------------------------------------------------------------ | | -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | Called when the time changes in seconds at minimum.<br> - **value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.| | onDateChange(event: (value: number) => void) | Called when the time changes in seconds at minimum.<br>- **value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
## TextClockController ## TextClockController
Defines the controller of the **<TextClock\>** component, which can be bound to the component for status control. A **\<TextClock>** component can be bound to only one controller. Implements the controller of the **\<TextClock>** component. You can bind the controller to the component to control its start and stop. A **\<TextClock>** component can be bound to only one controller.
### Objects to Import ### Objects to Import
```ts ```ts
controller: TextClockController = new TextClockController() controller: TextClockController = new TextClockController();
``` ```
### start ### start
...@@ -59,35 +59,37 @@ stop() ...@@ -59,35 +59,37 @@ stop()
Stops the **<TextClock\>** component. Stops the **<TextClock\>** component.
## Example ## Example
```ts ```ts
@Entry @Entry
@Component @Component
struct Second { struct Second {
@State accumulateTime: number = 0 @State accumulateTime: number = 0;
controller: TextClockController = new TextClockController() // Objects to import
controller: TextClockController = new TextClockController();
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime) Text('Current milliseconds is ' + this.accumulateTime)
.fontSize(20) .fontSize(20)
// Display the system time in 12-hour format for the UTC+8 time zone, accurate to seconds.
TextClock({ timeZoneOffset: -8, controller: this.controller }) TextClock({ timeZoneOffset: -8, controller: this.controller })
.format('hms') .format('hms')
.onDateChange((value: number) => { .onDateChange((value: number) => {
this.accumulateTime = value this.accumulateTime = value;
}) })
.margin(20) .margin(20)
.fontSize(30) .fontSize(30)
Button("start TextClock") Button("start TextClock")
.margin({ bottom: 10 }) .margin({ bottom: 10 })
.onClick(() => { .onClick(() => {
this.controller.start() // Start the text clock.
this.controller.start();
}) })
Button("stop TextClock") Button("stop TextClock")
.onClick(() => { .onClick(() => {
this.controller.stop() // Stop the text clock.
this.controller.stop();
}) })
} }
.width('100%') .width('100%')
...@@ -95,4 +97,4 @@ struct Second { ...@@ -95,4 +97,4 @@ struct Second {
} }
} }
``` ```
![](figures/text_clock.png)
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 6946212d
# TextInput # TextInput
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<TextInput>** component provides single-line text input. The **\<TextInput>** component provides single-line text input.
> **NOTE**
## Required Permissions >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
None
## Child Components ## Child Components
...@@ -20,83 +14,81 @@ Not supported ...@@ -20,83 +14,81 @@ Not supported
## APIs ## APIs
TextInput(value?:{placeholder?: string controller?: TextInputController}) TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?: [ResourceStr](ts-types.md#resourcestr8), controller?: TextInputController})
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Description |
| placeholder | string | No | - | Text displayed when there is no input. | | ----------------------- | ---------------------------------------- | ---- | --------------- |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. | | placeholder | [ResourceStr](ts-types.md#resourcestr8) | No | Text displayed when there is no input. |
| text | [ResourceStr](ts-types.md#resourcestr8) | No | Current text input. |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | Text input controller.|
## Attributes ## Attributes
In addition to universal attributes, the following attributes are supported. In addition to the universal attributes, the following attributes are supported.
| Name | Type | Default Value | Description | | Name | Type | Description |
| -------- | -------- | -------- | -------- | | ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | InputType.Normal | Input box type. | | type | InputType | Input box type.<br>Default value: **InputType.Normal** |
| placeholderColor | Color | - | Placeholder color. | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color.|
| placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **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.<br/>- **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.<br/>- **style**: font style. | | placeholderFont | [Font](ts-types.md#font) | Placeholder text style.|
| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. | | enterKeyType | EnterKeyType | How the Enter key is labeled.<br>Default value: **EnterKeyType.Done** |
| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). | | caretColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the caret in the text box. |
| maxLength | number | - | Maximum number of characters in the text input. | | maxLength | number | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | 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.<br/>- **value**: regular expression to set.<br/>- **error**: error message containing the ignored content returned when regular expression matching fails. | | inputFilter<sup>8+</sup> | {<br>value: value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br>error?: (value: string) =&gt; void<br>} | 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.<br>- **value**: regular expression to set.<br>- **error**: ignored content to return when regular expression matching fails.|
- EnterKeyType enums ## EnterKeyType
| Name | Description |
| -------- | -------- | | Name | Description |
| EnterKeyType.Go | The Enter key is labeled **Go**. | | ------------------- | --------- |
| EnterKeyType.Search | The Enter key is labeled **Search**. | | Go | The Enter key is labeled "Go." |
| EnterKeyType.Send | The Enter key is labeled **Send**. | | Search | The Enter key is labeled "Search." |
| EnterKeyType.Next | The Enter key is labeled **Next**. | | Send | The Enter key is labeled "Send." |
| EnterKeyType.Done | The Enter key is labeled **Done**. | | Next | The Enter key is labeled "Next."|
| Done | The Enter key is labeled "Done." |
- InputType enums
| Name | Description | ## InputType enums
| -------- | -------- |
| InputType.Normal | Normal input mode. | | Name | Description |
| InputType.Password | Password input mode. | | ------------------ | ------------- |
| InputType.Email | Email address input mode. | | Normal | Normal input mode. |
| InputType.Number | Digit input mode. | | Password | Password input mode. |
| Email | Email address input mode.|
| Number | Digit input mode. |
## Events
## Event
| Name | Description |
| -------- | -------- | | Name | Description |
| onChange(value: string) =&gt; void | Triggered when the input changes. | | ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. | | onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. | | onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | Triggered when the input status changes. | | onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. | | onEditChange(callback: (isEditing: boolean) =&gt; void) <sup>8+</sup> | Triggered when the input status changes. |
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. | | onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.|
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. | | onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.|
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.|
### TextInputController<sup>8+</sup>
## TextInputController<sup>8+</sup>
Implements the controller of the **\<TextInput>** component. Implements the controller of the **\<TextInput>** component.
### Objects to Import
#### Objects to Import
``` ```
controller: TextInputController = new TextInputController() controller: TextInputController = new TextInputController()
``` ```
### caretPosition
#### caretPosition
caretPosition(value: number): void caretPosition(value: number): void
Sets the position of the caret. Sets the position of the caret.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. |
| Name| Type| Mandatory| Description |
| ------ | -------- | ---- | -------------------------------------- |
| value | number | Yes | Length from the start of the string to the position where the caret is located.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 6946212d
# TextPicker # TextPicker
The **TextPicker** component allows users to scroll to select text.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;TextPicker&gt;** component allows users to select text from a list of options.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
TextPicker(value: {range: string[], selected?: number}) TextPicker(options?: {range: string[] | [Resource](ts-types.md#resource), selected?: number, value?: string})
Creates a text picker based on the selection range specified by **range**. Creates a text picker based on the selection range specified by **range**.
- Parameter **Parameters**
| 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. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](ts-types.md#resource)| Yes| Data selection range of the picker.|
| selected | number | No| Index of the selected item in the range.<br>Default value: **0**|
| value | string | No| Value of the selected item. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| defaultPickerItemHeight | Length | - | Default height of a Picker content item element. | | defaultPickerItemHeight | number \| string | Default height of an item in the picker.|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br/>- **value**: text of the selected item.<br/>- **index**: index of the selected item. | | onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>- **index**: index of the selected item.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct TextPickerExample { struct TextPickerExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 6946212d
# TextTimer # TextTimer
The **\<TextTimer>** component displays timing information and is controlled in text format.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;TextTimer&gt;** component supports custom time formats.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory| 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**.<br/>- If the value of **count** is less than or equal to 0, the default value is used.<br/>- If the value of **count** is greater than 0, it is used. | | isCountDown | boolean | No| Whether to count down.<br/>Default value: **false** |
| controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;** controller. | | count | number | No| Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.<br>If the value of **count** is less than or equal to 0, the default value is used.<br>If the value of **count** is greater than 0, it is used.<br/>Default value: **60000** |
| controller | [TextTimerController](#texttimercontroller) | No| **\<TextTimer>** controller.|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| 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 | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**.<br>Default value: **'hh:mm:ss.ms'** |
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onTimer(callback: (utc: number, elapsedTime: number) =&gt; void) | Triggered when the time text changes.<br/>**utc**: currently displayed time, in milliseconds.<br/>**elapsedTime**: elapsed time of the timer, in milliseconds. | | onTimer(event: (utc: number, elapsedTime: number) =&gt; void) | Triggered when the time text changes.<br>**utc**: currently displayed time, in milliseconds.<br>**elapsedTime**: elapsed time of the timer, in milliseconds.|
## TextTimerController ## TextTimerController
Defines the controller for controlling the **&lt;TextTimer&gt;** component. Implements the controller for controlling the **\<TextTimer>** component. A **\<TextTimer>** component can be bound to only one controller.
### Objects to Import ### Objects to Import
...@@ -64,7 +59,7 @@ Starts the timer. ...@@ -64,7 +59,7 @@ Starts the timer.
pause() pause()
Pauses the timer. Pauses the timer.
### reset ### reset
...@@ -75,8 +70,8 @@ Resets the timer. ...@@ -75,8 +70,8 @@ Resets the timer.
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct TextTimerExample { struct TextTimerExample {
...@@ -88,9 +83,9 @@ struct TextTimerExample { ...@@ -88,9 +83,9 @@ struct TextTimerExample {
TextTimer({controller: this.textTimerController}) TextTimer({controller: this.textTimerController})
.format(this.format) .format(this.format)
.fontColor(Color.Black) .fontColor(Color.Black)
.fontSize(this.textSize) .fontSize(50)
.onTimer((utc: number, elapsedTime: number) => { .onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime) console.info('textTimer notCountDown utc is: ' + utc + ', elapsedTime: ' + elapsedTime)
}) })
Row() { Row() {
Button("start").onClick(() => { Button("start").onClick(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 6946212d
# TimePicker # TimePicker
The **\<TimePicker>** component allows users to select a time from the given range. The **\<TimePicker>** component allows users to select a time from the given range.
> **NOTE**<br> > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
No
## Child Components ## Child Components
...@@ -20,34 +14,35 @@ Not supported ...@@ -20,34 +14,35 @@ Not supported
## APIs ## APIs
TimePicker(options?: TimePickerOptions) TimePicker(options?: {selected?: Date})
Creates a time picker whose default time range is from 00:00 to 23:59. Creates a time picker whose default time range is from 00:00 to 23:59.
- options parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | ---- | --------- | ------------------- | -------------------------- | | Name| Type| Mandatory| Description|
| selected | Date | No | Current system time | Time of the selected item. | | -------- | -------- | -------- | -------- |
| selected | Date | No| Time of the selected item.<br>Default value: current system time|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| --------------- | ------- | ------------- | ---------------------------------------- | | -------- | -------- | -------- |
| useMilitaryTime | boolean | false | Whether to display time in 24-hour format. The value cannot be modified dynamically. | | useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.<br>Default value: **false**|
## Events ## Events
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------- | | ---------------------------------------- | ----------- |
| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | Triggered when a time is selected. | | onChange(callback: (value: TimePickerResult ) =&gt; void) | Triggered when a time is selected.|
### TimePickerResult ### TimePickerResult
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ------------------------------------ | | ------ | ------ | ------- |
| hour | number | Hour portion of the selected time. | | hour | number | Hour portion of the selected time.|
| minute | number | Minute portion of the selected time. | | minute | number | Minute portion of the selected time.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 6946212d
# LongPressGesture # LongPressGesture
**LongPressGesture** is used to trigger a long press gesture, which requires one or more fingers with a minimum 500 ms hold-down time.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## APIs ## APIs
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number }) LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number })
**Parameters**
- Parameters | Name| Type| Mandatory| Description|
| Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- | -------- | | fingers | number | No| Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. | | repeat | boolean | No| Whether to continuously trigger the event callback.<br>Default value: **false**|
| repeat | boolean | No | false | Whether to continuously trigger the event callback. | | duration | number | No| Minimum hold-down time, in ms.<br>Default value: **500**|
| duration | number | No | 500 | Minimum hold-down time, in ms. |
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a long press gesture is recognized. | | onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a long press gesture is recognized.|
| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift. | | onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift.|
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. | | onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.|
- GestureEvent attributes related to the long press gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| repeat | boolean | Whether the event is repeated. |
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct LongPressGestureExample { struct LongPressGestureExample {
@State count: number = 0 @State count: number = 0;
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Text('LongPress onAction:' + this.count) Text('LongPress onAction:' + this.count).fontSize(28)
// Touch and hold the text with one finger to trigger the gesture event.
.gesture(
LongPressGesture({ repeat: true })
// When repeat is set to true, the event callback is triggered continuously when the gesture is detected. The triggering interval is specified by duration (500 ms by default).
.onAction((event: GestureEvent) => {
if (event.repeat) {
this.count++;
}
})
// Triggered when the long press gesture ends.
.onActionEnd(() => {
this.count = 0;
})
)
} }
.height(200).width(300).padding(60).border({ width:1 }).margin(30) .height(200)
.gesture( .width(300)
LongPressGesture({ repeat: true }) .padding(20)
// Repeatedly triggered when the long press gesture exists. .border({ width: 3 })
.onAction((event: GestureEvent) => { .margin(30)
if (event.repeat) { this.count++ }
})
// Triggered when the long press gesture ends.
.onActionEnd(() => {
this.count = 0
})
)
} }
} }
``` ```
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 6946212d
# PanGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
# PanGesture
## Required Permissions **PanGesture** is used to trigger a pan gesture, which requires a minimum 5 vp movement distance of a finger on the screen.
None > **NOTE**
>
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs ## APIs
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoptions)) PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
- Parameters ## PanDirection enums
| 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 (&amp;) and OR (\|) operations. |
| distance | number | No | 5.0 | Minimum slide recognition distance, in vp. |
- PanDirection enums | Name| Description|
| Name | Description | | -------- | -------- |
| -------- | -------- | | All | All directions.|
| All | All directions. | | Horizontal | Horizontal panning.|
| Horizontal | Horizontal slide. | | Vertical | Vertical panning.|
| Vertical | Vertical slide. | | Left | Panning to the left.|
| Left | Slide to the left. | | Right | Panning to the right.|
| Right | Slide to the right. | | Up | Panning up.|
| Up | Slide up. | | Down | Panning down.|
| Down | Slide down. | | None | Panning disabled.|
| None | Slide disabled. |
### PanGestureOptions ## PanGestureOptions
The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOptions** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed. The attributes of the pan gesture recognizer can be dynamically modified using the **PanGestureOptions** API. This avoids modifying attributes through state variables, which will cause the UI to be refreshed.
PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number }) PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number })
- Parameters **Parameters**
For details, see **PanGesture**.
See the **PanGesture** parameters.
- APIs **APIs**
| Name | Description |
| -------- | -------- | | Name| Description|
| setDirection(value: PanDirection) | Sets the direction. | | -------- | -------- |
| setDistance(value: number) | Sets the distance. | | setDirection(value: PanDirection) | Sets the direction.|
| setFingers(value: number) | Sets the number of fingers. | | setDistance(value: number) | Sets the distance.|
| setFingers(value: number) | Sets the number of fingers.|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onActionStart(callback: (event?: GestureEvent) =&gt; void) | Callback for the pan gestures reorganization event. | | onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized.|
| onActionUpdate(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when a pan gesture is recognized. | | onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated.|
| onActionEnd(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. | | onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift.|
| onActionCancel(callback: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. | | onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized.|
- GestureEvent attributes related to the pan gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| offsetX | number | Offset of the gesture event, in vp. |
| offsetY | number | Offset of the gesture event, in vp. |
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct PanGestureExample { struct PanGestureExample {
@State offsetX: number = 0 @State offsetX: number = 0;
@State offsetY: number = 0 @State offsetY: number = 0;
@State positionX: number = 0;
@State positionY: number = 0;
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right });
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) Column() {
} Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
.height(100).width(200).padding(20).border({ width: 1 }).margin(80) }
.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) .height(200)
.gesture( .width(300)
PanGesture({}) .padding(20)
.border({ width: 3 })
.margin(50)
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
// Pan left or right to trigger the gesture event.
.gesture(
PanGesture(this.panOption)
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pan start') console.info('Pan start');
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX this.offsetX = this.positionX + event.offsetX;
this.offsetY = event.offsetY this.offsetY = this.positionY + event.offsetY;
}) })
.onActionEnd(() => { .onActionEnd(() => {
console.info('Pan end') this.positionX = this.offsetX;
this.positionY = this.offsetY;
console.info('Pan end');
})
)
Button ('Set PanGesture Trigger Condition')
.onClick(() => {
// Set the pan gesture to be triggered by two fingers moving in any direction.
this.panOption.setDirection(PanDirection.All);
this.panOption.setFingers(2);
}) })
) }
} }
} }
``` ```
![en-us_image_0000001256978371](figures/en-us_image_0000001256978371.gif) **Diagrams**
Pannig to the left:
![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png)
Click Set PanGesture Trigger Condition to two fingers moving toward the lower left corner.
![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png)
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 6946212d
# PinchGesture # PinchGesture
**PinchGesture** is used to trigger a pinch gesture, which requires two to five fingers with a minimum 3 vp distance between the fingers.
> **NOTE** > **NOTE**
> >
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## APIs ## APIs
PinchGesture(options?: { fingers?: number, distance?: number }) PinchGesture(value?: { fingers?: number, distance?: number })
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. | | fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
| distance | number | No | 3.0 | Minimum recognition distance, in vp. | | distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. | | onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
| onActionUpdate((event?: GestureEvent) =&gt; void) | Callback invoked during the movement of a pinch gesture. | | onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a pinch gesture is lift. | | onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. | | onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
## GestureEvent Attributes Related to the Pinch Gesture
| 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. |
## Example ## Example
...@@ -47,28 +36,42 @@ PinchGesture(options?: { fingers?: number, distance?: number }) ...@@ -47,28 +36,42 @@ PinchGesture(options?: { fingers?: number, distance?: number })
@Entry @Entry
@Component @Component
struct PinchGestureExample { struct PinchGestureExample {
@State scaleValue: number = 1 @State scaleValue: number = 1;
@State pinchValue: number = 1;
@State pinchX: number = 0;
@State pinchY: number = 0;
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Text('PinchGesture scale:' + this.scale) Column() {
} Text('PinchGesture scale:\n' + this.scaleValue)
.height(100).width(200).padding(20).border({ width: 1 }).margin(80) Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')
.scale({ x: this.scaleValue, y: this.scaleValue, z: this.scaleValue }) }
.gesture( .height(200)
PinchGesture() .width(300)
.padding(20)
.border({ width: 3 })
.margin({ top: 100 })
.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
// The gesture event is triggered by pinching three fingers together.
.gesture(
PinchGesture({ fingers: 3 })
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pinch start') console.info('Pinch start');
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.scaleValue = event.scale this.scaleValue = this.pinchValue * event.scale;
this.pinchX = event.pinchCenterX;
this.pinchY = event.pinchCenterY;
}) })
.onActionEnd(() => { .onActionEnd(() => {
console.info('Pinch end') this.pinchValue = this.scaleValue;
console.info('Pinch end');
}) })
) )
}.width('100%')
} }
} }
``` ```
![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif) ![en-us_image_0000001174582848](figures/en-us_image_0000001174582848.png)
en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 6946212d
# RotationGesture # RotationGesture
**RotationGesture** is used to trigger a rotation gesture, which requires two to five fingers with a minimum 1-degree rotation angle.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## APIs ## APIs
RotationGesture(options?: { fingers?: number, angle?: number }) RotationGesture(value?: { fingers?: number, angle?: number })
**Parameters**
- Parameters | Name| Type| Mandatory| Description|
| Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- | -------- | | fingers | number | No| Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5.<br>Default value: **2**|
| fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. | | angle | number | No| Minimum degree that can trigger the rotation gesture.<br>Default value: **1**|
| angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. |
## Events ## Events
| Name | Description | | Parameter| Description|
| -------- | -------- | | -------- | -------- |
| onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. | | onActionStart(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when a rotation gesture is recognized.|
| onActionUpdate((event?: GestureEvent) =&gt; void) | Callback invoked during the movement of the rotation gesture. | | onActionUpdate(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for the rotation gesture is lift. | | onActionEnd(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when the finger used for the rotation gesture is lift.|
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. | | onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
- GestureEvent attributes related to the rotation gesture
| Name | Type | Description |
| -------- | -------- | -------- |
| angle | number | Rotation angle. |
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct RotationGestureExample { struct RotationGestureExample {
@State angle: number = 0 @State angle: number = 0;
@State rotateValue: number = 0;
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Text('RotationGesture angle:' + this.angle) Column() {
} Text('RotationGesture angle:' + this.angle)
.height(100).width(200).padding(20).border({ width:1 }) }
.margin(80).rotate({ x:1, y:2, z:3, angle: this.angle }) .height(200)
.gesture( .width(300)
.padding(20)
.border({ width: 3 })
.margin(80)
.rotate({ angle: this.angle })
// The gesture event is triggered by rotating with two fingers.
.gesture(
RotationGesture() RotationGesture()
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.log('Rotation start') console.info('Rotation start');
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.angle = event.angle this.angle = this.rotateValue + event.angle;
}) })
.onActionEnd(() => { .onActionEnd(() => {
console.log('Rotation end') this.rotateValue = this.angle;
console.info('Rotation end');
}) })
) )
}.width('100%')
} }
} }
``` ```
![en-us_image_0000001256858403](figures/en-us_image_0000001256858403.gif) ![en-us_image_0000001174264372](figures/en-us_image_0000001174264372.png)
en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 6946212d
# SwipeGesture # SwipeGesture
**\<SwipeGesture>** is used to implement a swipe gesture, which can be recognized when the swipe speed is 100 vp/s or higher.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## APIs ## APIs
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number }) SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
- Parameters **Parameters**
| 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). |
- SwipeDirection enums | Name| Type| Mandatory| Description|
| Name | Description | | -------- | -------- | -------- | -------- |
| -------- | -------- | | fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| All | All directions. | | direction | SwipeDirection | No| Swipe direction.<br>Default value: **SwipeDirection.All**|
| Horizontal | Horizontal direction. | | speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
| Vertical | Vertical direction. |
## SwipeDirection
## Events | Name| Description|
| Name | Description |
| -------- | -------- | | -------- | -------- |
| onAction(callback:(event?: GestureEvent) =&gt; void) | Callback invoked when a swipe gesture is recognized. | | All | All directions.|
| Horizontal | Horizontal direction. |
| Vertical | Vertical direction. |
| None | Swiping disabled.|
- GestureEvent attributes related to the swipe gesture ## Events
| Name | Type | Description |
| -------- | -------- | -------- |
| angle | number | Angle of the swipe gesture.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br/>>&nbsp;Angle calculation method: After the swipe gesture is identified, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction. Rotation angle = arctan2(cy2-cy1,cx2-cx1) - arctan2(y2-y1,x2-x1). The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees. |
| speed | number | Speed of the swipe gesture. |
![en-us_image_0000001231374559](figures/en-us_image_0000001231374661.png) | Name| Description|
| -------- | -------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct SwipeGestureExample { struct SwipeGestureExample {
@State rotateAngle : number = 0 @State rotateAngle: number = 0;
@State speed : number = 1 @State speed: number = 1;
build() { build() {
Column() { Column() {
Text("SwipGesture speed : " + this.speed) Column() {
Text("SwipGesture angle : " + this.rotateAngle) Text("SwipeGesture speed\n" + this.speed)
} Text("SwipeGesture angle\n" + this.rotateAngle)
.position({x: 80, y: 200}) }
.border({width:2}) .border({ width: 3 })
.width(260).height(260) .width(300)
.rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle}) .height(200)
.gesture( .margin(100)
SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical}) .rotate({ angle: this.rotateAngle })
// The gesture event is triggered by swiping vertically with one finger.
.gesture(
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.speed = event.speed this.speed = event.speed;
this.rotateAngle = event.angle this.rotateAngle = event.angle;
}) })
) )
}.width('100%')
} }
} }
``` ```
![en-us_image_0000001231374559](figures/en-us_image_0000001231374559.gif) ![en-us_image_0000001231374559.png](figures/en-us_image_0000001231374559.png)
en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 6946212d
# TapGesture # TapGesture
**TapGesture** is used to trigger a tap gesture with one or more taps.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## APIs ## APIs
TapGesture(options?: { count?: number, fingers?: number }) TapGesture(value?: { count?: number, fingers?: number })
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory| 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.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> 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.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> 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.<br/>> <br/>> 2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number. | | count | number | No| Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.<br>Default value: **1**<br>> **NOTE**<br>> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.|
| fingers | number | No| Number of fingers required to trigger a tap. The value ranges from 1 to 10.<br>Default value: **1**<br>> **NOTE**<br>> 1. When multi-finger is configured, the gesture will fail to be recognized if the number of fingers used for tapping is less than the configured number within 300 ms of tapping by the first finger.<br>> 2. The gesture will fail to be recognized if the number of fingers used for tapping exceeds the configured number.|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. | | onAction(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a tap gesture is recognized.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct TapGestureExample { struct TapGestureExample {
@State value: string = '' @State value: string = '';
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Text('Click twice') // The gesture event is triggered by double-tapping.
Text('Click twice').fontSize(28)
.gesture(
TapGesture({ count: 2 })
.onAction((event: GestureEvent) => {
this.value = JSON.stringify(event.fingerList[0]);
})
)
Text(this.value) Text(this.value)
} }
.height(200).width(300).padding(60).border({ width: 1 }).margin(30) .height(200)
.gesture( .width(300)
TapGesture({ count: 2 }) .padding(20)
.onAction(() => { .border({ width: 3 })
this.value = 'TapGesture onAction' .margin(30)
})
)
} }
} }
``` ```
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 6946212d
# Canvas # Canvas
The **\<Canvas>** component can be used to customize drawings.
> **NOTE** > **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Canvas&gt;** component can be used to customize drawings.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Not supported Not supported
## APIs ## APIs
Canvas(context: CanvasRenderingContext2D) Canvas(context?: CanvasRenderingContext2D)
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For details, see CanvasRenderingContext2D. |
| Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | No | - | For details, see **CanvasRenderingContext2D**.|
## Attributes ## Attributes
Universal attributes are supported. The [universal attributes](ts-universal-attributes-size.md) are supported.
## Events ## Events
In addition to universal events, the following events are supported. In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Parameter | Description |
| -------------------------------- | --------- | ----------------------------------------------- |
| onReady(callback: () =&gt; void) | None | Triggered when the canvas is ready for drawing. |
| Name | Parameter | Description |
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | - | Triggered when a canvas is ready. |
## Example
**Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -58,8 +55,8 @@ struct CanvasExample { ...@@ -58,8 +55,8 @@ struct CanvasExample {
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() => {
this.context.fillRect(0,30,100,100) this.context.fillRect(0, 30, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -67,3 +64,4 @@ struct CanvasExample { ...@@ -67,3 +64,4 @@ struct CanvasExample {
} }
} }
``` ```
![en-us_image_0000001194032666](figures/en-us_image_0000001194032666.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 6946212d
# CanvasGradient # CanvasGradient
**CanvasGradient** provides a canvas gradient object.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasGradient** provides a gradient object.
## addColorStop ## addColorStop
...@@ -14,15 +14,19 @@ addColorStop(offset: number, color: string): void ...@@ -14,15 +14,19 @@ addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color. Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
- Parameters
| 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. |
- Example **Parameters**
``` | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
**Example**
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Page45 { struct Page45 {
...@@ -37,17 +41,17 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse ...@@ -37,17 +41,17 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50,0, 300,100)
this.grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
} }}
}
``` ```
![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png) ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 6946212d
# ImageBitmap # ImageBitmap
An **ImageBitmap** object stores pixel data rendered on a canvas.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasImageData** stores pixel data rendered on a canvas.
## Attributes ## Attributes
| Name | Type | Description | | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Actual width of the rectangle on the canvas, in pixels. | | width | number | Pixel width of the **ImageBitmap** object.|
| height | number | Actual height of the rectangle on the canvas, in pixels. | | height | number | Pixel height of the **ImageBitmap** object.|
| data | &lt;Uint8ClampedArray&gt; | A one-dimensional array of color values. The values range from 0 to 255. |
**Example**
```ts
// xxx.ets
@Entry
@Component
struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_0000001194352442](figures/en-us_image_0000001194352442.png)
## Methods
### close
close()
Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API.
en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 6946212d
# ImageData # ImageData
An **ImageData** object stores pixel data rendered on a canvas.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
**ImageData** stores pixel data rendered on a canvas.
## Attributes ## Attributes
| Name | Type | Description | | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Actual width of the rectangle on the canvas, in pixels. | | width | number | Actual width of the rectangle on the canvas, in pixels.|
| height | number | Actual height of the rectangle on the canvas, in pixels. | | height | number | Actual height of the rectangle on the canvas, in pixels.|
| data | &lt;Uint8ClampedArray&gt; | A one-dimensional array of color values. The values range from 0 to 255. | | data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130);
var imagedata = this.context.getImageData(50,50,130,130);
this.context.putImageData(imagedata,150,150);
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或