Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

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

提交 e68672f4 编写于 作者: M match 提交者： matchzhou
浏览文件
操作

示例文档整改 

Signed-off-by: Nmatchzhou <zhouqingfeng2@huawei.com>
上级 cd982c66
隐藏空白更改
内联 并排
Showing with 121 addition and 65 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ e68672f4
......@@ -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)
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ e68672f4
......@@ -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-methods-action-sheet.md
浏览文件 @ e68672f4
......@@ -21,10 +21,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 +34,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 +43,6 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
```ts
// xxx.ets
@Entry
@Component
struct ActionSheetExample {
......@@ -54,12 +53,18 @@ struct ActionSheetExample {
ActionSheet.show({
title: 'ActionSheet title',
message: 'message',
autoCancel: true,
confirm: {
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled');
}
},
cancel: () => {
console.log('actionSheet canceled');
},
alignment: DialogAlignment.Center,
offset: { dx: -20, dy: 150 },
sheets: [
{
title: 'apples',
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ e68672f4
......@@ -11,7 +11,7 @@
| 名称 | 参数类型 | 参数描述 |
| ---- | --------------- | -------- |
| show | AlertDialogParamWithConfirm&nbsp;\|&nbsp;AlertDialogParamWithButtons | 定义并显示AlertDialog组件。 |
| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 |
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -19,7 +19,7 @@
| 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所在位置的偏移量。 |
......@@ -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 | 否 | 弹窗容器宽度所占用栅格数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
## 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
浏览文件 @ e68672f4
......@@ -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 | 否 | 弹窗宽度占栅格宽度的个数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
## CustomDialogController
......@@ -101,23 +86,81 @@ struct CustomDialogExample {
}
}
@CustomDialog
struct customStyleExample {
@Link textValue: string
@Link inputValue: string
controller: CustomDialogController
cancel: () => void
confirm: () => void
build() {
Column() {
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
.onChange((value: string) => {
this.textValue = value
})
Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
this.controller.close()
this.cancel()
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('confirm')
.onClick(() => {
this.inputValue = this.textValue
this.controller.close()
this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}.width('96%')
}
}
@Entry
@Component
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.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false // 弹窗底色为白色，宽度受gridCount属性影响
})
customerStyleController: CustomDialogController = new CustomDialogController({
builder: customStyleExample({
cancel: this.onCancel,
confirm: this.onAccept,
textValue: $textValue,
inputValue: $inputValue
}),
cancel: this.existApp,
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 2,
customStyle: true // 弹窗底色为透明，宽度受@CustomDialog修饰的组件容器属性影响
})
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')
}
......@@ -128,6 +171,10 @@ struct CustomDialogUser {
.onClick(() => {
this.dialogController.open()
}).backgroundColor(0x317aff)
Button('customStyle')
.onClick(() => {
this.customerStyleController.open()
}).backgroundColor(0x317aff).margin({ top: 5 })
}.width('100%').margin({ top: 5 })
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ e68672f4
......@@ -61,48 +61,45 @@ struct MenuExample {
#### 自定义内容菜单
```ts
// xxx.ets
import router from '@system.router';
@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')
}
}
```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或