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