1# @ohos.arkui.advanced.EditableTitleBar (Editable Title Bar) 2 3 4The editable title bar is a title bar that comes with button icons, typically **Cancel** on the left and **Confirm** on the right, on a multi-select or editing page. 5 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Modules to Import 13 14``` 15import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar" 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-universal-attributes-size.md) are not supported. 25 26 27## EditableTitleBar 28 29EditableTitleBar({leftIconType: EditableLeftIconType, title: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, onSave?: () => void, onCancel?: () =>void}) 30 31**Decorator**: @Component 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type| Mandatory| Description| 38| -------- | -------- | -------- | -------- | 39| leftIconStyle | [EditableLeftIconType](#editablelefticontype) | Yes| Type of the icon on the left.| 40| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Title.| 41| menuItems | Array<[EditableTitleBarMenuItem](#editabletitlebarmenuitem)> | No| List of menu items on the right.| 42| onSave | () => void | No| Callback invoked when the Save icon is clicked.| 43| onCancel | () => void | No| Callback invoked when the left icon is clicked to cancel the operation.| 44 45 46## EditableLeftIconType 47 48| Name| Value| Description| 49| -------- | -------- | -------- | 50| Back | 0 | Back.| 51| Cancel | 1 | Cancel.| 52 53 54## EditableTitleBarMenuItem 55 56| Name| Type| Mandatory| Description| 57| -------- | -------- | -------- | -------- | 58| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon.| 59| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br> **true**: The item is enabled.<br> **false**: The item is disabled.| 60| action | () => void | No| Action to perform.| 61 62## Events 63The [universal events](ts-universal-events-click.md) are not supported. 64 65## Example 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: "Edit", 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: "Edit", 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
