Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 4b77ee2f 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10532 示例文档整改 

Merge pull request !10532 from matchZhou/master
上级 c884d218 4b596a53
隐藏空白更改
内联 并排
Showing with 136 addition and 125 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 4b77ee2f
......@@ -65,9 +65,9 @@ stop()
@Entry
@Component
struct Second {
@State accumulateTime: number = 0;
@State accumulateTime: number = 0
// 导入对象
controller: TextClockController = new TextClockController();
controller: TextClockController = new TextClockController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime)
......@@ -76,7 +76,7 @@ struct Second {
TextClock({ timeZoneOffset: -8, controller: this.controller })
.format('hms')
.onDateChange((value: number) => {
this.accumulateTime = value;
this.accumulateTime = value
})
.margin(20)
.fontSize(30)
......@@ -84,12 +84,12 @@ struct Second {
.margin({ bottom: 10 })
.onClick(() => {
// 启动文本时钟
this.controller.start();
this.controller.start()
})
Button("stop TextClock")
.onClick(() => {
// 停止文本时钟
this.controller.stop();
this.controller.stop()
})
}
.width('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 4b77ee2f
......@@ -71,11 +71,11 @@ reset()
@Component
struct TextTimerExample {
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'HH:mm:ss.SS'
@State format: string = 'mm:ss.SS'
build() {
Column() {
TextTimer({controller: this.textTimerController})
TextTimer({ controller: this.textTimerController, isCountDown: true, count: 30000 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(50)
......@@ -84,14 +84,14 @@ struct TextTimerExample {
})
Row() {
Button("start").onClick(() => {
this.textTimerController.start();
});
this.textTimerController.start()
})
Button("pause").onClick(() => {
this.textTimerController.pause();
});
this.textTimerController.pause()
})
Button("reset").onClick(() => {
this.textTimerController.reset();
});
this.textTimerController.reset()
})
}
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ 4b77ee2f
......@@ -23,7 +23,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---- | ---------- | -----| -------------- |
| type | ToggleType | 是 | 开关类型。 |
| type | [ToggleType](#toggletype枚举说明) | 是 | 开关类型。 |
| isOn | boolean | 否 | 开关是否打开，true：打开，false：关闭。<br/>默认值：false |
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 4b77ee2f
......@@ -61,8 +61,8 @@
@Entry
@Component
struct BadgeExample {
@State counts: number = 1;
@State message: string = 'new';
@State counts: number = 1
@State message: string = 'new'
build() {
Column() {
......@@ -77,7 +77,7 @@ struct BadgeExample {
}) {
Button('message')
.onClick(() => {
this.counts++;
this.counts++
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
......@@ -91,7 +91,7 @@ struct BadgeExample {
}) {
Button('message')
.onClick(() => {
this.counts++;
this.counts++
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
......@@ -106,7 +106,7 @@ struct BadgeExample {
}) {
Button('message')
.onClick(() => {
this.counts++;
this.counts++
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 4b77ee2f
......@@ -49,21 +49,21 @@ Navigator(value?: {target: string, type?: NavigationType})
@Entry
@Component
struct NavigatorExample {
@State active: boolean = false;
@State active: boolean = false
@State Text: object = {name: 'news'}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
Text('Go to ' + this.Text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center)
.width('100%').textAlign(TextAlign.Center)
}.params({ text: this.Text }) // 传参数到Detail页面
Navigator() {
Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
}.active(this.active)
.onClick(() => {
this.active = true;
this.active = true
})
}.height(150).width(350).padding(35)
}
......@@ -78,7 +78,7 @@ import router from '@ohos.router'
@Component
struct DetailExample {
// 接收Navigator.ets的传参
@State text: any = router.getParams().text;
@State text: any = router.getParams().text
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
......@@ -87,7 +87,7 @@ struct DetailExample {
}
Text('This is ' + this.text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center)
.width('100%').textAlign(TextAlign.Center)
}
.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
}
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 4b77ee2f
......@@ -3,13 +3,9 @@
列表弹窗。
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限
无
## ActionSheet.show
......@@ -21,10 +17,10 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | -------------------------- | ------- | ----------------------------- |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 弹窗内容。 |
| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗标题。 |
| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的文本内容和点击回调。<br>默认值：<br/>value：按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| confirm | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的文本内容和点击回调。<br>默认值：<br/>value：按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Bottom |
| offset | {<br/>dx:&nbsp;Length,<br/>dy:&nbsp;Length<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。{<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} |
......@@ -34,8 +30,8 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 |
| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 选项的文本内容。 |
| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标，默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 |
......@@ -43,7 +39,6 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
```ts
// xxx.ets
@Entry
@Component
struct ActionSheetExample {
......@@ -54,29 +49,35 @@ struct ActionSheetExample {
ActionSheet.show({
title: 'ActionSheet title',
message: 'message',
autoCancel: true,
confirm: {
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled');
console.log('Get Alert Dialog handled')
}
},
cancel: () => {
console.log('actionSheet canceled')
},
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -10 },
sheets: [
{
title: 'apples',
action: () => {
console.log('apples');
console.log('apples')
}
},
{
title: 'bananas',
action: () => {
console.log('bananas');
console.log('bananas')
}
},
{
title: 'pears',
action: () => {
console.log('pears');
console.log('pears')
}
}
]
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 4b77ee2f
......@@ -11,7 +11,7 @@
| 名称 | 参数类型 | 参数描述 |
| ---- | --------------- | -------- |
| show | AlertDialogParamWithConfirm&nbsp;\|&nbsp;AlertDialogParamWithButtons | 定义并显示AlertDialog组件。 |
| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 |
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -19,11 +19,11 @@
| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 |
| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
| confirm | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -31,12 +31,12 @@
| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 |
| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true |
| primaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| secondaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| primaryButton | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| secondaryButton | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
## DialogAlignment枚举说明
......@@ -60,7 +60,6 @@
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 5 }) {
Button('one button dialog')
......@@ -69,6 +68,10 @@ struct AlertDialogExample {
{
title: 'title',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 3,
confirm: {
value: 'button',
action: () => {
......@@ -80,7 +83,7 @@ struct AlertDialogExample {
}
}
)
})
})
.backgroundColor(0x317aff)
Button('two button dialog')
.onClick(() => {
......@@ -88,6 +91,10 @@ struct AlertDialogExample {
{
title: 'title',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
gridCount: 4,
offset: { dx: 0, dy: -20 },
primaryButton: {
value: 'cancel',
action: () => {
......@@ -105,7 +112,7 @@ struct AlertDialogExample {
}
}
)
}).backgroundColor(0x317aff)
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 4b77ee2f
......@@ -22,24 +22,9 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层退出时的回调。 |
| autoCancel | boolean | 否 | 是否允许点击遮障层退出。<br>默认值：true |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。 |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 |
| customStyle | boolean | 否 | 弹窗容器样式是否自定义。<br>默认值：false |
| gridCount<sup>8+</sup> | number | 否 | 弹窗宽度占栅格宽度的个数。 |
## DialogAlignment枚举说明
| 名称 | 描述 |
| ------------------------ | ------------------------------------------------------ |
| Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 |
| Default | 默认对齐。<br/>**说明：**<br/>与枚举值Center效果相同。 |
| TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 |
| CenterEnd<sup>8+</sup> | 右中对齐。 |
| BottomStart<sup>8+</sup> | 左下对齐。 |
| BottomEnd<sup>8+</sup> | 右下对齐。 |
| gridCount<sup>8+</sup> | number | 否 | 弹窗宽度占栅格宽度的个数。 |
## CustomDialogController
......@@ -107,17 +92,28 @@ struct CustomDialogUser {
@State textValue: string = ''
@State inputValue: string = 'click me'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept, textValue: $textValue, inputValue: $inputValue }),
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
textValue: $textValue,
inputValue: $inputValue
}),
cancel: this.existApp,
autoCancel: true
autoCancel: true,
alignment: DialogAlignment.Default,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false
})
onCancel() {
console.info('Callback when the first button is clicked')
}
onAccept() {
console.info('Callback when the second button is clicked')
}
existApp() {
console.info('Click the callback in the blank area')
}
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ 4b77ee2f
......@@ -49,7 +49,7 @@ struct Index {
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.onDragStart(()=>{
// 拖拽时关闭菜单
ContextMenu.close();
ContextMenu.close()
})
}
.width('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 4b77ee2f
......@@ -126,19 +126,19 @@ sendMouseEvent(event: MouseEvent): boolean
```ts
// xxx.ets
class Utils {
static rect_left;
static rect_top;
static rect_right;
static rect_bottom;
static rect_value;
static rect_left
static rect_top
static rect_right
static rect_bottom
static rect_value
//获取组件所占矩形区域坐标
static getComponentRect(key) {
let strJson = getInspectorByKey(key);
let obj = JSON.parse(strJson);
console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj));
let strJson = getInspectorByKey(key)
let obj = JSON.parse(strJson)
console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))
let rectInfo = JSON.parse('[' + obj.$rect + ']')
console.info("[getInspectorByKey] rectInfo is: " + rectInfo);
console.info("[getInspectorByKey] rectInfo is: " + rectInfo)
this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 4b77ee2f
......@@ -19,9 +19,9 @@
| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） |
| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比） |
| colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比） |
| hueRotate | number&nbsp;\|&nbsp;string | '0deg' | 色相旋转效果，输入参数为旋转角度。 |
| colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ 4b77ee2f
......@@ -22,7 +22,7 @@
@Entry
@Component
struct AspectRatioExample {
private children: string[] = ['1', '2', '3', '4', '5', '6'];
private children: string[] = ['1', '2', '3', '4', '5', '6']
build() {
Column({ space: 20 }) {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 4b77ee2f
......@@ -25,7 +25,9 @@
## 示例
#### 普通菜单
### 示例1
普通菜单
```ts
// xxx.ets
......@@ -58,58 +60,59 @@ struct MenuExample {
![zh-cn_image_0000001174582862](figures/zh-cn_image_0000001174582862.gif)
#### 自定义内容菜单
### 示例2
```ts
// xxx.ets
import router from '@system.router';
自定义内容菜单
```ts
@Entry
@Component
struct MenuExample {
@State listData: number[] = [0, 0, 0]
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text('text1')
.fontSize(20)
.width(100)
.height(50)
.textAlign(TextAlign.Center)
Divider().height(10)
Text('text2')
.fontSize(20)
.width(100)
.height(50)
.textAlign(TextAlign.Center)
Divider().height(10)
Button('Next')
.fontSize(20)
.width(100)
.height(50)
.onClick(() => {
router.push({ uri: 'pages/details' })
})
ForEach(this.listData, (item, index) => {
Column() {
Row() {
Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 })
Text(`Menu${index + 1}`).fontSize(20)
}
.width('100%')
.height(30)
.justifyContent(FlexAlign.Center)
.align(Alignment.Center)
.onClick(() => {
console.info(`Menu${index + 1} Clicked!`)
})
if (index != this.listData.length - 1) {
Divider().height(10).width('80%').color('#ccc')
}
}.padding(5).height(40)
})
}.width(100)
}
build() {
Column() {
Text('click for menu')
.fontSize(20)
.margin({ top: 20 })
.bindMenu(this.MenuBuilder)
}
.height('100%')
.width('100%')
.margin({ top: 5 })
.bindMenu(this.MenuBuilder)
.backgroundColor('#f0f0f0')
}
}
```
![zh-cn_image_0000001186807708](figures/zh-cn_image_0000001186807708.gif)
#### 菜单(右键触发显示)
### 示例3
菜单(右键触发显示)
```ts
// xxx.ets
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 4b77ee2f
......@@ -25,6 +25,8 @@
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 |
## CustomPopupOptions<sup>8+</sup>类型说明
......@@ -39,6 +41,8 @@
| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。<br/>默认值：true |
| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 |
## 示例
......@@ -80,7 +84,7 @@ struct PopupExample {
secondaryButton: {
value: 'cancel',
action: () => {
this.handlePopup = !this.handlePopup;
this.handlePopup = !this.handlePopup
console.info('cancel Button click')
}
},
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ 4b77ee2f
......@@ -40,7 +40,7 @@
@Entry
@Component
struct TouchTargetExample {
@State text: string = "";
@State text: string = ""
build() {
Column({ space: 20 }) {
......@@ -49,7 +49,7 @@ struct TouchTargetExample {
Button("button1")
.responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
.onClick(() => {
this.text = 'button1 clicked';
this.text = 'button1 clicked'
})
// 热区宽度为按钮的一半，且右移一个按钮宽度，点击button2右侧左边，点击事件生效
......@@ -57,14 +57,14 @@ struct TouchTargetExample {
Button("button2")
.responseRegion({ x: '100%', y: 0, width: '50%', height: '100%' })
.onClick(() => {
this.text = 'button2 clicked';
this.text = 'button2 clicked'
})
// 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效
Text("{x:0,y:'100%',width:'100%',height:'100%'}")
Button("button3")
.responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
.onClick(() => {
this.text = 'button3 clicked';
this.text = 'button3 clicked'
})
Text(this.text).margin({ top: 50 })
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @ 4b77ee2f
......@@ -24,9 +24,9 @@
@Entry
@Component
struct FocusEventExample {
@State oneButtonColor: string = '#FFC0CB';
@State twoButtonColor: string = '#87CEFA';
@State threeButtonColor: string = '#90EE90';
@State oneButtonColor: string = '#FFC0CB'
@State twoButtonColor: string = '#87CEFA'
@State threeButtonColor: string = '#90EE90'
build() {
Column({ space: 20 }) {
......@@ -38,10 +38,10 @@ struct FocusEventExample {
.fontColor(Color.Black)
.focusable(true)
.onFocus(() => {
this.oneButtonColor = '#FF0000';
this.oneButtonColor = '#FF0000'
})
.onBlur(() => {
this.oneButtonColor = '#FFC0CB';
this.oneButtonColor = '#FFC0CB'
})
Button('Second Button')
.backgroundColor(this.twoButtonColor)
......@@ -50,10 +50,10 @@ struct FocusEventExample {
.fontColor(Color.Black)
.focusable(true)
.onFocus(() => {
this.twoButtonColor = '#FF0000';
this.twoButtonColor = '#FF0000'
})
.onBlur(() => {
this.twoButtonColor = '#87CEFA';
this.twoButtonColor = '#87CEFA'
})
Button('Third Button')
.backgroundColor(this.threeButtonColor)
......@@ -62,10 +62,10 @@ struct FocusEventExample {
.fontColor(Color.Black)
.focusable(true)
.onFocus(() => {
this.threeButtonColor = '#FF0000';
this.threeButtonColor = '#FF0000'
})
.onBlur(() => {
this.threeButtonColor = '#90EE90';
this.threeButtonColor = '#90EE90'
})
}.width('100%').margin({ top: 20 })
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或