1# @ohos.arkui.advanced.EditableTitleBar (编辑页面标题栏) 2 3 4编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar" 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26 27## EditableTitleBar 28 29EditableTitleBar({leftIconType: EditableLeftIconType, title: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, onSave?: () => void, onCancel?: () =>void}) 30 31**装饰器类型：**\@Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 名称 | 参数类型 | 必填 | 说明 | 38| -------- | -------- | -------- | -------- | 39| leftIconStyle | [EditableLeftIconType](#editablelefticontype) | 是 | 左侧按钮类型。 | 40| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 标题。 | 41| menuItems | Array<[EditableTitleBarMenuItem](#editabletitlebarmenuitem)> | 否 | 右侧菜单项目列表。 | 42| onSave | () => void | 否 | 保存时的动作闭包。 | 43| onCancel | () => void | 否 | 当左侧按钮类型为 Cancel，触发取消时的动作闭包。 | 44 45 46## EditableLeftIconType 47 48| 名称 | 值 | 说明 | 49| -------- | -------- | -------- | 50| Back | 0 | 返回按钮。 | 51| Cancel | 1 | 取消按钮。 | 52 53 54## EditableTitleBarMenuItem 55 56| 名称 | 类型 | 必填 | 说明 | 57| -------- | -------- | -------- | -------- | 58| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。 | 59| isEnabled | boolean | 否 | 是否启用，默认禁用。<br> isEnabled为true时，表示为启用。<br> isEnabled为false时，表示为禁用。 | 60| action | () => void | 否 | 触发时的动作闭包。 | 61 62## 事件 63不支持[通用事件](ts-universal-events-click.md) 64 65## 示例 66 67```ts 68import { EditableLeftIconType } from "@ohos.arkui.advanced.EditableTitleBar" 69import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar" 70import promptAction from '@ohos.promptAction' 71 72@Entry 73@Component 74struct Index { 75 build() { 76 Row() { 77 Column() { 78 Divider().height(2).color(0xCCCCCC) 79 EditableTitleBar({ 80 leftIconStyle: EditableLeftIconType.Cancel, 81 title: "编辑页面", 82 menuItems: [], 83 onCancel: () => { 84 promptAction.showToast({ message: "on cancel" }) 85 }, 86 onSave: () => { 87 promptAction.showToast({ message: "on save" }) 88 } 89 }) 90 Divider().height(2).color(0xCCCCCC) 91 EditableTitleBar({ 92 leftIconStyle: EditableLeftIconType.Back, 93 title: "编辑页面", 94 menuItems: [ 95 { value: $r('app.media.ic_public_reduce'), 96 isEnabled: false, 97 action: () => { 98 promptAction.showToast({ message: "show toast index 2" }) 99 } 100 } 101 ], 102 onSave: () => { 103 promptAction.showToast({ message: "on save" }) 104 } 105 }) 106 Divider().height(2).color(0xCCCCCC) 107 }.width('100%') 108 }.height('100%') 109 } 110} 111``` 112 113 114
