Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

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

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

Update docs (20833) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 507a0196
隐藏空白更改
内联 并排
Showing with 107 addition and 57 deletion
en/application-dev/quick-start/arkts-two-way-sync.md
浏览文件 @ 3dce8840
......@@ -37,6 +37,8 @@ What the internal state is depends on the component. For example, for the [bindP
| [Toggle](../reference/arkui-ts/ts-basic-components-toggle.md) | isOn | 10 |
| [AlphabetIndexer](../reference/arkui-ts/ts-container-alphabet-indexer.md) | selected | 10 |
| [Select](../reference/arkui-ts/ts-basic-components-select.md) | selected, value| 10 |
| [BindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md) | isShow | 10 |
| [BindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md) | isShow | 10 |
- When the variable bound to $$ changes, the UI is re-rendered synchronously.
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 3dce8840
......@@ -12,37 +12,39 @@ A context menu – a vertical list of items – can be bound to a component and
## Attributes
| Name | Type | Description |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | content: Array<[MenuItem](#menuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8),<br>options: [MenuOptions](#menuoptions10) | Menu bound to the component, which is displayed when you click the component. A menu item can be a combination of text and icons or a custom component.<br>**content**: array of menu item text and icons or custom components.<br>**options**: parameters of the context menu. Optional.|
| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8)<br>options: [ContextMenuOptions](#contextmenuoptions10) | Context menu bound to the component, which is displayed when the user long-presses or right-clicks the component. Only custom menu items are supported.<br>**responseType**: how the context menu triggered, which can be long-press or right-click. Mandatory. <br>**options**: parameters of the context menu. Optional.|
| Name | Type | Description |
| ---------------------------- | ---------------------------------------- | ---------------------------------------- |
| bindMenu | content: Array<[MenuItem](#menuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [MenuOptions](#menuoptions10) | Menu bound to the component, which is displayed when the user clicks the component. A menu item can be a combination of text and icons or a custom component.<br>**content**: array of menu item icons and text, or custom component.<br>**options**: parameters of the context menu.|
| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8)<br>options?: [ContextMenuOptions](#contextmenuoptions10) | Context menu bound to the component, which is displayed when the user long-presses or right-clicks the component. Only custom menu items are supported.<br>**responseType**: how the context menu is triggered, which can be long-press or right-click.<br>**options**: parameters of the context menu.|
## MenuItem
| Name | Type | Mandatory| Description |
| ------------------ | -------------------------------------- | ---- | ---------------------- |
| value | string | Yes | Menu item text. |
| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon. |
| action | () =&gt; void | Yes | Action triggered when a menu item is clicked.|
| Name | Type | Mandatory | Description |
| ------------------ | -------------------------------------- | ---- | ----------- |
| value | string | Yes | Menu item text. |
| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon. |
| action | () =&gt; void | Yes | Action triggered when a menu item is clicked.|
## MenuOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ------ | -------------------------------- | ---- | ------------------------------------------------------ |
| title | string | No | Menu title. |
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen.|
| placement | [Placement](ts-appendix-enums.md#placement8) | No| Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all.|
| onAppear | () =&gt; void | No| Callback triggered when the menu is displayed.|
| onDisappear | () =&gt; void | No| Callback triggered when the menu is hidden.|
| Name | Type | Mandatory | Description |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| title | string | No | Menu title.<br>**NOTE**<br>This parameter is available only when **content** is set to Array<[MenuItem](#menuitem)>.|
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>If **placement** is set to **undefined** or **null** or is not set, the default value [BottomLeft](ts-appendix-enums.md#placement8) is used, and the position is relative to the parent component.|
| onAppear | () =&gt; void | No | Callback triggered when the menu is displayed. |
| onDisappear | () =&gt; void | No | Callback triggered when the menu is hidden. |
## ContextMenuOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ----------- | -------------------------------------------- | ---- | ------------------------------------------------------------ |
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all.|
| onAppear | () =&gt; void | No | Callback triggered when the menu is displayed. |
| onDisappear | () =&gt; void | No | Callback triggered when the menu is hidden. |
| Name | Type | Mandatory | Description |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all, and the context menu is displayed where the mouse is clicked.|
| enableArrow | boolean | No | Whether to display an arrow. If the size and position of the context menu are insufficient for holding an arrow, no arrow is displayed.<br>Default value: **false**, indicating that no arrow is displayed<br>**NOTE**<br>An arrow is displayed in the position specified by **placement**. If **placement** is not set or its value is invalid, the arrow is displayed above the target. If the position is insufficient for holding the arrow, it is automatically adjusted.|
| arrowOffset | [Length](ts-types.md#length) | No | Offset of the arrow relative to the context menu. When the arrow is placed in a horizontal position with the context menu: The value indicates the distance from the arrow to the leftmost; the arrow is centered by default. When the arrow is placed in a vertical position with the context menu: The value indicates the distance from the arrow to the top; the arrow is centered by default. The offset settings take effect only when the value is valid, can be converted to a number greater than 0, and does not cause the arrow to extend beyond the safe area of the context menu. The value of **placement** determines whether the offset is horizontal or vertical.|
| onAppear | () =&gt; void | No | Callback triggered when the menu is displayed. |
| onDisappear | () =&gt; void | No | Callback triggered when the menu is hidden. |
## Example
......@@ -133,7 +135,7 @@ struct MenuExample {
### Example 3
Context Menu (Displayed Upon Right-Clicking)
Context Menu (Displayed Upon Right-Click)
```ts
// xxx.ets
......@@ -166,3 +168,46 @@ struct ContextMenuExample {
}
}
```
### Example 4
Directive Menu (Displayed Upon Right-Click)
```ts
// xxx.ets
@Entry
@Component
struct DirectiveMenuExample {
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Options')
Divider().strokeWidth(2).margin(5).color('#F0F0F0')
Text('Hide')
Divider().strokeWidth(2).margin(5).color('#F0F0F0')
Text('Exit')
}
.width(200)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Column() {
Text("DirectiveMenuExample")
.fontSize(20)
.width('100%')
.height("25%")
.backgroundColor('#F0F0F0')
.textAlign(TextAlign.Center)
.bindContextMenu(this.MenuBuilder, ResponseType.RightClick, {
enableArrow: true,
placement: Placement.Bottom
})
}
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_0000001689126950](figures/en-us_image_0000001689126950.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md
浏览文件 @ 3dce8840
......@@ -11,7 +11,14 @@ You can bind a full-screen modal to a component through the **bindContentCover**
| Name | Parameter | Description |
| ---------------- | ---------------------------------------- | ---------------------------------------- |
| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br>**isShow**: whether to display the modal. Mandatory.<br>**builder**: content of the modal. Mandatory.<br>**type**: transition type of the modal. This parameter is optional. |
| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br> **isShow**: whether to display the modal.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).<br>**builder**: content of the modal.<br> **options**: optional attributes of the modal.|
## ContentCoverOptions
| Name | Type | Mandatory | Description |
| --------------- | ---------------------------------------- | ---- | ------------- |
| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | No | Transition mode of the modal. |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the modal. |
| onAppear | () => void | No | Callback invoked when the modal appears.|
| onDisappear | () => void | No | Callback invoked when the modal disappears.|
## Example
......@@ -38,7 +45,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
@Builder myBuilder() {
......@@ -48,7 +54,7 @@ struct ModalTransitionExample {
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
}).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
Button("close modal 1")
.margin(10)
......@@ -59,7 +65,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
......@@ -71,7 +76,7 @@ struct ModalTransitionExample {
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
.bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
}
.justifyContent(FlexAlign.Center)
.backgroundColor("#ff49c8ab")
......@@ -117,7 +122,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
......@@ -128,7 +132,7 @@ struct ModalTransitionExample {
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
}).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
Button("close modal 1")
.margin(10)
......@@ -139,7 +143,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
.scale({x: this.isScale2, y: this.isScale2})
.animation({curve:curves.springMotion()})
......@@ -153,7 +156,7 @@ struct ModalTransitionExample {
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
.bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
}
.justifyContent(FlexAlign.Center)
.backgroundColor("#ff49c8ab")
......@@ -190,7 +193,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
@Builder myBuilder() {
......@@ -200,7 +202,7 @@ struct ModalTransitionExample {
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.DEFAULT)
}).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
Button("close modal 1")
.margin(10)
......@@ -211,7 +213,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
......@@ -223,7 +224,7 @@ struct ModalTransitionExample {
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.DEFAULT)
.bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
......@@ -258,7 +259,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
.justifyContent(FlexAlign.Center)
}
......@@ -270,7 +270,7 @@ struct ModalTransitionExample {
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.ALPHA)
}).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
Button("close modal 1")
.margin(10)
......@@ -281,7 +281,6 @@ struct ModalTransitionExample {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
......@@ -293,7 +292,7 @@ struct ModalTransitionExample {
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.ALPHA)
.bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md
浏览文件 @ 3dce8840
......@@ -4,32 +4,36 @@ You can bind a sheet to a component through the **bindSheet** attribute. You can
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
>
> Switching between landscape and portrait modes is not supported.
> Switching between landscape and portrait modes is not supported.
## Attributes
| Name| Parameter| Description|
| ----- | ----- | ----- |
| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.<br>**isShow**: whether to display the sheet. Mandatory.<br>**builder**: content of the sheet. Mandatory.<br> **options**: options of the sheet. Optional.|
| Name | Parameter | Description |
| --------- | ---------------------------------------- | ---------------------------------------- |
| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.<br>**isShow**: whether to display the sheet.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).<br>**builder**: content of the sheet.<br> **options**: optional attributes of the sheet.|
> **NOTE**
>
> When no two-way binding is set up for the **isShow** parameter, closing the sheet by dragging does not change the parameter value.
>
> To synchronize the value of **isShow** with the actual state of the sheet, it is recommended that you use the [$$](../../quick-start/arkts-two-way-sync.md) to set up two-way binding for **isShow**.
## SheetOptions
| Name| Type| Mandatory| Description|
| ----- | ----- | ----- | ------ |
| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No| Height of the sheet.<br>Default value: **LARGE**|
| dragBar | boolean | No| Whether to display the drag bar. By default, the drag bar is displayed .|
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the sheet.|
| onAppear | () => void | No| Callback invoked when the sheet is displayed.|
| onDisappear | () => void | No| Callback invoked when the sheet is hidden.|
| Name | Type | Mandatory | Description |
| --------------- | ---------------------------------------- | ---- | --------------- |
| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No | Height of the sheet.<br>Default value: **LARGE**|
| dragBar | boolean | No | Whether to display the drag bar. By default, the drag bar is displayed . |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the sheet. |
| onAppear | () => void | No | Callback invoked when the sheet is displayed. |
| onDisappear | () => void | No | Callback invoked when the sheet is hidden. |
## SheetSize
| Name| Description|
| -------- | -------- |
| MEDIUM | The sheet height is half of the screen height.|
| LARGE | The sheet height is almost the screen height.|
| Name | Description |
| ------ | --------------- |
| MEDIUM | The sheet height is half of the screen height.|
| LARGE | The sheet height is almost the screen height.|
## Example
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或