1# @ohos.arkui.advanced.ComposeTitleBar (One- or Two-Row Title Bar with Profile Picture) 2 3 4A one- or two-row title bar with profile picture is 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 "@ohos.arkui.advanced.ComposeTitleBar" 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## ComposeTitleBar 28 29ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>}) 30 31**Decorator**: @Component 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type| Mandatory| Description| 38| -------- | -------- | -------- | -------- | 39| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | No| A single menu item for the profile picture on the left.| 40| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Title.| 41| subtitle | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle.| 42| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | No| List of menu items on the right.| 43 44 45## ComposeTitleBarMenuItem 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon.| 50| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br> **true**: The item is enabled.<br> **false**: The item is disabled.| 51| action | () => void | No| Action to perform. This parameter is not available for the item attribute.| 52 53## Events 54The [universal events](ts-universal-events-click.md) are not supported. 55 56## Example 57 58```ts 59import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" 60import promptAction from '@ohos.promptAction' 61 62interface menuItem { 63 value: Resource; 64 isEnabled?: boolean; 65 action?: () => void 66} 67 68@Entry 69@Component 70struct Index { 71 private menuItems: Array<menuItem> = [ 72 { 73 value: $r('app.media.ic_public_save'), 74 isEnabled: true, 75 action: () => promptAction.showToast({ message: "show toast index 1" }) 76 }, 77 { 78 value: $r('app.media.ic_public_save'), 79 isEnabled: true, 80 action: () => promptAction.showToast({ message: "show toast index 1" }) 81 }, 82 { 83 value: $r('app.media.ic_public_save'), 84 isEnabled: true, 85 action: () => promptAction.showToast({ message: "show toast index 1" }) 86 }, 87 { 88 value: $r('app.media.ic_public_save'), 89 isEnabled: true, 90 action: () => promptAction.showToast({ message: "show toast index 1" }) 91 }, 92 ] 93 94 build() { 95 Row() { 96 Column() { 97 Divider().height(2).color(0xCCCCCC) 98 ComposeTitleBar({ 99 title: "Title", 100 subtitle: "Subtitle", 101 menuItems: this.menuItems.slice(0, 1), 102 }) 103 Divider().height(2).color(0xCCCCCC) 104 ComposeTitleBar({ 105 title: "Title", 106 subtitle: "Subtitle", 107 menuItems: this.menuItems.slice(0, 2), 108 }) 109 Divider().height(2).color(0xCCCCCC) 110 ComposeTitleBar({ 111 title: "Title", 112 subtitle: "Subtitle", 113 menuItems: this.menuItems, 114 }) 115 Divider().height(2).color(0xCCCCCC) 116 ComposeTitleBar({ 117 menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'), 118 action: () => promptAction.showToast({ message: "show toast index 1" }) 119 }], 120 title: "Title", 121 subtitle: "Subtitle", 122 item: { isEnabled: true, value: $r('app.media.app_icon') } 123 }) 124 Divider().height(2).color(0xCCCCCC) 125 } 126 }.height('100%') 127 } 128} 129``` 130 131 132
