Skip to content

D
Docs

lfmiao0 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 b92845bd 编写于 作者: S sienna1128
浏览文件
操作

Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/openharmony/docs... 

Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/openharmony/docs into OpenHarmony-3.1-Release

# Conflicts:
#	zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
#	zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
上级 57d4e906 577c34e6
展开全部 隐藏空白更改
内联 并排
Showing with 7291 addition and 5311 deletion
CODEOWNERS
浏览文件 @ b92845bd
......@@ -256,12 +256,12 @@ zh-cn/application-dev/reference/apis/js-apis-hidebug.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-hilog.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-hitracechain.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-hitracemeter.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-inputmethod.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-inputmethodengine.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-inputmethod.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-inputmethodengine.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-pasteboard.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-screen-lock.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-system-time.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-wallpaper.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-screen-lock.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-system-time.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-wallpaper.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-timer.md @HelloCrease
zh-cn/application-dev/reference/apis/js-apis-battery-info.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-brightness.md @sun-yue14
......
en/application-dev/reference/apis/js-apis-data-storage.md
浏览文件 @ b92845bd
......@@ -3,13 +3,10 @@
Lightweight storage provides applications with data processing capability and allows applications to perform lightweight data storage and query. Data is stored in key-value (KV) pairs. Keys are of the string type, and values can be of the number, string, or Boolean type.
> **NOTE**<br/>
> **NOTE**
>
> - The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> - The APIs of this module are no longer maintained since API Version 9. You are advised to use [`@ohos.data.preferences`](js-apis-data-preferences.md).
>
> - The APIs of this module can be used only in the FA model.
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
......
en/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ b92845bd
......@@ -4,9 +4,9 @@ The **\<svg>** component is a basic container. It can be used as the root node o
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
## Required Permissions
......@@ -15,21 +15,21 @@ None
## Child Components
The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animateTransform.md).
The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | No| Unique ID of the component.|
| width | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component width.|
| height | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component height.|
| x | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | &lt;length&gt;\|&lt;percentage&gt; | | No| Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| viewBox | string | - | No| View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
| Name | Type | Default Value | Mandatory | Description |
| ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- |
| id | string | - | No | Unique ID of the component. |
| width | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component width. |
| height | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component height. |
| x | &lt;length&gt;\|&lt;percentage&gt; | - | No | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | &lt;length&gt;\|&lt;percentage&gt; | | No | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| viewBox | string | - | No | View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
## Example
......
en/application-dev/reference/arkui-ts/Readme-EN.md
浏览文件 @ b92845bd
# TypeScript-based Declarative Development Paradigm
# eTS-based Declarative Development Paradigm
- Universal Component Information
- Universal Events
......@@ -120,12 +120,13 @@
- Canvas Components
- [Canvas](ts-components-canvas-canvas.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)
- [ImageBitmap](ts-components-canvas-imagebitmap.md)
- [ImageData](ts-components-canvas-imagedata.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- Animation
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animation](ts-explicit-animation.md)
......@@ -136,8 +137,9 @@
- [Motion Path Animation](ts-motion-path-animation.md)
- [Matrix Transformation](ts-matrix-transformation.md)
- [Interpolation Calculation](ts-interpolation-calculation.md)
- Global UI Methods
- Pop-up Window
- Dialog Box
- [Alert Dialog Box](ts-methods-alert-dialog-box.md)
- [Action Sheet](ts-methods-action-sheet.md)
- [Custom Dialog Box](ts-methods-custom-dialog-box.md)
......
en/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ b92845bd
# 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**
>
> 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 |
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| 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. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
**Parameters**
| Name | Type | Mandatory | Description |
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
| duration | number | No | Animation duration, in ms.<br>Default value: **1000**|
| 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
......
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ b92845bd
......@@ -54,14 +54,14 @@
## MouseButton
| Name | Description |
| ------- | ---------------- |
| Left | Left button on the mouse. |
| Right | Right button on the mouse. |
| Middle | Middle button on the mouse. |
| Back | Back button on the left of the mouse.|
| Forward | Forward button on the left of the mouse.|
| None | No button. |
| Name | Description |
| ------- | ---------------------------------------- |
| Left | Left button on the mouse. |
| Right | Right button on the mouse. |
| Middle | Middle button on the mouse. |
| Back | Back button on the left of the mouse. |
| Forward | Forward button on the left of the mouse. |
| None | No button. |
## MouseAction
......
en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ b92845bd
# 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.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## 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.
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| group | string | No| - | Group name.|
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| group | string | No| Group name.|
## Attributes
| Name| Type| Default Value| Description|
| Name| Type| Default Value | Description|
| -------- | -------- | -------- | -------- |
| selectAll | bool | false | Whether to select all.|
| selectedColor | Color | - | Color of the selected check box.|
| selectAll | boolean | false | Whether to select all. |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Color of the selected check box.|
## Events
| Name| Description|
| -------- | -------- |
| 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
onChange (callback: (event: CheckboxGroupResult ) => void )
- SelectStatus enums
| 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.|
Triggered when the selection status of the check box group or any check box wherein changes.
| Name | Type | Mandatory | Description |
| ----- | ------------------- | --------- | ----------------------------------- |
| event | CheckboxGroupResult | Yes | Callback used to return the result. |
## 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
```
```ts
// xxx.ets
@Entry
@Component
struct CheckboxExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ b92845bd
# 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.
Data gauge chart widget, which is used to display data in a ring chart.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## APIs
Gauge(value:{value: number, min?: number, max?: number})
Gauge(options:{value: number, min?: number, max?: number})
- Parameter
| 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. |
**Parameters**
| 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
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| value | number | 0 | Sets the value of the current data chart. |
| startAngle | Angle | -150 | Set the start angle. Clock 0 indicates 0 degree, and the clockwise direction indicates the positive angle. |
| endAngle | Angle | 150 | Sets the end angle position. The clock 0 point is 0 degree, and the clockwise direction is the positive angle. |
| colors | Color \| Array&lt;ColorStop&gt; | - | Set the color of the chart. You can set the pure color or segmental gradient color. |
| strokeWidth | Length | - | Sets the ring thickness of a ring chart. |
| Name| Type| Description|
| -------- | -------- | -------- |
| value | number | Value of the chart.<br>Default value: **0**|
| 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 | 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 | Array&lt;ColorStop&gt; | Colors of the chart. Colors can be set for individual segments.|
| 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
```
```ts
// xxx.ets
@Entry
@Component
struct GaugeExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ b92845bd
# 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
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).
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
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).
## Child Components
......@@ -31,37 +19,38 @@ Not supported
Image(src: string | PixelMap | Resource)
Obtains an image from the specified source for subsequent rendering and display.
**Parameters**
| 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.|
| 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.<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
| Name | Type | Default Value | Description |
| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
| 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 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. |
| 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. |
| 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.|
| 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. 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.|
| 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. |
| Name | Type | Default Value | Description |
| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](ts-types.md#resource) | - | Placeholder image displayed during loading. Only local images are supported. |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale mode. |
| 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. |
| 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.|
| 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. |
| 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. |
| 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. |
> **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
| Name | Description |
| ------ | ------------------------- |
| 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.|
| Name | Description |
| ------ | ------------------------ |
| None | Interpolation image data is not used. |
| 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. |
| 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.
## Events
| 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 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.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels. |
| 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. |
| 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. |
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading. |
| 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.|
## Example
......@@ -281,3 +269,53 @@ struct ImageExample3 {
```
![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
浏览文件 @ b92845bd
# 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.
> **NOTE**
>
> 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
Not supported
......@@ -25,17 +22,16 @@ ImageAnimator()
## Attributes
| 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. |
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.|
| 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.|
| 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.|
| 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.|
| 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; | [] | 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. |
| 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. |
| 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. |
| 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. |
## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ b92845bd
# LoadingProgress
> ![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 **\<LoadingProgress>** component is used to display the loading progress.
The **\<LoadingProgress>** component is used to create a loading animation.
## 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
None
Not supported
## APIs
LoadingProgress()
Creates a **LoadingProgress** instance.
Creates a **\<LoadingProgress>** component.
## Attributes
| Name | Type | Default Value | Description |
| ----- | ----- | ------------- | ---------------------------------------- |
| color | Color | - | Foreground color of the loading progress bar. |
| Name| Type| Description|
| -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor8) | Foreground color of the **\<LoadingProgress>** component.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
......@@ -41,4 +40,4 @@ struct LoadingProgressExample {
}
```
![zh-cn_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file
![en-us_image_000000111864201](figures/en-us_image_000000111864201.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ b92845bd
# 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**
>
> 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
None
......@@ -23,23 +22,28 @@ Not supported
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| start | boolean | Yes| - | Whether to start scrolling.|
| 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.|
| fromStart | boolean | No| true | Whether the text scrolls from the start.|
| src | string | Yes| - | Text to scroll.|
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| start | boolean | Yes| - | Whether to start scrolling.|
| 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.|
| fromStart | boolean | No| true | Whether the text scrolls from the start.|
| src | string | Yes| - | Text to scroll.|
## Attributes
| Name | Type| Default Value | Description |
| ---------- | -------- | ------------------------------------ | ------------------------------------ |
| allowScale | boolean | false | Whether to allow text to scale. |
## Events
| Name| Description|
| -------- | -------- |
| onStart(callback:&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.|
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.|
| onStart(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.|
| onBounce(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.|
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.|
## Example
......@@ -84,7 +88,7 @@ struct MarqueeExample {
Button('start')
.onClick(() => {
this.start = true
})
})
.width(200)
.height(60)
.margin({bottom:20})
......
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ b92845bd
# 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.
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
Supported
......@@ -24,56 +18,58 @@ Navigation()
Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| title | string \| [CustomBuilder](../../ui/ts-types.md) | - | Page title. |
| 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. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md) | - | 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. |
| hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideBackButton | boolean | false | Whether to hide the back button. |
- NavigationMenuItem attributes
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | Text of an option on the menu bar. |
| icon | string | No | - | Icon path of an option on the menu bar. |
| action | () =&gt; void | No | - | Callback invoked when an option is selected. |
- Object attributes
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | Text of an option on the toolbar. |
| icon | string | No | - | Icon path of an option on the toolbar. |
| action | () =&gt; void | No | - | Callback invoked when an option is selected. |
- NavigationTitleMode enums
| Name | Description |
| -------- | -------- |
| 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). |
| Full | The mode is fixed at full mode (main title and subtitle). |
> **NOTE**
> Currently, only the scrollable component **&lt;List&gt;** is supported.
| Name | Type | Description |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Page title. |
| subtitle | string | Subtitle 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 | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
| toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: all items on 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 | Whether to hide the title bar.<br>Default value: **false** |
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false** |
## NavigationMenuItem
| Name | Type | Mandatory| Description |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | Yes | Text of a menu item. |
| icon | string | No | Icon path of a menu item.|
| action | () =&gt; void | No | Callback invoked when a menu item is selected. |
## object
| Name | Type | Mandatory| Description |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | Yes | Text of an option on the toolbar. |
| icon | string | No | Icon path of an option on the toolbar.|
| action | () =&gt; void | No | Callback invoked when an option is selected. |
## NavigationTitleMode
| Name | Description |
| ---- | ---------------------------------------- |
| 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.|
| Mini | The icon, main title, and subtitle are in mini mode. |
| Full | The main title and subtitle are in full mode. |
> **NOTE**
>
> Currently, the scrollable component can only be **\<List>**.
## Events
| 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. |
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
## Example
```
```ts
// Example 01
@Entry
@Component
......@@ -161,8 +157,7 @@ struct NavigationExample {
![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif)
```
```ts
// Example 02
@Entry
@Component
......
en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ b92845bd
# 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.
The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
## Required Permissions
None
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
......@@ -21,40 +14,50 @@ Not supported
## 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
| 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. |
**Parameters**
| 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
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| value | number | - | Current progress. |
| color | Color | - | Background color of the progress bar. |
| 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. |
| Name| Type| Description|
| -------- | -------- | -------- |
| value | number | Current progress.|
| color | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the progress indicator.|
| 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
```ts
// xxx.ets
@Entry
......
en/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ b92845bd
# 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.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## APIs
Radio(options: {value: string, group: string})
- 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.|
**Parameters**
| 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
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| checked | boolean | false | Whether the radio button is selected.|
| Name| Type| Description|
| -------- | -------- | -------- |
| checked | boolean | Whether the radio button is selected.<br>Default value: **false**|
## 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
```
```ts
// xxx.ets
@Entry
@Component
struct RadioExample {
......@@ -55,8 +50,8 @@ struct RadioExample {
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
.height(50)
.width(50)
.onChange((value: boolean) => {
console.log('Radio1 status is ' + value)
.onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + isChecked)
})
}
Column() {
......@@ -64,8 +59,8 @@ struct RadioExample {
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((value: boolean) => {
console.log('Radio2 status is ' + value)
.onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + isChecked)
})
}
Column() {
......@@ -73,8 +68,8 @@ struct RadioExample {
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((value: boolean) => {
console.log('Radio3 status is ' + value)
.onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + isChecked)
})
}
}.padding({ top: 30 })
......
en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ b92845bd
......@@ -6,10 +6,6 @@ The **\<RichText>** component parses and displays HTML text.
>
> 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
Not supported
......@@ -20,64 +16,67 @@ RichText(content:string)
**Parameters**
| Name| Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| content | string | Yes| - | Text string in HTML format. |
| Name| Type| Mandatory | Description|
| ------- | -------- | ------------- | -------- |
| content | string | Yes | String in HTML format.|
## Events
| Name | Description|
| Name| Description|
| -------- | -------- |
| onStart(callback: () => void) => void | Triggered when web page loading starts. |
| onComplete(callback: () => void) => void | Triggered when web page loading is completed. |
| onStart(callback: () => void) | Triggered when web page loading starts. |
| onComplete(callback: () => void) | Triggered when web page loading is completed.|
## Supported Tags
| Name | Description | Example |
| Name| Description| Example|
| -------- | -------- | -------- |
| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading. | \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2> |
| \<p>\</p> | Defines a paragraph. | \<p>This is a paragraph\</p> |
| \<br/> | Inserts a newline character. | \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. | \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time. | \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
| \<i>\</i> | Displays text in italic style. | \<i>This is in italic style\</i> |
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink. | \<p>\<u>This is an underlined paragraph\<u>\<p> |
| \<style>\</style> | Used to embed CSS within an HTML document. | \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**. | \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading.| \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2>|
| \<p>\</p> | Defines a paragraph.| \<p>This is a paragraph\</p>|
| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i>|
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
## Example
You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
```ts
// xxx.ets
@Entry
@Component
struct RichTextExample {
@State data: string = "<h1 style='text-align: center;'>h1 heading</h1>" +
"<h1 style='text-align: center;'><i>h1 italic</i></h1>" +
"<h1 style='text-align: center;'><u>h1 underlined</u></h1>" +
"<h2 style='text-align: center;'>h2 heading</h2>" +
"<h3 style='text-align: center;'>h3 heading</h3>" +
"<p style='text-align: center;'>Regular paragraph</p><hr/>" +
"<div style='width: 500px;height: 500px;border: 1px solid;margin: 0auto;'>" +
"<p style='font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)'>Font size: 35px; line height: 45px</p>" +
"<p style='background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;'>" +
"<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>"
@State data: string = '<h1 style="text-align: center;">h1 heading</h1>' +
'<h1 style="text-align: center;"><i>h1 italic</i></h1>' +
'<h1 style="text-align: center;"><u>h1 underlined</u></h1>' +
'<h2 style="text-align: center;">h2 heading</h2>' +
'<h3 style="text-align: center;">h3 heading</h3>' +
'<p style="text-align: center;">Regular paragraph</p><hr/>' +
'<div style="width: 500px;height: 500px;border: 1px solid;margin: 0auto;">' +
'<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">Font size: 35px; line height: 45px</p>' +
'<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
'<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>';
build() {
Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }){
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
RichText(this.data)
.onStart(()=>{
console.info("RichText onStart")
})
.onComplete(()=>{
console.info("RichText onComplete")
})
.onStart(() => {
console.info('RichText onStart');
})
.onComplete(() => {
console.info('RichText onComplete');
})
}
}
}
```
![richText](figures/richText.png)
en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ b92845bd
......@@ -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.
## Required Permissions
None
## Child Components
......@@ -22,20 +18,20 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
**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.|
| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.|
| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.|
| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state. |
> **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.
## ScrollBarDirection
| Name| Description|
| -------- | -------- |
| Vertical | Vertical scrollbar.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ b92845bd
......@@ -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.
## Required Permissions
None
## Child Components
Not supported
......@@ -20,32 +16,31 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
**Parameters**
| Name | Type | Mandatory | Description |
| ----------- | ---------------- | ---- | ---------------------------------------- |
| value | string | No | Text input in the search text box. |
| 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.|
| controller | SearchController | No | Controller. |
| Name | Type | Mandatory| Description |
| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
| value | string | No | Text input in the search text box. |
| 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.|
| controller | SearchController | No | Controller. |
## Attributes
| Name | Type | Description |
| ----------------------- | ---------------------------------------- | --------------------- |
| 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. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. |
| textFont | [Font](ts-types.md#font) | Text font for the search text box. |
| Name | Type | Description |
| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
| 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. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. |
| textFont | [Font](ts-types.md#font) | Text font for the search text box. |
## Events
| 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. |
| 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. |
| 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. |
| 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.|
| 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. |
| 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. |
## SearchController
......@@ -63,11 +58,9 @@ Sets the position of the caret.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ----------------- |
| value | number | Yes | Length from the start of the character string to the position where the caret is located.|
| Name| Type| Mandatory| Description |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | Yes | Length from the start of the character string to the position where the caret is located.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ b92845bd
# 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.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## APIs
Select(options: Array\<SelectOption>\)
Select(options: Array\<SelectOption\>)
- SelectOption parameters
**SelectOption**
| Name| Type| Mandatory| Default Value| Description|
| ------ | ----------------------------------------------- | ---- | ------ | -------------- |
| value | [ResourceStr](../../ui/ts-types.md) | 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.|
| Name| Type | Mandatory| Description |
| ------ | ----------------------------------- | ---- | -------------- |
| value | [ResourceStr](ts-types.md#resourcestr8) | Yes | Value 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
| Name| Type| Default Value| Description|
| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- |
| 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.|
| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.|
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 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.|
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | 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.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 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.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.|
| 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**.|
| value | string | Text of the drop-down button. |
| font | [Font](ts-types.md#font) | Text font of the drop-down button. |
| fontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the drop-down button. |
| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected option in the drop-down list box. |
| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. |
| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the selected 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](ts-types.md#font) | Text font 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
| 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.|
| Name | Description |
| ---------------------------------------------------------- | ------------------------------------------------------------ |
| 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
```
```ts
// xxx.ets
@Entry
@Component
struct SelectExample {
......@@ -61,7 +60,7 @@ struct SelectExample {
.font({size: 30, weight:400, 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 })
.onSelecte((index:number)=>{
.onSelect((index:number)=>{
console.info("Select:" + index)
})
}
......
en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ b92845bd
# 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.
The *\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
## Required Permissions
None
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
......@@ -21,59 +14,64 @@ Not supported
## 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 | Default Value | Description |
| ---------------------- | --------------------------------------- | --------- | ------------------ | ---------------------------------------- |
| value | number | No | 0 | Current progress. |
| min | number | No | 0 | Minimum value. |
| max | number | No | 100 | Maximum value. |
| step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. |
| style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. |
| direction<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 | false | Whether the slider values are reversed. |
| Name | Type | Mandatory| Description |
| ---------------------- | --------------------------------- | ---- | ------------------------------------------------------------ |
| value | number | No | Current progress.<br>Default value: **0** |
| min | number | No | Minimum value.<br>Default value: **0** |
| max | number | No | Maximum value.<br>Default value: **100** |
| step | number | No | Step of the slider.<br>Default value: **1** |
| style | SliderStyle | No | Style of the slider.<br>Default value: **SliderStyle.OutSet** |
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No | Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**|
| 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**|
- SliderStyle enums
| Name | Description |
| ------ | --------------------------------- |
| OutSet | The slider is on the slider rail. |
| InSet | The slider is in the slider rail. |
## SliderStyle
| Name | Description |
| ------ | ------- |
| OutSet | The slider is on the slider rail.|
| InSet | The slider is in the slider rail.|
## Attributes
Touch target configuration is not supported.
| Name | Type | Default Value | Description |
| ------------- | ------- | ------------- | ---------------------------------------- |
| blockColor | Color | - | Color of the slider. |
| trackColor | Color | - | Background color of the slider. |
| selectedColor | Color | - | Color of the slider rail that has been slid. |
| showSteps | boolean | false | Whether to display the current step. |
| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. |
| Name | Type | Description |
| ------------- | ------- | ----------------- |
| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider. |
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the slider. |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider rail that has been slid. |
| showSteps | boolean | Whether to display the current step.<br>Default value: **false**|
| 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
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 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Callback invoked when the slider slides.<br/>**value**: current progress.<br/>**mode**: dragging state. |
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 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
| 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. |
## 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.|
| Click | 3 | The user moves the slider by touching the slider rail.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct SliderExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ b92845bd
# Span
The **\<Span>** component is used to display inline text in the **\<Text>** component.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> 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
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## 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
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 |
| -------- | -------- | -------- | -------- |
| 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. |
| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. |
| Name| Type| Description|
| -------- | -------- | -------- |
| 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>} |
| letterSpacing | number \| string | Letter spacing. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **Normal** |
## 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**
> 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.
> **NOTE**
>
> As the **\<Span>** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct SpanExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ b92845bd
......@@ -2,16 +2,11 @@
The **\<Text>** component is used to display a piece of textual information.
> **NOTE**
> **NOTE**<br/>
>
> 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
This component can contain the [\<Span>](ts-basic-components-span.md) child component.
......@@ -22,34 +17,38 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp
Text(content?: string | Resource)
**Parameters**
| 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
| Name| Type| Description|
| -------- | -------- | -------- |
| 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. |
| 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. |
| 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. |
| letterSpacing | number \| string | Letter spacing. |
| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum 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** |
> **NOTE**
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description |
| ----------------------- | ----------------------------------- | ------------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the 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: TextOverflow.Clip}**<br>**NOTE**<br/>Text is clipped at the transition between words. To clip 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**<br>**NOTE**<br/>By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.|
| 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#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: **{<br>type: TextDecorationType.None,<br>color: Color.Black<br>}** |
| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**. |
| letterSpacing | number \| string | Letter spacing. |
| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum 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**|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>Default value: **CopyOptions.None**|
> **NOTE**<br/>
>
> The **\<Text>** component cannot contain both the text and the child component **\<Span>**. If both of them exist, only the content in **\<Span>** is displayed.
## Example
### Example 1
Examples of using **textAlign**, **textOverflow**, **maxLines**, and **lineHeight**
```ts
// xxx.ets
@Entry
......@@ -57,77 +56,184 @@ Text(content?: string | Resource)
struct TextExample1 {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text with the line height set This is the text with the line height set This is the text with the line height set.')
.lineHeight(25).fontSize(12).border({ width: 1 }).padding(10)
// Set the horizontal alignment mode for the text.
// Single-line text
Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
Text('TextAlign set to Center.')
.textAlign(TextAlign.Center)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('TextAlign set to Start.')
.textAlign(TextAlign.Start)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('TextAlign set to End.')
.textAlign(TextAlign.End)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// Multi-line text
Text('This is the text content with textAlign set to Center.')
.textAlign(TextAlign.Center)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with textAlign set to Start.')
.textAlign(TextAlign.Start)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with textAlign set to End.')
.textAlign(TextAlign.End)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('TextOverflow').fontSize(9).fontColor(0xCCCCCC)
Text('This is the setting of textOverflow to none text content This is the setting of textOverflow to none text content.')
// Set the display mode when the text is too long.
Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
// Clip the text when the value of maxLines is exceeded.
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
.textOverflow({ overflow: TextOverflow.None })
.fontSize(12).border({ width: 1 }).padding(10)
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.')
.textOverflow({ overflow: TextOverflow.Clip })
.maxLines(1).fontSize(12).border({ width: 1 }).padding(10)
Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('').join('\u200B'))
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
// Show an ellipsis (...) when the value of maxLines is exceeded.
Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
.join('\u200B'))
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1).fontSize(12).border({ width: 1 }).padding(10)
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
Text('decoration').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with the decoration set to Underline and the color set to Red.')
.decoration({ type: TextDecorationType.Underline, color: Color.Red })
.fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text with the line height set. This is the text with the line height set.')
.fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text content with the decoration set to Overline and the color set to Red.')
.decoration({ type: TextDecorationType.Overline, color: Color.Red })
Text('This is the text with the line height set. This is the text with the line height set.')
.fontSize(12).border({ width: 1 }).padding(10)
.lineHeight(20)
}.height(600).width(350).padding({ left: 35, right: 35, top: 35 })
}
}
```
![textExp1](figures/textExp1.png)
![en-us_image_0000001257138337](figures/en-us_image_0000001257138337.gif)
### Example 2
Example of using **decoration**, **baselineOffset**, **letterSpacing**, and **textCase**:
```ts
// xxx.ets
@Entry
@Component
struct TextExample2 {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Text('decoration').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
.decoration({
type: TextDecorationType.LineThrough,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with the decoration set to Overline and the color set to Red.')
.decoration({
type: TextDecorationType.Overline,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with the decoration set to Underline and the color set to Red.')
.decoration({
type: TextDecorationType.Underline,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// Set the text baseline offset.
Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with baselineOffset 0.')
.baselineOffset(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with baselineOffset 30.')
.baselineOffset(30)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with baselineOffset -20.')
.baselineOffset(-20)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// Set the letter spacing.
Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with letterSpacing 3.')
.letterSpacing(3)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with letterSpacing -1.')
.letterSpacing(-1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('textCase').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with textCase set to Normal.')
.textCase(TextCase.Normal)
.fontSize(12).border({ width: 1 }).padding(10).width('100%')
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// Display the text in lowercase.
Text('This is the text content with textCase set to LowerCase.')
.textCase(TextCase.LowerCase)
.fontSize(12).border({ width: 1 }).padding(10).width('100%')
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// Display the text in uppercase.
Text('This is the text content with textCase set to UpperCase.')
.textCase(TextCase.UpperCase)
.fontSize(12).border({ width: 1 }).padding(10)
Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with textAlign set to Center.')
.textAlign(TextAlign.Center)
.fontSize(12).border({ width: 1 }).padding(10).width('100%')
Text('This is the text content with textAlign set to Start.')
.textAlign(TextAlign.Start)
.fontSize(12).border({ width: 1 }).padding(10).width('100%')
Text('This is the text content with textAlign set to End.')
.textAlign(TextAlign.End)
.fontSize(12).border({ width: 1 }).padding(10).width('100%')
Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with baselineOffset set to 10.')
.baselineOffset(10).fontSize(12).border({ width: 1 }).padding(10).width('100%')
Text('This is the text content with baselineOffset set to 30.')
.baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%')
Text('This is the text content with baselineOffset set to -10.')
.baselineOffset(-10).fontSize(12).border({ width: 1 }).padding(10).width('100%')
}.height(700).width(350).padding({ left: 35, right: 35, top: 35 })
}
}
```
![en-us_image_0000001257058391](figures/en-us_image_0000001257058391.gif)
![textExp1](figures/textExp2.png)
en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ b92845bd
# TextArea
The **\<TextArea>** component provides multi-line text input and responds to certain input events.
The **\<TextArea>** component provides multi-line text input.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
......@@ -23,34 +18,33 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| 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> | [TextAreaController](#textareacontroller8) | No | - | Text area controller.|
| Name | Type | Mandatory | Description |
| ----------------------- | ---------------------------------------- | ---- | -------------- |
| 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> | [TextAreaController](#textareacontroller8) | No | Text area controller.|
## Attributes
In addition to universal attributes, 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.|
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| 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
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| 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.|
| 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.|
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 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.|
| 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.|
## TextAreaController<sup>8+</sup>
......@@ -60,7 +54,6 @@ Defines the controller for controlling the **\<TextArea>** component.
```
controller: TextAreaController = new TextAreaController()
```
### caretPosition<sup>8+</sup>
......@@ -71,9 +64,9 @@ Sets the position of the caret.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | Yes | - | Length from the start of the 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
......
en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ b92845bd
......@@ -18,8 +18,8 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| 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 |
| controller | [TextClockController](#textclockcontroller) | No | Controller to control the status of the **<TextClock\>** component. |
| 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.|
## Attributes
......@@ -27,24 +27,24 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| 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
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 |
| -------------------------------------------- | ------------------------------------------------------------ |
| 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
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
```ts
controller: TextClockController = new TextClockController()
controller: TextClockController = new TextClockController();
```
### start
......@@ -59,35 +59,37 @@ stop()
Stops the **<TextClock\>** component.
## Example
```ts
@Entry
@Component
struct Second {
@State accumulateTime: number = 0
controller: TextClockController = new TextClockController()
@State accumulateTime: number = 0;
// Objects to import
controller: TextClockController = new TextClockController();
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime)
.fontSize(20)
// Display the system time in 12-hour format for the UTC+8 time zone, accurate to seconds.
TextClock({ timeZoneOffset: -8, controller: this.controller })
.format('hms')
.onDateChange((value: number) => {
this.accumulateTime = value
this.accumulateTime = value;
})
.margin(20)
.fontSize(30)
Button("start TextClock")
.margin({ bottom: 10 })
.onClick(() => {
this.controller.start()
// Start the text clock.
this.controller.start();
})
Button("stop TextClock")
.onClick(() => {
this.controller.stop()
// Stop the text clock.
this.controller.stop();
})
}
.width('100%')
......@@ -95,4 +97,4 @@ struct Second {
}
}
```
![](figures/text_clock.png)
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ b92845bd
# 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.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
......@@ -20,83 +14,81 @@ Not supported
## APIs
TextInput(value?:{placeholder?: string controller?: TextInputController})
TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?: [ResourceStr](ts-types.md#resourcestr8), controller?: TextInputController})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| placeholder | string | No | - | Text displayed when there is no input. |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
**Parameters**
| Name | Type | Mandatory | Description |
| ----------------------- | ---------------------------------------- | ---- | --------------- |
| 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
In addition to universal attributes, the following attributes are supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| type | InputType | InputType.Normal | Input box type. |
| placeholderColor | Color | - | Placeholder 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. |
| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
| 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. |
- EnterKeyType enums
| Name | Description |
| -------- | -------- |
| EnterKeyType.Go | The Enter key is labeled **Go**. |
| EnterKeyType.Search | The Enter key is labeled **Search**. |
| EnterKeyType.Send | The Enter key is labeled **Send**. |
| EnterKeyType.Next | The Enter key is labeled **Next**. |
| EnterKeyType.Done | The Enter key is labeled **Done**. |
- InputType enums
| Name | Description |
| -------- | -------- |
| InputType.Normal | Normal input mode. |
| InputType.Password | Password input mode. |
| InputType.Email | Email address input mode. |
| InputType.Number | Digit input mode. |
## Events
| 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. |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</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. |
| 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>
In addition to the universal attributes, the following attributes are supported.
| Name | Type | Description |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | Input box type.<br>Default value: **InputType.Normal** |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color.|
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style.|
| enterKeyType | EnterKeyType | How the Enter key is labeled.<br>Default value: **EnterKeyType.Done** |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the caret in the text box. |
| maxLength | number | Maximum number of characters in the text input. |
| 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
| Name | Description |
| ------------------- | --------- |
| Go | The Enter key is labeled "Go." |
| Search | The Enter key is labeled "Search." |
| Send | The Enter key is labeled "Send." |
| Next | The Enter key is labeled "Next."|
| Done | The Enter key is labeled "Done." |
## InputType enums
| Name | Description |
| ------------------ | ------------- |
| Normal | Normal input mode. |
| Password | Password input mode. |
| Email | Email address input mode.|
| Number | Digit input mode. |
## Event
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (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. |
| onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback: (isEditing: boolean) =&gt; void) <sup>8+</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.|
| 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>
Implements the controller of the **\<TextInput>** component.
#### Objects to Import
### Objects to Import
```
controller: TextInputController = new TextInputController()
```
#### caretPosition
### caretPosition
caretPosition(value: number): void
Sets the position of the caret.
- 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. |
**Parameters**
| Name| Type| Mandatory| Description |
| ------ | -------- | ---- | -------------------------------------- |
| value | number | Yes | Length from the start of the string to the position where the caret is located.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ b92845bd
# TextPicker
The **TextPicker** component allows users to scroll to select text.
> ![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 **&lt;TextPicker&gt;** component allows users to select text from a list of options.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## 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**.
- Parameter
| 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. |
**Parameters**
| 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
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| defaultPickerItemHeight | Length | - | Default height of a Picker content item element. |
| Name| Type| Description|
| -------- | -------- | -------- |
| defaultPickerItemHeight | number \| string | Default height of an item in the picker.|
## 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
```
```ts
// xxx.ets
@Entry
@Component
struct TextPickerExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ b92845bd
# TextTimer
The **\<TextTimer>** component displays timing information and is controlled in text format.
> ![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 **&lt;TextTimer&gt;** component supports custom time formats.
## Required Permissions
None
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
None
Not supported
## APIs
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| isCountDown | boolean | No | false | Whether to count down. |
| count | number | No | 60000 | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.<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. |
| controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;** controller. |
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isCountDown | boolean | No| Whether to count down.<br/>Default value: **false** |
| 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
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
| Name| Type| Description|
| -------- | -------- | -------- |
| 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
| 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
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
......@@ -64,7 +59,7 @@ Starts the timer.
pause()
Pauses the timer.
Pauses the timer.
### reset
......@@ -75,8 +70,8 @@ Resets the timer.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct TextTimerExample {
......@@ -88,9 +83,9 @@ struct TextTimerExample {
TextTimer({controller: this.textTimerController})
.format(this.format)
.fontColor(Color.Black)
.fontSize(this.textSize)
.fontSize(50)
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
console.info('textTimer notCountDown utc is: ' + utc + ', elapsedTime: ' + elapsedTime)
})
Row() {
Button("start").onClick(() => {
......
en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ b92845bd
# TimePicker
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.
## Required Permissions
No
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
......@@ -20,34 +14,35 @@ Not supported
## APIs
TimePicker(options?: TimePickerOptions)
TimePicker(options?: {selected?: Date})
Creates a time picker whose default time range is from 00:00 to 23:59.
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | ---- | --------- | ------------------- | -------------------------- |
| selected | Date | No | Current system time | Time of the selected item. |
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| selected | Date | No| Time of the selected item.<br>Default value: current system time|
## Attributes
| Name | Type | Default Value | Description |
| --------------- | ------- | ------------- | ---------------------------------------- |
| useMilitaryTime | boolean | false | Whether to display time in 24-hour format. The value cannot be modified dynamically. |
| Name| Type| Description|
| -------- | -------- | -------- |
| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.<br>Default value: **false**|
## Events
| Name | Description |
| ---------------------------------------- | ---------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | Triggered when a time is selected. |
| Name | Description |
| ---------------------------------------- | ----------- |
| onChange(callback: (value: TimePickerResult ) =&gt; void) | Triggered when a time is selected.|
### TimePickerResult
| Name | Type | Description |
| ------ | ------ | ------------------------------------ |
| hour | number | Hour portion of the selected time. |
| minute | number | Minute portion of the selected time. |
| Name | Type | Description |
| ------ | ------ | ------- |
| hour | number | Hour portion of the selected time.|
| minute | number | Minute portion of the selected time.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ b92845bd
# 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**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
> **NOTE**
>
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number })
**Parameters**
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
| repeat | boolean | No | false | Whether to continuously trigger the event callback. |
| duration | number | No | 500 | Minimum hold-down time, in ms. |
| Name| Type| Mandatory| 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**|
| repeat | boolean | No| Whether to continuously trigger the event callback.<br>Default value: **false**|
| duration | number | No| Minimum hold-down time, in ms.<br>Default value: **500**|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onAction((event?: GestureEvent) =&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. |
| 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. |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a long press gesture is recognized.|
| 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.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct LongPressGestureExample {
@State count: number = 0
@State count: number = 0;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('LongPress onAction:' + this.count)
Column() {
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)
.gesture(
LongPressGesture({ repeat: true })
// Repeatedly triggered when the long press gesture exists.
.onAction((event: GestureEvent) => {
if (event.repeat) { this.count++ }
})
// Triggered when the long press gesture ends.
.onActionEnd(() => {
this.count = 0
})
)
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(30)
}
}
```
......
en/application-dev/website.md
浏览文件 @ b92845bd
此差异已折叠。
en/website.md
浏览文件 @ b92845bd
此差异已折叠。
zh-cn/application-dev/Readme-CN.md
浏览文件 @ b92845bd
此差异已折叠。
zh-cn/application-dev/website.md
浏览文件 @ b92845bd
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或