diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582844.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582844.gif index 30e89347337d9e358d4b823c7658490e032eb435..639261bd9e9997074cd45491807a58bb79a5def2 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582844.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582844.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186807708.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186807708.gif index 8eceb3bf5313485a1fedda5768e70cdb5febc464..c2468d1491af049673574a097a107a3e6c1b417d 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186807708.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001186807708.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001241668363.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001241668363.gif index 502888c25bb21b3803858f9c436cca23d9dc29d0..fba237dad5fc43609bb5ebcf6b0310328800d9f6 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001241668363.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001241668363.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif index 32d2334360f9fd90afd1709f50a39add4e2196c1..3c7f41bb43465b26d9545482a6c42621a42b360b 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001251007721.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md index d3201827e9f9528d5b449a760534c996958e5ab5..d03b65792c3c407408870796225e0bbada42f951 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -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%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md index d5e0b6879170894cd859e1882783c798a6afeb76..8396476e8ad0867408a4cd801fd7d65e9758a88c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md @@ -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() + }) } } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 3928f356b22cc0066f87e55ad2ebd6ea136ff530..bf56800c5b2345d524b0d321b9986e3a0dbb99d6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -23,7 +23,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) | 参数名 | 参数类型 | 必填 | 参数描述 | | ---- | ---------- | -----| -------------- | -| type | ToggleType | 是 | 开关类型。 | +| type | [ToggleType](#toggletype枚举说明) | 是 | 开关类型。 | | isOn | boolean | 否 | 开关是否打开，true：打开，false：关闭。
默认值：false | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index 7e03805a45bfb67da494a67a7025450c05ffa42f..43487f3c6d291a02fdc8526423500110b6887bc8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -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) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md index 59b184476c6458269984d678abb4df476e9b576c..a5c39cd63bb5a4d76bf939a4748781b1187ebace 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -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 }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index b00ecd9c6be46ac428f017c744e1115b1a07cd35..eefeda849adbbaa2e4d9333f31da124de59ce010 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -3,13 +3,9 @@ 列表弹窗。 > **说明：** -> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限 - -无 - ## ActionSheet.show @@ -21,10 +17,10 @@ show(value: { title: string | Resource, message: string  | 参数名 | 参数类型 | 必填 | 参数描述 | | ---------- | -------------------------- | ------- | ----------------------------- | -| title | string \| [Resource](ts-types.md#resource) | 是 | 弹窗标题。 | -| message | string \| [Resource](ts-types.md#resource) | 是 | 弹窗内容。 | +| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗标题。 | +| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | -| confirm | {
value: string \| [Resource](ts-types.md#resource),
action: () => void
} | 否 | 确认按钮的文本内容和点击回调。
默认值：
value：按钮文本内容。
action: 按钮选中时的回调。 | +| confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | 否 | 确认按钮的文本内容和点击回调。
默认值：
value：按钮文本内容。
action: 按钮选中时的回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Bottom | | offset | {
dx: Length,
dy: Length
} | 否 | 弹窗相对alignment所在位置的偏移量。{
dx: 0,
dy: 0
} | @@ -34,8 +30,8 @@ show(value: { title: string | Resource, message: string  | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | ------------------------------------------------------------ | ---- | ----------------- | -| title | string \| [Resource](ts-types.md#resource) | 是 | 选项的文本内容。 | -| icon | string \| [Resource](ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 | +| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 选项的文本内容。 | +| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标，默认无图标显示。 | | action | ()=>void | 是 | 选项选中的回调。 | @@ -43,7 +39,6 @@ show(value: { title: string | Resource, message: string  ```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') } } ] diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index ffb54ddf303b00aa927bdc538a69dfd4022c9c66..4b3bdc23ba12b695df9873770610be0362a31628 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -11,7 +11,7 @@ | 名称 | 参数类型 | 参数描述 | | ---- | --------------- | -------- | -| show | AlertDialogParamWithConfirm \| AlertDialogParamWithButtons | 定义并显示AlertDialog组件。 | +| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 | ## AlertDialogParamWithConfirm对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | @@ -19,11 +19,11 @@ | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | -| confirm | {
value: string \| [Resource](ts-types.md#resource),
fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource),
backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource),
action: () => void
} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 | +| confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?:  [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | -| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。
**说明：**
当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 | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | -| primaryButton | {
value: string \| [Resource](ts-types.md#resource),
fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource),
backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource),
action: () => void;
} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | -| secondaryButton | {
value: string \| [Resource](ts-types.md#resource),
fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource),
backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource),
action: () => void;
} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | +| primaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | +| secondaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：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 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index 69dce85187ccc50c4f54e253fe9ce85b5c4fcf77..945988137845bb99a3449dba7610f1b29f1ec70d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -22,24 +22,9 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | cancel | () => void | 否 | 点击遮障层退出时的回调。 | | autoCancel | boolean | 否 | 是否允许点击遮障层退出。
默认值：true | | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | -| offset | {
dx: Length \| [Resource](ts-types.md#resource),
dy: Length  \| [Resource](ts-types.md#resource)
} | 否 | 弹窗相对alignment所在位置的偏移量。 | +| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | | customStyle | boolean | 否 | 弹窗容器样式是否自定义。
默认值：false | -| gridCount8+ | number | 否 | 弹窗宽度占栅格宽度的个数。 | - -## DialogAlignment枚举说明 - -| 名称 | 描述 | -| ------------------------ | ------------------------------------------------------ | -| Top | 垂直顶部对齐。 | -| Center | 垂直居中对齐。 | -| Bottom | 垂直底部对齐。 | -| Default | 默认对齐。
**说明：**
与枚举值Center效果相同。 | -| TopStart8+ | 左上对齐。 | -| TopEnd8+ | 右上对齐。 | -| CenterStart8+ | 左中对齐。 | -| CenterEnd8+ | 右中对齐。 | -| BottomStart8+ | 左下对齐。 | -| BottomEnd8+ | 右下对齐。 | +| gridCount8+ | 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') } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md index df6b4f8b24e75937f0d1109893055cd3b00a03a5..25616026704a2146cdc171cd6ceb250a3aee3e79 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -49,7 +49,7 @@ struct Index { .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) .onDragStart(()=>{ // 拖拽时关闭菜单 - ContextMenu.close(); + ContextMenu.close() }) } .width('100%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index 9f43f0a9139c4489a313bdf3a208dad2d1fee6d2..f1ad36dfd7f9caec182fb07f44812112c588ebe6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -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] diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 3fc5257703195527dba8b5c37e8497b69fd9bb54..09b45008a49582d537d1896e552b0cda0125e538 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -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 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | | sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比） | | hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。 | +| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 832938c1704c97a306e54eb44448efc33227b9e8..86660cec308c85cb96f356972f8b34b69a3eb850 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -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 }) { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index 92463eb228b273e59b141143d599d52b7bbafed5..e95f066470d5881d87ab5b2e32b56b9b25a158a7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -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 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index c03775fc9dbeb8e98226a3df3aefd65d7b39d3ae..16070d610f5dd2bbca8bfae08bfd95aa696c71e9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -25,6 +25,8 @@ | primaryButton | {
value: string,
action: () => void
} | 否 | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 | | secondaryButton | {
value: string,
action: () => void
} | 否 | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 | | onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | +| arrowOffset9+ | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 | +| showInSubWindow9+ | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 | ## CustomPopupOptions8+类型说明 @@ -39,6 +41,8 @@ | enableArrow | boolean | 否 | 是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。
默认值：true | | autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。
默认值：true | | onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | +| arrowOffset9+ | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 | +| showInSubWindow9+ | 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') } }, diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md index ffa706268f3bd28b93edaa5944ccca29d365c4ca..aa8a4903a08a0394c911ef53a797789add582904 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md @@ -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 }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md index 3f9aa271b4b137b384542758d11a5815086e1c34..8da2d801d8da08ef4d43be199eca9e23301a665a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md @@ -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 }) }