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