1# ComposeTitleBar 2 3 4**ComposeTitleBar** represents a common title bar that contains a title, subtitle (optional), and profile picture (optional). It can come with a Back button for switching between pages of different levels. 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 { ComposeTitleBar } 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## ComposeTitleBar 27 28ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>}) 29 30**Decorator**: @Component 31 32**Atomic service API**: This API can be used in atomic services since API version 11. 33 34**System capability**: SystemCapability.ArkUI.ArkUI.Full 35 36| Name| Type| Mandatory| Description| 37| -------- | -------- | -------- | -------- | 38| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | No| A single menu item for the profile picture on the left.| 39| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Title.| 40| subtitle | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle.| 41| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | No| List of menu items on the right.| 42 43> **NOTE** 44> 45> The input parameter cannot be **undefined**, that is, calling **ComposeTitleBar(undefined)** is not allowed. 46 47## ComposeTitleBarMenuItem 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51| Name| Type| Mandatory| Description| 52| -------- | -------- | -------- | -------- | 53| 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.| 54| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Symbol icon resource, which has higher priority than **value**. <br>**Atomic service API**: This API can be used in atomic services since API version 18.| 55| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 56| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br> **true**: The item is enabled.<br> **false**: The item is disabled.<br>This property cannot be triggered by the **item** property.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 57| action | () => void | No| Action to perform. This parameter is not available for the item attribute.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 58| accessibilityLevel<sup>18+<sup> | string | No| Accessibility level. It determines whether the component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: It is treated as "yes" by the system.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 59| accessibilityText<sup>18+<sup> | ResourceStr | No| Accessibility text, that is, accessible label name. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected.<br>Default value: value of the **label** property if it is set and an empty string otherwise.<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 60| accessibilityDescription<sup>18+<sup> | ResourceStr | No| Accessible description. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected.<br>Default value: **"Double-tap to activate"**<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 61 62## Events 63The [universal events](ts-component-general-events.md) are not supported. 64 65## Example 66 67### Example 1: Implementing a Simple Title Bar 68This example showcases how to implement a simple title bar, a title bar with a back arrow, and a title bar with a list of menu items on the right side. 69```ts 70import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem } from '@kit.ArkUI' 71 72@Entry 73@Component 74struct Index { 75 // Define an array of menu items for the right side of the title bar. 76 private menuItems: Array<ComposeTitleBarMenuItem> = [ 77 { 78 // Resource for the menu icon 79 value: $r('sys.media.ohos_save_button_filled'), 80 // Enable the icon. 81 isEnabled: true, 82 // Action triggered when the menu item is clicked. 83 action: () => promptAction.showToast({ message: "show toast index 1" }) 84 }, 85 { 86 value: $r('sys.media.ohos_ic_public_copy'), 87 isEnabled: true, 88 action: () => promptAction.showToast({ message: "show toast index 1" }) 89 }, 90 { 91 value: $r('sys.media.ohos_ic_public_edit'), 92 isEnabled: true, 93 action: () => promptAction.showToast({ message: "show toast index 1" }) 94 }, 95 { 96 value: $r('sys.media.ohos_ic_public_remove'), 97 isEnabled: true, 98 action: () => promptAction.showToast({ message: "show toast index 1" }) 99 }, 100 ] 101 102 build() { 103 Row() { 104 Column() { 105 // Divider. 106 Divider().height(2).color(0xCCCCCC) 107 ComposeTitleBar({ 108 title: "Title", 109 subtitle: "Subtitle", 110 menuItems: this.menuItems.slice(0, 1), 111 }) 112 Divider().height(2).color(0xCCCCCC) 113 ComposeTitleBar({ 114 title: "Title", 115 subtitle: "Subtitle", 116 menuItems: this.menuItems.slice(0, 2), 117 }) 118 Divider().height(2).color(0xCCCCCC) 119 ComposeTitleBar({ 120 title: "Title", 121 subtitle: "Subtitle", 122 menuItems: this.menuItems, 123 }) 124 Divider().height(2).color(0xCCCCCC) 125 // Define the title bar with a profile picture. 126 ComposeTitleBar({ 127 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 128 action: () => promptAction.showToast({ message: "show toast index 1" }) 129 }], 130 title: "Title", 131 subtitle: "Subtitle", 132 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 133 }) 134 Divider().height(2).color(0xCCCCCC) 135 } 136 }.height('100%') 137 } 138} 139``` 140 141 142 143### Example 2: Implementing Screen Reader Announcement for the Custom Button on the Right Side 144This example customizes the screen reader announcement text by setting the **accessibilityText**, **accessibilityDescription**, and **accessibilityLevel** properties of the custom button on the right side of the title bar. 145```ts 146import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem } from '@kit.ArkUI' 147 148@Entry 149@Component 150struct Index { 151 // Define an array of menu items for the right side of the title bar. 152 private menuItems: Array<ComposeTitleBarMenuItem> = [ 153 { 154 // Resource for the menu icon 155 value: $r('sys.media.ohos_save_button_filled'), 156 // Enable the icon. 157 isEnabled: true, 158 // Action triggered when the menu item is clicked. 159 action: () => promptAction.showToast({ message: "show toast index 1" }), 160 // The screen reader will prioritize this text over the label. 161 accessibilityText: 'Save', 162 // The screen reader can focus on this item. 163 accessibilityLevel: 'yes', 164 // The screen reader will ultimately announce this text. 165 accessibilityDescription: 'Tap to save the icon' 166 }, 167 { 168 value: $r('sys.media.ohos_ic_public_copy'), 169 isEnabled: true, 170 action: () => promptAction.showToast({ message: "show toast index 1" }), 171 accessibilityText: 'Copy', 172 // The screen reader will not focus on this item. 173 accessibilityLevel: 'no', 174 accessibilityDescription: 'Tap to copy the icon' 175 }, 176 { 177 value: $r('sys.media.ohos_ic_public_edit'), 178 isEnabled: true, 179 action: () => promptAction.showToast({ message: "show toast index 1" }), 180 accessibilityText: 'Edit', 181 accessibilityLevel: 'yes', 182 accessibilityDescription: 'Tap to edit the icon' 183 }, 184 { 185 value: $r('sys.media.ohos_ic_public_remove'), 186 isEnabled: true, 187 action: () => promptAction.showToast({ message: "show toast index 1" }), 188 accessibilityText: 'Remove', 189 accessibilityLevel: 'yes', 190 accessibilityDescription: 'Tap to remove the icon' 191 }, 192 ] 193 194 build() { 195 Row() { 196 Column() { 197 // Divider. 198 Divider().height(2).color(0xCCCCCC) 199 ComposeTitleBar({ 200 title: "Title", 201 subtitle: "Subtitle", 202 menuItems: this.menuItems.slice(0, 1), 203 }) 204 Divider().height(2).color(0xCCCCCC) 205 ComposeTitleBar({ 206 title: "Title", 207 subtitle: "Subtitle", 208 menuItems: this.menuItems.slice(0, 2), 209 }) 210 Divider().height(2).color(0xCCCCCC) 211 ComposeTitleBar({ 212 title: "Title", 213 subtitle: "Subtitle", 214 menuItems: this.menuItems, 215 }) 216 Divider().height(2).color(0xCCCCCC) 217 // Define the title bar with a profile picture. 218 ComposeTitleBar({ 219 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 220 action: () => promptAction.showToast({ message: "show toast index 1" }) 221 }], 222 title: "Title", 223 subtitle: "Subtitle", 224 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 225 }) 226 Divider().height(2).color(0xCCCCCC) 227 } 228 }.height('100%') 229 } 230} 231``` 232 233 234 235### Example 3: Setting the Symbol Icon 236 237This example demonstrates how to use **symbolStyle** in **ComposeTitleBarMenuItem** to set custom symbol icons. 238 239```ts 240import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem, SymbolGlyphModifier } from '@kit.ArkUI' 241 242@Entry 243@Component 244struct Index { 245 // Define an array of menu items for the right side of the title bar. 246 private menuItems: Array<ComposeTitleBarMenuItem> = [ 247 { 248 // Resource for the menu icon 249 value: $r('sys.symbol.house'), 250 // Menu symbol icon 251 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]), 252 // Enable the icon. 253 isEnabled: true, 254 // Action triggered when the menu item is clicked. 255 action: () => promptAction.showToast({ message: "show toast index 1" }) 256 }, 257 { 258 value: $r('sys.symbol.house'), 259 isEnabled: true, 260 action: () => promptAction.showToast({ message: "show toast index 1" }) 261 }, 262 { 263 value: $r('sys.symbol.car'), 264 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Pink]), 265 isEnabled: true, 266 action: () => promptAction.showToast({ message: "show toast index 1" }) 267 }, 268 { 269 value: $r('sys.symbol.car'), 270 isEnabled: true, 271 action: () => promptAction.showToast({ message: "show toast index 1" }) 272 }, 273 ] 274 275 build() { 276 Row() { 277 Column() { 278 // Divider. 279 Divider().height(2).color(0xCCCCCC) 280 ComposeTitleBar({ 281 title: "Title", 282 subtitle: "Subtitle", 283 menuItems: this.menuItems.slice(0, 1), 284 }) 285 Divider().height(2).color(0xCCCCCC) 286 ComposeTitleBar({ 287 title: "Title", 288 subtitle: "Subtitle", 289 menuItems: this.menuItems.slice(0, 2), 290 }) 291 Divider().height(2).color(0xCCCCCC) 292 ComposeTitleBar({ 293 title: "Title", 294 subtitle: "Subtitle", 295 menuItems: this.menuItems, 296 }) 297 Divider().height(2).color(0xCCCCCC) 298 // Define the title bar with a profile picture. 299 ComposeTitleBar({ 300 menuItems: [{ isEnabled: true, value: $r('sys.symbol.heart'), 301 action: () => promptAction.showToast({ message: "show toast index 1" }) 302 }], 303 title: "Title", 304 subtitle: "Subtitle", 305 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 306 }) 307 Divider().height(2).color(0xCCCCCC) 308 } 309 }.height('100%') 310 } 311} 312``` 313 314 315
