Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“525b9fa886e1ff70f88ba6e6d75534ba8d6e2391”上不存在“test/compiler/intrinsics/mathexact/LoadTest.java”
未验证 提交 189e2c38 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9566 翻译完成 8162/9424/9092 

Merge pull request !9566 from ester.zhou/TR-8162
上级 0c3efa72 413c170d
显示空白变更内容
内联 并排
Showing with 321 addition and 355 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ 189e2c38
......@@ -6,35 +6,35 @@ The **\<Checkbox>** component is used to enable or disable an option.
>
> 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
## APIs
Checkbox( name?: string, group?: string )
Checkbox( option?: {name?: string, group?: string })
- Parameters
| Name | Type| Mandatory | Default Value| Description|
| --------| --------| ------ | -------- | -------- |
| name | string | No| - | Name of the check box.|
| group | string | No| - | Group name of the check box.|
**Parameters**
| Name | Type| Mandatory | Description|
| --------| --------| ------ | -------- |
| name | string | No| Name of the check box.|
| group | string | No| Group name of the check box.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type| Default Value| Description|
| ------------- | ------- | ------ | -------- |
| select | boolean | false | Whether the check box is selected.|
| selectedColor | [ResourceColor](../../ui/ts-types.md) | - | Color of the check box when it is selected.|
| Name | Type| Description|
| ------------- | ------- | -------- |
| select | boolean | Whether the check box is selected.<br>Default value: **false**|
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color of the check box when it is selected.|
## Events
In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported.
| Name | Description|
| ----------| -------- |
|onChange(callback: (value: boolean) => void) | Triggered when the selection status of the check box changes.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 189e2c38
......@@ -6,13 +6,9 @@ The **\<CheckboxGroup>** component is used to select or deselect all check boxes
>
> 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
None
## APIs
......@@ -20,31 +16,38 @@ CheckboxGroup( 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**
## Attributes
| Name| Type| Default Value| Description|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| selectAll | boolean | false | Whether to select all.|
| selectedColor | Color | - | Color of the selected check box.|
| group | string | No| Group name.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| selectAll | boolean | Whether to select all.<br>Default value: **false**|
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color of the selected check box.|
## Events
In addition to the universal events (ts-universal-events-click.md), the following events are supported.
| 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.|
- 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.|
## 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
......@@ -54,7 +57,6 @@ Creates a check box group so that you can select or deselect all check boxes in
@Entry
@Component
struct CheckboxExample {
build() {
Scroll() {
Column() {
......
en/application-dev/reference/arkui-ts/ts-container-ability-component.md
浏览文件 @ 189e2c38
......@@ -4,7 +4,7 @@
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs of this module are system APIs and cannot be called by third-party applications.
......@@ -25,26 +25,26 @@ Not supported
## APIs
AbilityComponent(value: {want : Want})
AbilityComponent(want: Want)
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| want | [Want](../../reference/apis/js-apis-application-Want.md) | Yes| - | Description of the default ability to load.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| want | [Want](../apis/js-apis-application-Want.md) | Yes| Description of the default ability to load.|
## Events
### onConnect
onConnect()&nbsp;=&gt;&nbsp;void
onConnect(callback:() =&gt; void)
Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.
### onDisconnect
onDisconnect()&nbsp;=&gt;&nbsp;void
onDisconnect(callback:() =&gt; void)
Called when this **\<AbilityComponent>** is destroyed.
......
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 189e2c38
# Column
The **\<Column>** component lays out child components vertically.
The **<Column\>** component lays out child components vertically.
> **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
This component can contain child components.
Supported
## APIs
Column(value?:{space?: Length})
Column(value?:{space?: string | number})
**Parameters**
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| space | Length | No| 0 | Space between two adjacent child components in the vertical layout.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| space | string \| number | No| Space between two adjacent child components in the vertical layout.<br>Default value: **0**|
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | Alignment mode of the child components in the vertical direction.<br>Default value: **FlexAlign.Start**|
## Example
......
en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 189e2c38
# TabContent
The **\<TabContent>** component is used only in the **\<Tabs>** component. It corresponds to the content view of a switched tab page.
> **NOTE**<br>
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<TabContent\>** component is used only in the **<Tabs\>** component. It corresponds to the content view of a switched tab page.
## Required Permissions
None
## Child Components
## Child Component
This component supports only one child component.
......@@ -25,22 +19,22 @@ TabContent()
## Attributes
Touch target configuration is not supported.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| tabBar | string \| {<br/>icon?: string,<br/>text?: string<br/>}<br/>\| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Content displayed on the tab bar.<br/>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 or later).<br/>**NOTE**<br/>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. |
| Name| Type| Description|
| -------- | -------- | -------- |
| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>> **NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.|
> **NOTE**
> - The **<TabContent\>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **<Tabs\>** component.
>
> - The **<TabContent\>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **<Tabs\>** component and the **<TabBar\>** component.
> - The **\<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\<Tabs>** component.
> - The **\<TabContent>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **\<Tabs>** component and the **\<TabBar>** component.
> - The **\<TabContent>** component does not support setting of the [touch target](ts-universal-attributes-touch-target.md).
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct TabContentExample {
......
en/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 189e2c38
# Tabs
The **<Tabs\>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
The **\<Tabs>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
> **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
A **<Tabs\>** component can contain multiple [TabContent](ts-container-tabcontent.md) components.
This component can contain multiple [\<TabContent>](ts-container-tabcontent.md) components.
## APIs
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| barPosition | BarPosition | No | BarPosition.Start | Tab bar position for creating the **<Tabs\>** container component. |
| index | number | No | 0 | Initial tab index. |
| controller | [TabsController](#tabscontroller) | No | - | Tab controller. |
**Parameters**
- BarPosition enums
| Name | Description |
| -------- | -------- |
| Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container. |
| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| barPosition | BarPosition | No| Tab bar position for creating the **\<Tabs>** container component.<br>Default value: **BarPosition.Start**|
| index | number | No| Initial tab index.<br>Default value: **0**|
| controller | [TabsController](#tabscontroller) | No| Tab controller.|
## BarPosition
| Name| Description|
| -------- | -------- |
| Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container.|
| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container.|
## Attributes
Touch target configuration is not supported.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. The [touch target](ts-universal-attributes-touch-target.md) is not supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| vertical | boolean | false | Whether a tab is a vertical tab. |
| scrollable | boolean | true | Whether page switching can be performed by swiping left or right. |
| barMode | BarMode | - | Tab bar layout mode. |
| barWidth | number | - | Width of the tab bar. If this parameter is not set, the default value in the system theme is used. |
| barHeight | number | - | Height of the tab bar. If this parameter is not set, the default value in the system theme is used. |
| animationDuration | number | 200 | Animation duration of the tab content. |
| Name| Type| Description|
| -------- | -------- | -------- |
| vertical | boolean | Whether to use vertical tabs. The value **true** means to use vertical tabs, and **false** means to use horizontal tabs.<br>Default value: **false**|
| scrollable | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.<br>Default value: **true**|
| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.<br>Default value: **BarMode.Fixed**|
| barWidth | number \| string<sup>8+</sup> | Width of the tab bar. |
| barHeight | number \| string<sup>8+</sup> | Height of the tab bar. |
| animationDuration | number | Animation duration of the tab content.<br>Default value: **200**|
- BarMode enums
| Name | Description |
| -------- | -------- |
| Scrollable | The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable. |
| Fixed | The widths of all tab bars are evenly allocated. |
## BarMode
| Name| Description|
| -------- | -------- |
| Scrollable | The width of each tab is defined by its label length. The tabs are scrollable when the total width exceeds the tab bar width.|
| Fixed | The width of each tab is fixed, determined by evenly allocating the tab bar width among the tabs.|
## Events
| Name | Description |
In addition to the universal events (ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onChange(callback: (index: number) =&gt; void) | Event triggered when a tab is switched. |
| onChange(callback: (index: number) =&gt; void) | Event triggered when a tab is switched.|
## TabsController
Defines a tab controller, which is used to control switching of tabs.
### Objects to Import
```
......@@ -78,14 +77,14 @@ changeIndex(value: number): void
Switches to the specified tab.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Index of a tab. The value starts from **0**. |
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | number | Yes| Index of the tab. The value starts from 0.|
## Example
## Example
```ts
// xxx.ets
......
en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 189e2c38
......@@ -19,13 +19,8 @@ Circle(options?: {width?: string | number, height?: string | number})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width of the circle. |
| height | string \| number | No| 0 | Height of the circle. |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | Yes| - | Width.|
| height | string \| number | Yes| - | Height.|
| width | string \| number | No| 0 | Width of the circle.|
| height | string \| number | No| 0 | Height of the circle.|
## Attributes
......
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 189e2c38
......@@ -14,22 +14,17 @@ You can create explicit animation with your custom settings.
## AnimationOptions
- Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation duration, in ms.|
| tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.|
| curve | Curve \| Curves | Linear | Animation curve.|
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed.|
| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
| Name| Type| Description|
| -------- | -------- | -------- |
| duration | number | Animation duration, in ms.<br>Default value: **1000**|
| tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.<br>Default value: **1.0**|
| curve | Curve \| Curves | Animation curve.<br>Default value: **Curve.Linear**|
| delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.<br>Default value: **0**|
| iterations | number | 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.<br>Default value: **1**|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**|
| onFinish | () =&gt; void | Callback invoked when the animation playback is complete.|
- APIs
| Name| Description|
| -------- | -------- |
| onFinish() =&gt; void | Callback invoked when the animation playback is complete.|
## Example
......
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 189e2c38
......@@ -2,23 +2,13 @@
The **\<Video>** component is used to play a video and control its playback.
> **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
To use online videos, you need to add the **ohos.permission.INTERNET** permission to the corresponding **abilities** in the **config.json** or **module.json** file, whichever is appropriate.
```js
"abilities":[
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
To use online videos, you must apply for the **ohos.permission.INTERNET** permission. For details about how to apply for the permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md).
## Child Components
......@@ -28,50 +18,53 @@ Not supported
## APIs
Video(value: VideoOptions)
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
- VideoOptions attributes
| Name | Type | Mandatory | Default Value | Description |
| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- |
| src | string \| [Resource](../../ui/ts-types.md) | No | - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).|
| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No | 1.0 \| PlaybackSpeed.<br>Speed_Forward_1_00_X | Video playback speed.<br>> **NOTE**<br>> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**. |
| previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No | - | Controller. |
**Parameters**
| Name | Type | Mandatory| Description |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string \| [Resource](../../ui/ts-types.md) | No | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| **PlaybackSpeed.Speed_Forward_1_00_X** |
| previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No | Controller. |
- PlaybackSpeed<sup>8+</sup>
| Name | Description |
| -------------------- | --------- |
| Speed_Forward_0_75_X | 0.75x playback speed.|
| Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed.|
| Speed_Forward_1_75_X | 1.75x playback speed.|
| Speed_Forward_2_00_X | 2x playback speed. |
## PlaybackSpeed<sup>8+</sup>
| Name | Description |
| -------------------- | --------- |
| Speed_Forward_0_75_X | 0.75x playback speed.|
| Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed.|
| Speed_Forward_1_75_X | 1.75x playback speed.|
| Speed_Forward_2_00_X | 2x playback speed. |
## Attributes
| Name | Type | Default Value | Description |
| --------- | ---------------------------------------- | ----- | --------------- |
| muted | boolean | false | Whether to mute the video. |
| autoPlay | boolean | false | Whether to enable auto play. |
| controls | boolean | true | Whether to display the video playback control bar.|
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video scale type. |
| loop | boolean | false | Whether to repeat the video. |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description |
| --------- | ---------------------------------------- | ----------------------------------------------- |
| muted | boolean | Whether to mute the video.<br>Default value: **false** |
| autoPlay | boolean | Whether to enable auto play.<br>Default value: **false** |
| controls | boolean | Whether to display the video playback control bar.<br>Default value: **true**|
| objectFit | [ImageFit](ts-basic-components-image.md) | Video scale type.<br>Default value: **Cover** |
| loop | boolean | Whether to repeat the video.<br>Default value: **false** |
## Events
In addition to the universal events (ts-universal-events-click.md), the following events are supported.
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onStart() =&gt; void | Triggered when the video is played. |
| onPause() =&gt; void | Triggered when the video playback is paused. |
| onFinish() =&gt; void | Triggered when the video playback is finished. |
| onError() =&gt; void | Triggered when the video playback fails. |
| onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| onUpdate(event?: { time: number }) =&gt; void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onStart(event:() =&gt; void) | Triggered when the video is played. |
| onPause(event:() =&gt; void) | Triggered when the video playback is paused. |
| onFinish(event:() =&gt; void) | Triggered when the video playback is finished. |
| onError(event:() =&gt; void) | Triggered when the video playback fails. |
| onPrepared(callback:(event?: { duration: number }) =&gt; void) | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| onSeeking(callback:(event?: { duration: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| onSeeked(callback:(event?: { duration: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| onUpdate(callback:(event?: { duration: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
## VideoController
......@@ -110,10 +103,11 @@ setCurrentTime(value: number)
Sets the video playback position.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | --------- |
| value | number | Yes | - | Video playback position.|
**Parameters**
| Name| Type| Mandatory| Description |
| ------ | -------- | ---- | --------------------------- |
| value | number | Yes | Video playback position, in seconds.|
### requestFullscreen
......@@ -121,10 +115,11 @@ requestFullscreen(value: boolean)
Requests full-screen mode.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ----- | ------- |
| value | boolean | Yes | false | Whether the playback is in full-screen mode.|
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ------- |
| value | boolean | Yes | Whether the playback is in full-screen mode.<br>Default value: **false**|
### exitFullscreen
......@@ -138,19 +133,21 @@ setCurrentTime(value: number, seekMode: SeekMode)
Sets the video playback position with the specified seek mode.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | ---- | ---- | --------- |
| value | number | Yes | - | Video playback position.|
| seekMode | SeekMode | Yes | - | Seek mode. |
- SeekMode<sup>8+</sup>
| Name | Description |
| ---------------- | -------------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe. |
| NextKeyframe | Seeks to the nearest next keyframe. |
| ClosestKeyframe | Seeks to the nearest keyframe. |
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.|
**Parameters**
| Name | Type| Mandatory| Description |
| -------- | -------- | ---- | ------------------ |
| value | number | Yes | Video playback position.|
| seekMode | SeekMode | Yes | Seek mode. |
## SeekMode<sup>8+</sup>
| Name | Description |
| ---------------- | -------------- |
| PreviousKeyframe | Seeks to the nearest previous keyframe. |
| NextKeyframe | Seeks to the nearest next keyframe. |
| ClosestKeyframe | Seeks to the nearest keyframe. |
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.|
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ 189e2c38
# Border Image
You can draw an image around a component.
> **NOTE**
>
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| source | string \| [Resource](../../ui/ts-types.md) \| [linearGradient](ts-universal-attributes-gradient-color.md) | - | Source or gradient color of the border image.|
| slice | Length \| EdgeWidth | 0 | Slice width of the border image.|
| width | Length \| EdgeWidth | 0 | Width of the border image.|
| outset | Length \| EdgeWidth | 0 | Amount by which the border image is extended beyond the border box.|
| RepeatMode | RepeatMode | RepeatMode.Stretch | Repeat mode of the border image.|
| fill | boolean | false | Whether to fill the center of the border image. |
- EdgeWidth
At least one parameter must be passed to reference an **EdgeWidth** object.
| Name| Type| Mandatory| Default Value |Description|
| -------- | -------- |-------- |-------- |-------- |
| left | Length | No| 0 | Distance on the left.|
| right | Length | No| 0 | Distance on the right.|
| top | Length | No| 0 | Distance at the top.|
| bottom | Length | No| 0 | Distance on the bottom.|
- RepeatMode
| Name| Description|
| -------- | -------- |
| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped.|
| Stretch | The source image's slices stretched to fill the border box.|
| Round | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.|
| Space | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles.|
| Name| Type| Description|
| -------- | -------- | -------- |
| source | string \| [Resource](../../ui/ts-types.md) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.|
| slice | [Length](../../ui/ts-types.md#length)\| EdgeWidth | Slice width of the border image.<br>Default value: **0**|
| width | [Length](../../ui/ts-types.md#length)\| EdgeWidth | Width of the border image.<br>Default value: **0**|
| outset | [Length](../../ui/ts-types.md#length)\| EdgeWidth | Amount by which the border image is extended beyond the border box.<br>Default value: **0**|
| RepeatMode | RepeatMode | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**|
| fill | boolean | Whether to fill the center of the border image.<br>Default value: **false**|
## EdgeWidth
At least one parameter must be passed to reference an **EdgeWidth** object.
| Name| Type| Mandatory|Description|
| -------- | -------- |-------- |-------- |
| left | [Length](../../ui/ts-types.md#length) | No| Distance on the left.|
| right | [Length](../../ui/ts-types.md#length) | No| Distance on the right.|
| top | [Length](../../ui/ts-types.md#length) | No| Distance at the top.|
| bottom | [Length](../../ui/ts-types.md#length) | No| Distance on the bottom.|
## RepeatMode
| Name| Description|
| -------- | -------- |
| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped.|
| Stretch | The source image's slices stretched to fill the border box.|
| Round | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.|
| Space | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles.|
## Example
......@@ -43,6 +48,7 @@ None
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
......@@ -71,6 +77,7 @@ struct Index {
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 189e2c38
# Border
The border attribute is used to set border styles for components.
The border attributes are used to set border styles for components.
> **NOTE**
>
......@@ -8,76 +8,61 @@ The border attribute is used to set border styles for components.
>
> The border of a component is displayed above the content of its child components since API version 9.
## Required Permissions
None
## Attributes
| Name | Type | Default Value | Description |
| ------------ | ------------- | ----------------------- | ------------------------ |
| border | BorderOptions | - | Unified border style. |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | BorderStyle.Solid | Border style of an element.|
| borderWidth | Length | 0 | Border width of an element. |
| borderColor | [ResourceColor](../../ui/ts-types.md) | - | Border color of an element. |
| borderRadius | Length \| BorderRadiuses<sup>9+</sup> | 0 | Border radius of an element.|
- BorderOptions
| Name| Type | Default Value | Mandatory| Description |
| -------- | ------------------------------------------------------------ | ----------------- | ---- | ---------- |
| width | [Length](../../ui/ts-types.md#length) \| EdgeWidth<sup>9+</sup> | 0 | No | Border width.|
| color | [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup> | 'Black' | No | Border color.|
| radius | [Length](../../ui/ts-types.md#length) \| BorderRadiuses<sup>9+</sup> | 0 | No | Border radius.|
| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup> | BorderStyle.Solid | No | Border style.|
| Name | Type | Description |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| border | {<br>width?: [Length](../../ui/ts-types.md#length) \| EdgeWidth<sup>9+</sup>,<br>color?: [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup>,<br>radius?: [Length](../../ui/ts-types.md#length) \| BorderRadiuses<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.|
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup> | Border style of an element.<br>Default value: **BorderStyle.Solid** |
| borderWidth | [Length](../../ui/ts-types.md) \| EdgeWidth<sup>9+</sup> | Border width of an element. |
| borderColor | [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup> | Border color of an element. |
| borderRadius | [Length](../../ui/ts-types.md) \| BorderRadiuses<sup>9+</sup> | Border radius of an element. |
## EdgeWidth<sup>9+</sup>
- EdgeWidth<sup>9+</sup>
To reference this object, at least one parameter must be passed.
To reference this object, at least one parameter must be passed.
| Name | Type | Mandatory| Description |
| ------ | ------------------------------------- | ---- | -------------- |
| left | [Length](../../ui/ts-types.md#length) | No | Width of the left border.|
| right | [Length](../../ui/ts-types.md#length) | No | Width of the right border.|
| top | [Length](../../ui/ts-types.md#length) | No | Width of the top border.|
| bottom | [Length](../../ui/ts-types.md#length) | No | Width of the bottom border.|
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | --------- | ------------- | --------------------------- |
| left | length | No | 0 | Width of the left border. |
| right | length | No | 0 | Width of the right border. |
| top | length | No | 0 | Width of the top border. |
| bottom | length | No | 0 | Width of the bottom border. |
## EdgeColor<sup>9+</sup>
- EdgeColor<sup>9+</sup>
To reference this object, at least one parameter must be passed.
To reference this object, at least one parameter must be passed.
| Name | Type | Mandatory| Description |
| ------ | ------------------------------------- | ---- | -------------- |
| left | [ResourceColor](../../ui/ts-types.md) | No | Color of the left border.|
| right | [ResourceColor](../../ui/ts-types.md) | No | Color of the right border.|
| top | [ResourceColor](../../ui/ts-types.md) | No | Color of the top border.|
| bottom | [ResourceColor](../../ui/ts-types.md) | No | Color of the bottom border.|
| Name | Type | Mandatory| Default Value | Description |
| ------ | ------------------------------------- | ---- | ------- | -------------- |
| left | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the left border.|
| right | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the right border.|
| top | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the top border.|
| bottom | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the bottom border.|
## BorderRadiuses<sup>9+</sup>
- BorderRadiuses<sup>9+</sup>
To reference this object, at least one parameter must be passed.
To reference this object, at least one parameter must be passed.
| Name | Type | Mandatory| Description |
| ----------- | ------------------------------------- | ---- | ---------------- |
| topLeft | [Length](../../ui/ts-types.md#length) | No | Radius of the upper-left rounded corner.|
| topRight | [Length](../../ui/ts-types.md#length) | No | Radius of the upper-right rounded corner.|
| bottomLeft | [Length](../../ui/ts-types.md#length) | No | Radius of the lower-left rounded corner.|
| bottomRight | [Length](../../ui/ts-types.md#length) | No | Radius of the lower-right rounded corner.|
| Name | Type| Mandatory| Default Value| Description |
| ----------- | -------- | ---- | ------ | ---------------- |
| topLeft | length | No | 0 | Radius of the upper-left rounded corner.|
| topRight | length | No | 0 | Radius of the upper-right rounded corner.|
| bottomLeft | length | No | 0 | Radius of the lower-left rounded corner.|
| bottomRight | length | No | 0 | Radius of the lower-right rounded corner.|
## EdgeStyle<sup>9+</sup>
- EdgeStyle<sup>9+</sup>
To reference this object, at least one parameter must be passed.
| Name | Type | Mandatory | Default Value | Description |
| ------ | ----------- | --------- | ----------------- | --------------------------- |
| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the left border. |
| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the right border. |
| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the top border. |
| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | BorderStyle.Solid | Style of the bottom border. |
To reference this object, at least one parameter must be passed.
| Name | Type | Mandatory| Description |
| ------ | ----------------------------------------------- | ---- | -------------- |
| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the left border.|
| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right border.|
| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top border.|
| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom border.|
## Example
......@@ -86,6 +71,7 @@ None
@Entry
@Component
struct BorderExample {
build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 189e2c38
# Click Control
Click control attributes are used to set whether a component can respond to finger interactions such as click and touch events.
> ![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.
> **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.
## Required Permissions
......@@ -13,15 +15,15 @@ None
## Attributes
| **Name** | **Type** | **Default Value** | **Description** |
| -------- | -------- | -------- | -------- |
| touchable | boolean | true | Whether the current component is touchable. |
| Name | Type| Default Value| Description |
| --------- | -------- | ------- | -------------- |
| touchable | boolean | true | Whether the component can respond to finger interactions such as click and touch events.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct TouchAbleExample {
......@@ -48,5 +50,4 @@ struct TouchAbleExample {
}
```
![en-us_image_0000001257138351](figures/en-us_image_0000001257138351.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
浏览文件 @ 189e2c38
# Enable/Disable
The **enabled** attribute sets whether a component responds to user interactions, such as [click events](ts-universal-events-click.md), [touch events](ts-universal-events-touch.md), [drag events](ts-universal-events-drag-drop.md), [key events](ts-universal-events-key.md), [focus events](ts-universal-focus-event.md), and [mouse events](ts-universal-mouse-key.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
> **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.
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| enabled | boolean | true | The value **true** means that the component is available and can respond to operations such as clicking. The value **false** means that the component does not respond to operations such as clicking. |
| Name | Type | Description |
| ------- | ------- | ---------------------------------------- |
| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.<br>Default value: **true** |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct EnabledExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// No response upon a click.
// The component does not respond to clicks.
Button('disable').enabled(false).backgroundColor(0x317aff).opacity(0.4)
Button('enable').backgroundColor(0x317aff)
}
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 189e2c38
# Flex Layout
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **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.
>
> - This attribute is valid only when the parent component is a **Flex** component.
> - The flex layout attributes are valid only when the parent component is a **\<Flex>** component.
## Required Permissions
......@@ -15,26 +14,27 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| flexBasis | 'auto' \| Length | 'auto' | Base dimension of a component in the main axis of the **Flex** layout. |
| flexGrow | number | 0 | Percentage of the **Flex** layout's remaining space that is allocated to the component. |
| flexShrink | number | 1 | Percentage of the **Flex** layout's shrink size that is allocated to the component. |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | Auto | Alignment mode, which overwrites the default **alignItems** configuration in the **Flex** layout. |
| flexBasis | 'auto' \| Length | 'auto' | Base dimension of the component in the main axis of the flex layout.|
| flexGrow | number | 0 | Percentage of the flex layout's remaining space that is allocated to the component.|
| flexShrink | number | 1 | Percentage of the flex layout's shrink size that is allocated to the component.|
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign)| Auto | Alignment mode, which overwrites the default **alignItems** configuration in the flex layout.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct FlexExample {
build() {
Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Base dimension in the main axis
// flexBasis() can be auto (default value), which indicates the original component size. If the value is of the number type, it is similar to .width()/.height(). The value is based on the main axis.
// flexBasis() can be 'auto' (default value), which indicates the original component size. If the value is of the number type, it is similar to .width()/.height(). The value is based on the main axis.
Flex() {
Text('flexBasis(100)')
.flexBasis('100').height(100).lineHeight(70)
......@@ -71,7 +71,7 @@ struct FlexExample {
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
// alignSelf() overwrites the default alignItems configuration in the Flex layout.
// alignSelf() overwrites the default alignItems configuration in the flex layout.
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text('no alignSelf,height:80').width('33%').height(80)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ 189e2c38
# Touch Target
> ![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.
You can set the touch target for components that support universal click events, touch events, and gestures.
## Required Permissions
None
> **NOTE**<br>
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| responseRegion | Array&lt;Rectangle&gt; \| Rectangle | {<br/>x: 0,<br/>y: 0,<br/>width: '100%',<br/>height: '100%'<br/>} | One or more touch targets, including their location and size.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> The percentage is measured relative to the component itself.<br/>> <br/>> **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is offset from the top edge of the component by the component's height.<br/>> <br/>> **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component; when **height** is set to **'100%'**, the height of the touch target is equal to that of the component. |
| Name| Type| Description|
| -------- | -------- | -------- |
| responseRegion | Array&lt;Rectangle&gt; \| Rectangle | One or more touch targets, including their location and size.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>width: '100%',<br>height: '100%'<br>} |
- Rectangle attributes
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | Length | No | 0vp | X coordinate of the touch point relative to the left edge of the component. |
| y | Length | No | 0vp | Y coordinate of the touch point relative to the left edge of the component. |
| width | Length | No | 100% | Width of the touch target. |
| height | Length | No | 100% | Height of the touch target. |
### Rectangle
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| x | [Length](../../ui/ts-types.md) | No| X coordinate of the touch point relative to the left edge of the component.<br>Default value: **0vp**|
| y | [Length](../../ui/ts-types.md) | No| Y coordinate of the touch point relative to the left edge of the component.<br>Default value: **0vp**|
| width | [Length](../../ui/ts-types.md) | No| Width of the touch target.<br>Default value: **100%**|
| height | [Length](../../ui/ts-types.md) | No| Height of the touch target.<br>Default value: **100%**|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> When both **x** and **y** are set to positive values, the entire touch target offsets towards the lower right corner of the component. How much the touch target offsets is subject to the set values.
> **NOTE**
>
> **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is the offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is the offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is the offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is the offset from the top edge of the component by the component's height.
>
> **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component; when **height** is set to **'100%'**, the height of the touch target is equal to that of the component.
>
> The percentage is measured relative to the component itself.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ResponseRegionExample {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或