1# TabTitleBar 2 3 4页签型标题栏，用于页面之间的切换。仅一级页面适用。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10> 11> 该组件不支持在Wearable设备上使用。 12 13 14## 导入模块 15 16``` 17import { TabTitleBar } from '@kit.ArkUI'; 18``` 19 20 21## 子组件 22 23无 24 25## 属性 26不支持[通用属性](ts-component-general-attributes.md)。 27 28 29## TabTitleBar 30 31TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void}) 32 33**装饰器类型：**\@Component 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 40| -------- | -------- | -------- | -------- | -------- | 41| tabItems | Array<[TabTitleBarTabItem](#tabtitlebartabitem)> | 是 | - | 左侧页签项目列表，定义标题栏左侧的页签项目。 | 42| menuItems | Array<[TabTitleBarMenuItem](#tabtitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 | 43| swiperContent | () => void | 是 | \@BuilderParam | 页签列表关联的页面内容构造器。 | 44 45> **说明：** 46> 47> 入参对象不可为undefined，即`TabTitleBar(undefined)`。 48 49## TabTitleBarMenuItem 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53| 名称 | 类型 | 必填 | 说明 | 54| -------- | -------- | -------- | -------- | 55| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 56| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | Symbol图标资源，优先级大于value。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 57| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 58| isEnabled | boolean | 否 | 是否启用。默认禁用。true：启用，false：禁用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 59| action | () => void | 否 | 触发时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 60| accessibilityLevel<sup>18+<sup> | string | 否 | 标题栏右侧自定义按钮无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br/>支持的值为：<br/>"auto"：当前组件会转换'yes'。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 61| accessibilityText<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br/>默认值：有label默认值为当前项label属性内容，没有设置label时，默认值为“ ”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 62| accessibilityDescription<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br/>默认值为“单指双击即可执行”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 63 64## TabTitleBarTabItem 65 66**系统能力：** SystemCapability.ArkUI.ArkUI.Full 67 68| 名称 | 类型 | 必填 | 说明 | 69| -------- | -------- | -------- | -------- | 70| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 文字页签。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 71| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图片页签资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 72| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | Symbol图片页签资源，优先级大于icon。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 73 74 75## 事件 76不支持[通用事件](ts-component-general-events.md)。 77 78## 示例 79 80### 示例1（简单的页签型标题栏） 81该示例实现了带有左侧页签和右侧菜单列表的页签型标题栏。 82```ts 83import { TabTitleBar, Prompt, TabTitleBarTabItem, TabTitleBarMenuItem } from '@kit.ArkUI'; 84 85@Entry 86@Component 87struct Index { 88 @Builder 89 //定义页签列表关联的页面 90 componentBuilder() { 91 Text("#1ABC9C\nTURQUOISE") 92 .fontWeight(FontWeight.Bold) 93 .fontSize(14) 94 .width("100%") 95 .textAlign(TextAlign.Center) 96 .fontColor("#CCFFFFFF") 97 .backgroundColor("#1ABC9C") 98 Text("#16A085\nGREEN SEA") 99 .fontWeight(FontWeight.Bold) 100 .fontSize(14) 101 .width("100%") 102 .textAlign(TextAlign.Center) 103 .fontColor("#CCFFFFFF") 104 .backgroundColor("#16A085") 105 Text("#2ECC71\nEMERALD") 106 .fontWeight(FontWeight.Bold) 107 .fontSize(14) 108 .width("100%") 109 .textAlign(TextAlign.Center) 110 .fontColor("#CCFFFFFF") 111 .backgroundColor("#2ECC71") 112 Text("#27AE60\nNEPHRITIS") 113 .fontWeight(FontWeight.Bold) 114 .fontSize(14) 115 .width("100%") 116 .textAlign(TextAlign.Center) 117 .fontColor("#CCFFFFFF") 118 .backgroundColor("#27AE60") 119 Text("#3498DB\nPETER RIVER") 120 .fontWeight(FontWeight.Bold) 121 .fontSize(14) 122 .width("100%") 123 .textAlign(TextAlign.Center) 124 .fontColor("#CCFFFFFF") 125 .backgroundColor("#3498DB") 126 } 127 128 //定义几个左侧的页签项目 129 private readonly tabItems: Array<TabTitleBarTabItem> = 130 [ 131 { title: '页签1' }, 132 { title: '页签2' }, 133 { title: '页签3' }, 134 { title: 'icon', icon: $r('sys.media.ohos_app_icon') }, 135 { title: '页签4' }, 136 ] 137 //定义几个右侧的菜单项目 138 private readonly menuItems: Array<TabTitleBarMenuItem> = [ 139 { 140 value: $r('sys.media.ohos_save_button_filled'), 141 isEnabled: true, 142 action: () => Prompt.showToast({ message: "on item click! index 0" }) 143 }, 144 { 145 value: $r('sys.media.ohos_ic_public_copy'), 146 isEnabled: true, 147 action: () => Prompt.showToast({ message: "on item click! index 1" }) 148 }, 149 { 150 value: $r('sys.media.ohos_ic_public_edit'), 151 isEnabled: true, 152 action: () => Prompt.showToast({ message: "on item click! index 2" }) 153 }, 154 ] 155 156 //TabTitleBar效果展示 157 build() { 158 Row() { 159 Column() { 160 TabTitleBar({ 161 swiperContent: this.componentBuilder, 162 tabItems: this.tabItems, 163 menuItems: this.menuItems, 164 }) 165 }.width('100%') 166 }.height('100%') 167 } 168} 169``` 170 171 172 173### 示例2（右侧自定义按钮播报） 174该示例通过设置标题栏右侧自定义按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 175```ts 176import { TabTitleBar, Prompt, TabTitleBarTabItem, TabTitleBarMenuItem } from '@kit.ArkUI'; 177 178@Entry 179@Component 180struct Index { 181 @Builder 182 //定义页签列表关联的页面 183 componentBuilder() { 184 Text("#1ABC9C\nTURQUOISE") 185 .fontWeight(FontWeight.Bold) 186 .fontSize(14) 187 .width("100%") 188 .textAlign(TextAlign.Center) 189 .fontColor("#CCFFFFFF") 190 .backgroundColor("#1ABC9C") 191 Text("#16A085\nGREEN SEA") 192 .fontWeight(FontWeight.Bold) 193 .fontSize(14) 194 .width("100%") 195 .textAlign(TextAlign.Center) 196 .fontColor("#CCFFFFFF") 197 .backgroundColor("#16A085") 198 Text("#2ECC71\nEMERALD") 199 .fontWeight(FontWeight.Bold) 200 .fontSize(14) 201 .width("100%") 202 .textAlign(TextAlign.Center) 203 .fontColor("#CCFFFFFF") 204 .backgroundColor("#2ECC71") 205 Text("#27AE60\nNEPHRITIS") 206 .fontWeight(FontWeight.Bold) 207 .fontSize(14) 208 .width("100%") 209 .textAlign(TextAlign.Center) 210 .fontColor("#CCFFFFFF") 211 .backgroundColor("#27AE60") 212 Text("#3498DB\nPETER RIVER") 213 .fontWeight(FontWeight.Bold) 214 .fontSize(14) 215 .width("100%") 216 .textAlign(TextAlign.Center) 217 .fontColor("#CCFFFFFF") 218 .backgroundColor("#3498DB") 219 } 220 221 //定义几个左侧的页签项目 222 private readonly tabItems: Array<TabTitleBarTabItem> = 223 [ 224 { title: '页签1' }, 225 { title: '页签2' }, 226 { title: '页签3' }, 227 { title: 'icon', icon: $r('sys.media.ohos_app_icon') }, 228 { title: '页签4' }, 229 ] 230 //定义几个右侧的菜单项目 231 private readonly menuItems: Array<TabTitleBarMenuItem> = [ 232 { 233 value: $r('sys.media.ohos_save_button_filled'), 234 isEnabled: true, 235 action: () => Prompt.showToast({ message: "on item click! index 0" }), 236 accessibilityText: '保存', 237 //此处为no，屏幕朗读不聚焦 238 accessibilityLevel: 'no', 239 accessibilityDescription: '点击操作保存图标' 240 }, 241 { 242 value: $r('sys.media.ohos_ic_public_copy'), 243 isEnabled: true, 244 action: () => Prompt.showToast({ message: "on item click! index 1" }), 245 accessibilityText: '复制', 246 accessibilityLevel: 'yes', 247 accessibilityDescription: '点击操作复制图标' 248 }, 249 { 250 value: $r('sys.media.ohos_ic_public_edit'), 251 isEnabled: true, 252 action: () => Prompt.showToast({ message: "on item click! index 2" }), 253 //屏幕朗读播报文本，优先级比label高 254 accessibilityText: '编辑', 255 //屏幕朗读是否可以聚焦到 256 accessibilityLevel: 'yes', 257 //屏幕朗读最后播报的描述文本 258 accessibilityDescription: '点击操作编辑图标' 259 }, 260 ] 261 262 //TabTitleBar效果展示 263 build() { 264 Row() { 265 Column() { 266 TabTitleBar({ 267 swiperContent: this.componentBuilder, 268 tabItems: this.tabItems, 269 menuItems: this.menuItems, 270 }) 271 }.width('100%') 272 }.height('100%') 273 } 274} 275``` 276 277 278### 示例3（设置Symbol类型图标） 279该示例通过设置TabTitleBarTabItem、TabTitleBarMenuItem的属性symbolStyle，展示了自定义Symbol类型图标。 280```ts 281import { TabTitleBar, Prompt, TabTitleBarTabItem, TabTitleBarMenuItem, SymbolGlyphModifier } from '@kit.ArkUI'; 282 283@Entry 284@Component 285struct Index { 286 @Builder 287 //定义页签列表关联的页面 288 componentBuilder() { 289 Text("#1ABC9C\nTURQUOISE") 290 .fontWeight(FontWeight.Bold) 291 .fontSize(14) 292 .width("100%") 293 .textAlign(TextAlign.Center) 294 .fontColor("#CCFFFFFF") 295 .backgroundColor("#1ABC9C") 296 Text("#16A085\nGREEN SEA") 297 .fontWeight(FontWeight.Bold) 298 .fontSize(14) 299 .width("100%") 300 .textAlign(TextAlign.Center) 301 .fontColor("#CCFFFFFF") 302 .backgroundColor("#16A085") 303 Text("#2ECC71\nEMERALD") 304 .fontWeight(FontWeight.Bold) 305 .fontSize(14) 306 .width("100%") 307 .textAlign(TextAlign.Center) 308 .fontColor("#CCFFFFFF") 309 .backgroundColor("#2ECC71") 310 Text("#27AE60\nNEPHRITIS") 311 .fontWeight(FontWeight.Bold) 312 .fontSize(14) 313 .width("100%") 314 .textAlign(TextAlign.Center) 315 .fontColor("#CCFFFFFF") 316 .backgroundColor("#27AE60") 317 Text("#3498DB\nPETER RIVER") 318 .fontWeight(FontWeight.Bold) 319 .fontSize(14) 320 .width("100%") 321 .textAlign(TextAlign.Center) 322 .fontColor("#CCFFFFFF") 323 .backgroundColor("#3498DB") 324 } 325 326 //定义几个左侧的页签项目 327 private readonly tabItems: Array<TabTitleBarTabItem> = 328 [ 329 { title: '页签1' }, 330 { title: '页签2' }, 331 { title: '页签3' }, 332 { 333 title: 'icon', 334 icon: $r('sys.media.ohos_app_icon'), 335 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.car')) 336 }, 337 { title: '页签4' }, 338 ] 339 //定义几个右侧的菜单项目 340 private readonly menuItems: Array<TabTitleBarMenuItem> = [ 341 { 342 value: $r('sys.media.ohos_save_button_filled'), 343 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.save')), 344 isEnabled: true, 345 action: () => Prompt.showToast({ message: "on item click! index 0" }), 346 accessibilityText: '保存', 347 //此处为no，屏幕朗读不聚焦 348 accessibilityLevel: 'no', 349 accessibilityDescription: '点击操作保存图标' 350 }, 351 { 352 value: $r('sys.media.ohos_ic_public_copy'), 353 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.car')), 354 isEnabled: true, 355 action: () => Prompt.showToast({ message: "on item click! index 1" }), 356 accessibilityText: '复制', 357 accessibilityLevel: 'yes', 358 accessibilityDescription: '点击操作复制图标' 359 }, 360 { 361 value: $r('sys.media.ohos_ic_public_edit'), 362 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.ai_edit')), 363 isEnabled: true, 364 action: () => Prompt.showToast({ message: "on item click! index 2" }), 365 //屏幕朗读播报文本，优先级比label高 366 accessibilityText: '编辑', 367 //屏幕朗读是否可以聚焦到 368 accessibilityLevel: 'yes', 369 //屏幕朗读最后播报的描述文本 370 accessibilityDescription: '点击操作编辑图标' 371 }, 372 ] 373 374 //TabTitleBar效果展示 375 build() { 376 Row() { 377 Column() { 378 TabTitleBar({ 379 swiperContent: this.componentBuilder, 380 tabItems: this.tabItems, 381 menuItems: this.menuItems, 382 }) 383 }.width('100%') 384 }.height('100%') 385 } 386} 387``` 388
