diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_editabletitlebar_example01.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_editabletitlebar_example01.png new file mode 100644 index 0000000000000000000000000000000000000000..9045f9b1730f3d9baecf6056cb562ec7f2411d35 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_editabletitlebar_example01.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_editabletitlebar_example02.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_editabletitlebar_example02.png new file mode 100644 index 0000000000000000000000000000000000000000..7fa96dd5d217d9bf1398ac95e1f12c9677234efe Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_editabletitlebar_example02.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example01.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example01.png index a1ed332a4fdc1cf0ceed0f942017e62c2f55d5d1..23f5980fcaaec5124d04be8837b56aeb0edad4c6 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example01.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example01.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example03.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example03.png index 762718d3e68637ae5642c10b44ce4aa621cea992..92896ff3152455ceb3e74242fb3074a1694e76b1 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example03.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example03.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example05.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example05.png index 748cb834f6dbd851ca0b5688774cefae2be1ba43..30c25a36f85092b4957e3eb2738a5909a1190b74 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example05.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example05.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example06.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example06.png index 0674f4b026da0b9ee6bfb0fc0efa79efa6ed49c9..7c6cf385ae8c1fafab83d3520f6dadc9feafeb7e 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example06.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example06.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example07.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example07.png index 3ffae9c524c0ae27665a4e8936265403037910bb..6bf0c39bffeabe15d8f78c5ca366b80b40f98f6d 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example07.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example07.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example08.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example08.png index 128fc10c4f6b488beac29c8d44ebe6a1fb0fb9e7..f3d2da241c37a3673429d1ab038a2a1c76f32624 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example08.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_image_subheader_example08.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-EditableTitleBar.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-EditableTitleBar.md index dfc7ea31da916c39b4ba1178b5cb004d92f8b405..4e4b7cfbdced52e93e344d019a3035ea1b1281b9 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-EditableTitleBar.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-EditableTitleBar.md @@ -121,6 +121,7 @@ struct Index { Row() { Column() { Divider().height(2).color(0xCCCCCC) + // 左侧取消按钮，右侧保存按钮。 EditableTitleBar({ leftIconStyle: EditableLeftIconType.Cancel, title: '编辑页面', @@ -133,12 +134,13 @@ struct Index { } }) Divider().height(2).color(0xCCCCCC) + // 左侧返回按钮，右侧自定义取消按钮（disabled）、保存按钮。 EditableTitleBar({ leftIconStyle: EditableLeftIconType.Back, title: '编辑页面', menuItems: [ { - value: $r('app.media.ic_public_reduce'), + value: $r('sys.media.ohos_ic_public_cancel'), isEnabled: false, action: () => { promptAction.showToast({ message: 'show toast index 2' }); @@ -156,7 +158,7 @@ struct Index { } ``` -![zh-cn_image_0000001617073302](figures/zh-cn_image_0000001617073302.png) +![zh-cn_image_editabletitlebar_example01](figures/zh-cn_image_editabletitlebar_example01.png) ### 示例2（头像与背景模糊标题栏） 该示例主要演示EditableTitleBar设置背景模糊、头像；取消右侧保存图标及自定义标题栏外边距的效果。 @@ -167,7 +169,7 @@ import { EditableLeftIconType, EditableTitleBar, LengthMetrics, promptAction, ro @Entry @Component struct Index { - @State titlebarMargin: LocalizedMargin = { + @State titleBarMargin: LocalizedMargin = { start: LengthMetrics.vp(35), end: LengthMetrics.vp(35), }; @@ -187,9 +189,7 @@ struct Index { promptAction.showToast({ message: "on save" }); }, }) - Divider().height(2).color(0xCCCCCC); - EditableTitleBar({ leftIconStyle: EditableLeftIconType.Cancel, title: '主标题', @@ -197,9 +197,7 @@ struct Index { // 取消右侧保存按钮 isSaveIconRequired: false, }) - Divider().height(2).color(0xCCCCCC); - EditableTitleBar({ leftIconStyle: EditableLeftIconType.Back, title: '主标题', @@ -209,9 +207,7 @@ struct Index { router.back(); }, }) - Divider().height(2).color(0xCCCCCC); - EditableTitleBar({ leftIconStyle: EditableLeftIconType.Back, title: '主标题', @@ -231,23 +227,21 @@ struct Index { router.back(); }, }) - Divider().height(2).color(0xCCCCCC); - EditableTitleBar({ leftIconStyle: EditableLeftIconType.Back, title: '主标题', subtitle: '副标题', // 设置可点击头像 imageItem: { - value: $r('app.media.img'), + value: $r('sys.media.ohos_ic_normal_white_grid_image'), isEnabled: true, action: () => { promptAction.showToast({ message: "show toast index 2" }); } }, // 设置标题栏外边距 - contentMargin: this.titlebarMargin, + contentMargin: this.titleBarMargin, // 右侧图标配置 menuItems: [ { @@ -268,13 +262,13 @@ struct Index { } ``` -![zh-cn_image_EditableTitleBar](figures/zh-cn_image_EditableTitleBar.png) +![zh-cn_image_editabletitlebar_example02](figures/zh-cn_image_editabletitlebar_example02.png) ### 示例3（右侧自定义按钮播报） 该示例通过设置标题栏的右侧自定义按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 ```ts -import { LengthMetrics, promptAction, router, EditableLeftIconType, EditableTitleBar } from '@kit.ArkUI'； +import { promptAction, router, EditableLeftIconType, EditableTitleBar } from '@kit.ArkUI'; @Entry @Component @@ -301,7 +295,7 @@ struct Index1 { title: '主标题', subtitle: '副标题', imageItem: { - value: $r('app.media.image'), + value: $r('sys.media.ohos_ic_normal_white_grid_image'), isEnabled: true, action: () => { promptAction.showToast({ message: "show toast index 1" }); diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SubHeader.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SubHeader.md index feddbd1c9e6a2b42fac8697df5f4b8768081c025..79b5451245e36c7c8cbecca37dd625dba3ac0c6b 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SubHeader.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SubHeader.md @@ -116,7 +116,7 @@ SubHeader({icon?: ResourceStr, iconSymbolOptions?: SymbolOptions, primaryTitle?: 该示例主要演示子标题左侧为icon、secondaryTitle，右侧operationType为按钮类型。 ```ts -import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' +import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component @@ -124,12 +124,13 @@ struct SubHeaderExample { build() { Column() { SubHeader({ - icon: $r('app.media.ic_public_community_messages'), + icon: $r('sys.media.ohos_ic_public_email'), secondaryTitle: '二级标题', operationType: OperationType.BUTTON, - operationItem: [{ value: '操作', + operationItem: [{ + value: '操作', action: () => { - promptAction.showToast({ message: 'demo' }) + promptAction.showToast({ message: 'demo' }); } }] }) @@ -138,13 +139,13 @@ struct SubHeaderExample { } ``` -![子标题1](figures/zh-cn_image_subheader_example01.png) +![zh-cn_image_subheader_example01](figures/zh-cn_image_subheader_example01.png) ### 示例2（双行文本内容型子标题） 该示例主要演示子标题左侧为primaryTitle、secondaryTitle，右侧operationType类型为TEXT_ARROW。 ```ts -import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' +import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component @@ -155,9 +156,10 @@ struct SubHeaderExample { primaryTitle: '一级标题', secondaryTitle: '二级标题', operationType: OperationType.TEXT_ARROW, - operationItem: [{ value: '更多', + operationItem: [{ + value: '更多', action: () => { - promptAction.showToast({ message: 'demo' }) + promptAction.showToast({ message: 'demo' }); } }] }) @@ -172,7 +174,7 @@ struct SubHeaderExample { 该示例主要演示子标题左侧为select，右侧operationType类型为ICON_GROUP。 ```ts -import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' +import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component @@ -180,29 +182,31 @@ struct SubHeaderExample { build() { Column() { SubHeader({ + // 左侧为select选择器 select: { options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], - value: 'selectdemo', + value: 'selectDemo', selected: 2, - onSelect: (index: number, value?: string) => { - promptAction.showToast({ message: 'demo' }) + onSelect: () => { + promptAction.showToast({ message: 'demo' }); } }, operationType: OperationType.ICON_GROUP, + // 右侧为三个icon图标 operationItem: [{ - value: $r('app.media.ic_public_community_messages'), + value: $r('sys.media.ohos_ic_public_email'), action: () => { promptAction.showToast({ message: 'demo' }) } }, { - value: $r('app.media.ic_public_community_messages'), + value: $r('sys.media.ohos_ic_public_email'), action: () => { - promptAction.showToast({ message: 'demo' }) + promptAction.showToast({ message: 'demo' }); } }, { - value: $r('app.media.ic_public_community_messages'), + value: $r('sys.media.ohos_ic_public_email'), action: () => { - promptAction.showToast({ message: 'demo' }) + promptAction.showToast({ message: 'demo' }); } }] }) @@ -211,14 +215,14 @@ struct SubHeaderExample { } ``` -![子标题5](figures/zh-cn_image_subheader_example03.png) +![zh-cn_image_subheader_example03](figures/zh-cn_image_subheader_example03.png) ### 示例4（设置左侧symbol图标） 该示例主要演示子标题左侧icon设置symbol图标。 ```ts -import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' +import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component @@ -226,15 +230,17 @@ struct SubHeaderExample { build() { Column() { SubHeader({ + // 设置icon为symbol图标 icon: $r('sys.symbol.ohos_wifi'), iconSymbolOptions: { effectStrategy: SymbolEffectStrategy.HIERARCHICAL, }, secondaryTitle: '标题', operationType: OperationType.BUTTON, - operationItem: [{ value: '操作', + operationItem: [{ + value: '操作', action: () => { - promptAction.showToast({ message: 'demo' }) + promptAction.showToast({ message: 'demo' }); } }] }) @@ -249,7 +255,7 @@ struct SubHeaderExample { 该示例主要演示子标题operationType设置为OperationType.ICON_GROUP，operationItem的value设置为symbol图标。 ```ts -import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' +import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component @@ -257,31 +263,34 @@ struct SubHeaderExample { build() { Column() { SubHeader({ + // 设置左侧select select: { options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], - value: 'selectdemo', + value: 'selectDemo', selected: 2, - onSelect: (index: number, value?: string) => { - promptAction.showToast({ message: 'demo' }) + onSelect: () => { + promptAction.showToast({ message: 'demo' }); } }, operationType: OperationType.ICON_GROUP, + // 设置右侧icon operationItem: [{ value: $r('sys.symbol.ohos_lungs'), action: () => { - promptAction.showToast({ message: 'icon1' }) + promptAction.showToast({ message: 'icon1' }); } }, { value: $r('sys.symbol.ohos_lungs'), action: () => { - promptAction.showToast({ message: 'icon2' }) + promptAction.showToast({ message: 'icon2' }); } }, { value: $r('sys.symbol.ohos_lungs'), action: () => { - promptAction.showToast({ message: 'icon3' }) + promptAction.showToast({ message: 'icon3' }); } }], + // 设置右侧icon图标symbol样式 operationSymbolOptions: [{ fontWeight: FontWeight.Lighter, }, { @@ -297,7 +306,7 @@ struct SubHeaderExample { } ``` -![子标题5](figures/zh-cn_image_subheader_example05.png) +![zh-cn_image_subheader_example05](figures/zh-cn_image_subheader_example05.png) ### 示例6（自定义标题内容） 该示例主要演示SubHeader设置titleBuilder自定义标题内容的效果。 @@ -308,17 +317,19 @@ import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component struct SubHeaderExample { + // 自定义左侧标题 @Builder TitleBuilder(): void { Text('自定义标题') .fontSize(24) - .fontColor(Color.Red) + .fontColor(Color.Blue) .fontWeight(FontWeight.Bold) } build() { Column() { SubHeader({ + // 调用TitleBuilder titleBuilder: () => { this.TitleBuilder(); }, @@ -329,7 +340,7 @@ struct SubHeaderExample { operationItem: [{ value: '更多信息', action: () => { - promptAction.showToast({ message: 'demo'}) + promptAction.showToast({ message: 'demo' }); } }] }) @@ -337,8 +348,7 @@ struct SubHeaderExample { } } ``` - -![子标题6](figures/zh-cn_image_subheader_example06.png) +![zh-cn_image_subheader_example06](figures/zh-cn_image_subheader_example06.png) ### 示例7（自定义标题样式） 该示例主要演示SubHeader设置标题和副标题字体样式以及标题内外边距的效果。 @@ -349,8 +359,9 @@ import { promptAction, OperationType, SubHeader, LengthMetrics, TextModifier } f @Entry @Component struct SubHeaderExample { - @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); - @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); + // 设置主副标题文本颜色 + @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); + @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); build() { Column() { @@ -363,9 +374,10 @@ struct SubHeaderExample { operationItem: [{ value: '更多信息', action: () => { - promptAction.showToast({ message: 'demo'}) + promptAction.showToast({ message: 'demo' }); } }], + // 标题内外间距 contentMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, contentPadding: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) } }) @@ -380,7 +392,7 @@ struct SubHeaderExample { ### 示例8（右侧按钮自定义播报） 该示例通过设置subheader的右侧按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 ```ts -import { promptAction, OperationType, SubHeader, TextModifier, LengthMetrics } from '@kit.ArkUI'; +import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; @Entry @Component @@ -390,7 +402,7 @@ struct SubHeaderExample { Divider().color('grey').width('100%').height('2vp') SubHeader({ // 图标+二级标题, 右侧button - icon: $r('app.media.app_icon'), + icon: $r('sys.media.ohos_ic_public_email'), secondaryTitle: '二级标题', operationType: OperationType.BUTTON, operationItem: [{ @@ -418,7 +430,7 @@ struct SubHeaderExample { //左侧select 右侧是icon_(依次获焦) select: { options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], - value: 'selectdemo', + value: 'selectDemo', selected: 0, onSelect: (index: number, value?: string) => { console.log(`subheader onselect index : ${index}, value: ${value}`); @@ -426,15 +438,15 @@ struct SubHeaderExample { }, operationType: OperationType.ICON_GROUP, operationItem: [{ - value: $r('app.media.app_icon'), + value: $r('sys.media.ohos_ic_public_email'), accessibilityText: '图标1', accessibilityLevel: 'yes', }, { - value: $r('app.media.app_icon'), + value: $r('sys.media.ohos_ic_public_email'), accessibilityText: '图标2', - accessibilityLevel: 'no', + accessibilityLevel: 'no', }, { - value: $r('app.media.app_icon'), + value: $r('sys.media.ohos_ic_public_email'), accessibilityText: '图标3', accessibilityDescription: '点击操作图标3', }] @@ -444,7 +456,7 @@ struct SubHeaderExample { } } ``` -![/zh-cn_image_subheader_example08](figures/zh-cn_image_subheader_example08.png) +![figures/zh-cn_image_subheader_example08](figures/zh-cn_image_subheader_example08.png) ### 示例9（右侧按钮设置默认获焦） 该示例通过设置subheader的右侧按钮属性defaultFocus使其默认获焦。 @@ -473,4 +485,4 @@ struct SubHeaderExample { } } ``` -![/SubHeaderDefaultFocus](figures/SubHeaderDefaultFocus.png) \ No newline at end of file +![/SubHeaderDefaultFocus](figures/SubHeaderDefaultFocus.png)