1# EditableTitleBar 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 '@kit.ArkUI' 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-component-general-attributes.md) are not supported. 25 26 27## EditableTitleBar 28 29EditableTitleBar({leftIconStyle: EditableLeftIconType, imageItem?: EditableTitleBarItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, isSaveIconRequired: boolean, onSave?: () => void, onCancel?: () =>void, options: EditableTitleBarOptions, contentMargin?: LocalizedMargin}) 30 31**Decorator**: @Component 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35| Name| Type| Mandatory| Decorator| Description | 36| -------- | -------- | -------- | -------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 37| leftIconStyle | [EditableLeftIconType](#editablelefticontype) | Yes| - | Type of the icon on the left.<br>Default value: **EditableLeftIconType.Back**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 38| imageItem<sup>12+</sup> | [EditableTitleBarItem](#editabletitlebaritem12) | No| - | A single menu item for the profile picture on the left.<br>Default value: **undefined**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 39| title | [ResourceStr](ts-types.md#resourcestr) | Yes| - | Title.<br>Default value: **''**, indicating that the title is empty<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 40| subtitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| - | Subtitle.<br>Default value: **''**, indicating that the subtitle is empty<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 41| menuItems | Array<[EditableTitleBarMenuItem](#editabletitlebarmenuitem)> | No| - | List of menu items on the right.<br>Default value: **undefined**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 42| isSaveIconRequired<sup>12+</sup> | boolean | Yes| - | Whether the save button on the right is required.<br>Default value: **true**, indicating that the save button on the right is required.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 43| onSave | () => void | No| - | Callback invoked when the Save icon is clicked.<br>Default value: **() => void**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 44| onCancel | () => void | No| - | Callback that is triggered when the cancel action is performed with the left Cancel icon.<br>Default value: **() => void**<br>Since API version 12: Callback that is triggered when the back action is performed with the left Back icon.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 45| options<sup>12+</sup> | [EditableTitleBarOptions](#editabletitlebaroptions12) | Yes| - | Title style.<br>Default value:<br>{<br>safeAreaTypes: [SafeAreaType.SYSTEM],<br>safeAreaEdges: [SafeAreaEdge.TOP], <br>backgroundColor: '#00000000'<br>}<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 46| contentMargin<sup>12+</sup> | [LocalizedMargin](ts-types.md#localizedmargin12) | No| @Prop | Margin of the content. Negative numbers are not supported.<br>Default value:<br> {start: LengthMetrics.resource(*$r('sys.float.margin_left')*), end: LengthMetrics.resource(*$r('sys.float.margin_right')*)}<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 47 48> **NOTE** 49> 50> The input parameter cannot be **undefined**, that is, calling **EditableTitleBar(undefined)** is not allowed. 51 52## EditableLeftIconType 53 54**Atomic service API**: This API can be used in atomic services since API version 11. 55 56**System capability**: SystemCapability.ArkUI.ArkUI.Full 57 58| Name| Value| Description| 59| -------- | -------- | -------- | 60| Back | 0 | Back.| 61| Cancel | 1 | Cancel.| 62 63## EditableTitleBarMenuItem 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67| Name| Type| Mandatory| Description | 68| -------- | -------- | -------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 69| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon resource.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 70| label<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 71| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **true**<br><br> **true**: The item is enabled.<br> **false**: The item is disabled.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 72| action | () => void | No| Action to perform.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 73 74## EditableTitleBarItem<sup>12+</sup> 75 76type EditableTitleBarItem = EditableTitleBarMenuItem 77 78**Atomic service API**: This API can be used in atomic services since API version 12. 79 80**System capability**: SystemCapability.ArkUI.ArkUI.Full 81 82| Type| Description| 83| -------- | -------- | 84| [EditableTitleBarMenuItem](#editabletitlebarmenuitem) | A single menu item for the profile picture on the left.| 85 86## EditableTitleBarOptions<sup>12+</sup> 87 88**Atomic service API**: This API can be used in atomic services since API version 12. 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92| Name| Type| Mandatory| Description| 93| -------- | -------- | -------- | -------- | 94| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the title bar.<br>Default value: **'#00000000'**| 95| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the title bar.<br>Default value: **[BlurStyle.NONE]**| 96| safeAreaTypes | Array <[SafeAreaType](ts-types.md#safeareatype10)> | No | Types of the expanded safe areas.<br>Default value: **[SafeAreaType.SYSTEM]**| 97| safeAreaEdges | Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | No | Edges for expanding the safe area.<br>Default value: **[SafeAreaEdge.TOP]**| 98 99## Events 100The [universal events](ts-component-general-events.md) are not supported. 101 102## Example 103 104### Example 1: Implementing an Editable Title Bar with a Custom Right Icon 105 This example demonstrates how to implement an editable title bar with a left icon, main title, and custom right icon area. 106 107```ts 108import { EditableLeftIconType, EditableTitleBar, promptAction } from '@kit.ArkUI'; 109 110@Entry 111@Component 112struct Index { 113 build() { 114 Row() { 115 Column() { 116 Divider().height(2).color(0xCCCCCC) 117 // Cancel button on the left and save button on the right. 118 EditableTitleBar({ 119 leftIconStyle: EditableLeftIconType.Cancel, 120 title: 'Edit', 121 menuItems: [], 122 onCancel: () => { 123 promptAction.showToast({ message: 'on cancel' }); 124 }, 125 onSave: () => { 126 promptAction.showToast({ message: 'on save' }); 127 } 128 }) 129 Divider().height(2).color(0xCCCCCC) 130 // Back button on the left, and custom cancel (disabled) and save buttons on the right. 131 EditableTitleBar({ 132 leftIconStyle: EditableLeftIconType.Back, 133 title: 'Edit', 134 menuItems: [ 135 { 136 value: $r('sys.media.ohos_ic_public_cancel'), 137 isEnabled: false, 138 action: () => { 139 promptAction.showToast({ message: 'show toast index 2' }); 140 } 141 } 142 ], 143 onSave: () => { 144 promptAction.showToast({ message: 'on save' }) 145 } 146 }) 147 Divider().height(2).color(0xCCCCCC) 148 }.width('100%') 149 }.height('100%') 150 } 151} 152``` 153 154 155 156### Example 2: Implementing an Editable Title Bar with Background Blur and a Profile Picture 157This example shows how to implement an editable title bar with background blur, a profile picture, and custom margins. 158 159```ts 160import { EditableLeftIconType, EditableTitleBar, LengthMetrics, promptAction, router } from '@kit.ArkUI'; 161 162@Entry 163@Component 164struct Index { 165 @State titleBarMargin: LocalizedMargin = { 166 start: LengthMetrics.vp(35), 167 end: LengthMetrics.vp(35), 168 }; 169 170 build() { 171 Row() { 172 Column() { 173 EditableTitleBar({ 174 leftIconStyle: EditableLeftIconType.Cancel, 175 title: 'Main title', 176 subtitle: 'Subtitle', 177 // Set the background blur effect. 178 options: { 179 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 180 }, 181 onSave: () => { 182 promptAction.showToast({ message: "on save" }); 183 }, 184 }) 185 Divider().height(2).color(0xCCCCCC); 186 EditableTitleBar({ 187 leftIconStyle: EditableLeftIconType.Cancel, 188 title: 'Main title', 189 subtitle: 'Subtitle', 190 // Remove the save button on the right. 191 isSaveIconRequired: false, 192 }) 193 Divider().height(2).color(0xCCCCCC); 194 EditableTitleBar({ 195 leftIconStyle: EditableLeftIconType.Back, 196 title: 'Main title', 197 subtitle: 'Subtitle', 198 isSaveIconRequired: false, 199 onCancel: () => { 200 router.back(); 201 }, 202 }) 203 Divider().height(2).color(0xCCCCCC); 204 EditableTitleBar({ 205 leftIconStyle: EditableLeftIconType.Back, 206 title: 'Main title', 207 subtitle: 'Subtitle', 208 menuItems: [ 209 { 210 value: $r('sys.media.ohos_ic_public_remove'), 211 isEnabled: true, 212 action: () => { 213 promptAction.showToast({ message: "show toast index 1" }); 214 } 215 } 216 ], 217 isSaveIconRequired: false, 218 // Action triggered when the Back icon on the left is clicked. 219 onCancel: () => { 220 router.back(); 221 }, 222 }) 223 Divider().height(2).color(0xCCCCCC); 224 EditableTitleBar({ 225 leftIconStyle: EditableLeftIconType.Back, 226 title: 'Main title', 227 subtitle: 'Subtitle', 228 // Set a clickable profile picture. 229 imageItem: { 230 value: $r('sys.media.ohos_ic_normal_white_grid_image'), 231 isEnabled: true, 232 action: () => { 233 promptAction.showToast({ message: "show toast index 2" }); 234 } 235 }, 236 // Set the content margin of the title bar. 237 contentMargin: this.titleBarMargin, 238 // Configure the icon on the right. 239 menuItems: [ 240 { 241 value: $r('sys.media.ohos_ic_public_remove'), 242 isEnabled: true, 243 action: () => { 244 promptAction.showToast({ message: "show toast index 3" }); 245 } 246 } 247 ], 248 onCancel: () => { 249 router.back(); 250 }, 251 }) 252 } 253 } 254 } 255} 256``` 257 258 259
