1# @ohos.arkui.advanced.SelectTitleBar (Drop-down Title Bar) 2 3 4The drop-down title bar is a title bar that contains a drop-down menu for switching between pages of different levels (configured with the Back button). 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 { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" 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## SelectTitleBar 27 28SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void}) 29 30**Decorator**: @Component 31 32**System capability**: SystemCapability.ArkUI.ArkUI.Full 33 34**Parameters** 35 36| Name| Type| Mandatory| Decorator| Description| 37| -------- | -------- | -------- | -------- | -------- | 38| selected | number | Yes| \@Prop | Index of the currently selected option.<br>The index of the first option is 0. If this attribute is not set, the default value **-1** will be used.| 39| options | Array<[SelectOption](ts-basic-components-select.md#selectoption)> | Yes| - | Options in the drop-down menu.| 40| menuItems | Array<[SelectTitleBarMenuItem](#selecttitlebarmenuitem)> | No| - | List of menu items on the right of the title bar.| 41| subtitle | [ResourceStr](ts-types.md#resourcestr) | No| - | Subtitle.| 42| badgeValue | number | No| - | Badge.| 43| hidesBackButton | boolean | No| - | Whether to hide the back arrow on the left.<br>Default value: **false** The value **true** means to hide the provider, and **false** means the opposite.| 44| onSelected | (index: number) => void | No| - | Callback invoked when an option in the drop-down menu is selected. The index of the selected option is passed in.| 45 46 47## SelectTitleBarMenuItem 48 49| Name| Type| Mandatory| Description| 50| -------- | -------- | -------- | -------- | 51| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon.| 52| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br>The value **true** means to enable the item, and **false** means the opposite.| 53| action | () => void | No| Action to perform.| 54 55## Events 56The [universal events](ts-universal-events-click.md) are not supported. 57 58## Example 59 60```ts 61import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" 62import promptAction from '@ohos.promptAction' 63 64interface menuItems { 65 value: Resource; 66 isEnabled?: boolean; 67 action?: () => void 68} 69 70@Entry 71@Component 72struct Index { 73 private menuItems:Array<menuItems> = 74 [ 75 { 76 value:$r('app.media.ic_public_save'), 77 isEnabled:true, 78 action:() => promptAction.showToast({ message: "show toast index 1" }) 79 }, 80 { 81 value:$r('app.media.ic_public_reduce'), 82 isEnabled:true, 83 action:() => promptAction.showToast({ message: "show toast index 2" }) 84 }, 85 { 86 value:$r('app.media.ic_public_edit'), 87 isEnabled:true, 88 action:() => promptAction.showToast({ message: "show toast index 3" }) 89 }, 90 { 91 value:$r('app.media.ic_public_reduce'), 92 isEnabled:true, 93 action:() => promptAction.showToast({ message: "show toast index 4" }) 94 } 95 ] 96 97 build() { 98 Row() { 99 Column() { 100 Divider().height(2).color(0xCCCCCC) 101 SelectTitleBar({ 102 options: [ 103 { value: 'All photos' }, 104 { value: 'Local (device)' }, 105 { value: 'Local (memory card)'} 106 ], 107 selected: 0, 108 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 109 hidesBackButton: true 110 }) 111 Divider().height(2).color(0xCCCCCC) 112 SelectTitleBar({ 113 options: [ 114 { value: 'All photos' }, 115 { value: 'Local (device)' }, 116 { value: 'Local (memory card)'} 117 ], 118 selected: 0, 119 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 120 hidesBackButton: false 121 }) 122 Divider().height(2).color(0xCCCCCC) 123 SelectTitleBar({ 124 options: [ 125 { value: 'All photos' }, 126 { value:'Local (device)' }, 127 { value:"Local (memory card)"} 128 ], 129 selected: 1, 130 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 131 subtitle: "example@example.com" 132 }) 133 Divider().height(2).color(0xCCCCCC) 134 SelectTitleBar({ 135 options: [ 136 { value: 'All photos' }, 137 { value: 'Local (device)' }, 138 { value: 'Local (memory card)'} 139 ], 140 selected: 1, 141 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 142 subtitle: "example@example.com", 143 menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'), 144 action: () => promptAction.showToast({ message: "show toast index 1" }) 145 }] 146 }) 147 Divider().height(2).color(0xCCCCCC) 148 SelectTitleBar({ 149 options: [ 150 { value: 'All photos' }, 151 { value:'Local (device)' }, 152 { value: 'Local (memory card)'} 153 ], 154 selected: 0, 155 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 156 subtitle: "example@example.com", 157 menuItems: this.menuItems, 158 badgeValue: 99, 159 hidesBackButton: true 160 }) 161 Divider().height(2).color(0xCCCCCC) 162 }.width('100%') 163 }.height('100%') 164 } 165} 166``` 167 168 169
