Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

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

提交 7e550316 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 ce09ec8a
隐藏空白更改
内联 并排
Showing with 62 addition and 93 deletion
en/application-dev/reference/arkui-ts/ts-container-ability-component.md
浏览文件 @ 7e550316
# AbilityComponent
**\<AbilityComponent>** is a container for independently displaying an ability.
> **NOTE**
>
> This component is supported since API version 9.
......@@ -7,8 +9,6 @@
> The APIs of this module are system APIs and cannot be called by third-party applications.
**\<AbilityComponent>** is a container for independently displaying an ability.
## Constraints
Using **\<AbilityComponent>** requires a signature and related permissions.
......@@ -41,34 +41,20 @@ Not supported
## APIs
AbilityComponent(value: {want : Want, controller? : AbilityController})
AbilityComponent(value: {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.|
| controller | [AbilityController](#abilityController) | No| - | Ability controller.|
## Events
| Name| Description|
| -------- | -------- |
| onReady()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.|
| onDestroy()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is destroyed.|
| onAbilityCreated(name:&nbsp;string)&nbsp;=&gt;&nbsp;void | Called when the specified ability is loaded.|
| onAbilityMoveToFont()&nbsp;=&gt;&nbsp;void | Called when this ability is moved to the foreground.|
| onAbilityWillRemove()&nbsp;=&gt;&nbsp;void | Called when this ability is about to be removed.|
## AbilityController
Implements an ability controller, which provides the control APIs for **\<AbilityComponent>**.
| Name | Description |
| --------------------------------------- | ------------------------------------------------------------ |
| startAbility()&nbsp;=&gt;&nbsp;want | Loads an ability inside the **\<AbilityComponent>**.<br>**want**: description of the ability to be loaded.|
| preformBackPress()&nbsp;=&gt;&nbsp;void | Performs a return operation inside the **\<AbilityComponent>**. |
| getStackCount()&nbsp;=&gt;&nbsp;void | Obtains the number of tasks in the internal task stack of the **\<AbilityComponent>**. |
| onConnect()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.|
| onDisconnect()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is destroyed.|
## Example
......@@ -78,7 +64,6 @@ Implements an ability controller, which provides the control APIs for **\<Abilit
@Entry
@Component
struct MyComponent {
@State controller: AbilityController = new AbilityController()
build() {
Column() {
......@@ -87,26 +72,12 @@ struct MyComponent {
bundleName: '',
abilityName: ''
},
controller: this.controller
})
.onReady(() => {
console.log('AbilityComponent ready');
})
.onDestory(() => {
console.log('AbilityComponent destory');
})
Button("Start New")
.onClick(() => {
this.controller.startAbility({
bundleName: '',
abilityName: ''
});
.onConnect(() => {
console.log('AbilityComponent connect');
})
Button("Back")
.onClick(() => {
if (this.controller.getStacjCount() > 1) {
this.controller.preformBackPress();
}
.onDisconnect(() => {
console.log('AbilityComponent disconnect');
})
}
}
......
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 7e550316
# Column
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Column>** component lays out child components vertically.
The **&lt;Column&gt;** 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
......@@ -47,7 +47,8 @@ Column(value:{space?: Length})
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ColumnExample {
......@@ -76,6 +77,7 @@ struct ColumnExample {
Column().width('30%').height(30).backgroundColor(0xAFEEEE)
Column().width('30%').height(30).backgroundColor(0x00FFFF)
}.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('30%').height(30).backgroundColor(0xAFEEEE)
......
en/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 7e550316
# Flex
> **NOTE**<br/>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Flex>** component allows for elastic layout of child components.
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - The **\<Flex>** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
## Required Permissions
......@@ -25,44 +24,44 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
Creates a standard **\<Flex>** component.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
| Name | Type | Mandatory | Default Value | Description |
| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums)| No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
- FlexDirection enums
| Name | Description |
| -------- | -------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
| Name | Description |
| ------------- | ---------------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction.|
- FlexWrap enums
| Name | Description |
| -------- | -------- |
| NoWrap | The child components in the **&lt;Flex&gt;** component are arranged in a single line, and they may overflow. |
| Wrap | The child components in the **&lt;Flex&gt;** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **&lt;Flex&gt;** component are reversely arranged in multiple lines, and they may overflow. |
| Name | Description |
| ----------- | ------------------------------------------------- |
| NoWrap | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow. |
| Wrap | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
- FlexAlign enums
| Name | Description |
| -------- | -------- |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
| SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
| Name | Description |
| ------------ | ------------------------------------------------------------ |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
## Example
```
// Example 01
```ts
// xxx.ets
@Entry
@Component
struct FlexExample1 {
......@@ -124,9 +123,8 @@ struct FlexExample1 {
![en-us_image_0000001256978365](figures/en-us_image_0000001256978365.gif)
```
// Example 02
```ts
// xxx.ets
@Entry
@Component
struct FlexExample2 {
......@@ -171,9 +169,8 @@ struct FlexExample2 {
![en-us_image_0000001211898500](figures/en-us_image_0000001211898500.png)
```
// Example 03
```ts
// xxx.ets
@Component
struct JustifyContentFlex {
@Prop justifyContent : number
......@@ -221,9 +218,8 @@ struct FlexExample3 {
![en-us_image_0000001212218462](figures/en-us_image_0000001212218462.gif)
```
// Example 04
```ts
// xxx.ets
@Component
struct AlignItemsFlex {
@Prop alignItems : number
......@@ -273,9 +269,8 @@ struct FlexExample4 {
![en-us_image_0000001212378426](figures/en-us_image_0000001212378426.gif)
```
// Example 05
```ts
// xxx.ets
@Component
struct AlignContentFlex {
@Prop alignContent: number
......
en/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 7e550316
# Tabs
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
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
......@@ -87,7 +87,8 @@ Switches to the specified tab.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct TabsExample {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或