1# @ohos.arkui.advanced.TabTitleBar (页签型标题栏) 2 3 4页签型标题栏，用于页面之间的切换。仅一级页面适用。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar" 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26 27## TabTitleBar 28 29TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void}) 30 31**装饰器类型：**\@Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 38| -------- | -------- | -------- | -------- | -------- | 39| tabItems | Array<[TabTitleBarTabItem](#tabtitlebartabitem)> | 是 | - | 左侧页签项目列表，定义标题栏左侧的页签项目。 | 40| menuItems | Array<[TabTitleBarMenuItem](#tabtitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 | 41| swiperContent | () => void | 是 | \@BuilderParam | 页签列表关联的页面内容构造器。 | 42 43 44## TabTitleBarMenuItem 45 46| 名称 | 类型 | 必填 | 说明 | 47| -------- | -------- | -------- | -------- | 48| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。 | 49| isEnabled | boolean | 否 | 是否启用。默认启用。true：启用，false：禁用。 | 50| action | () => void | 否 | 触发时的动作闭包。 | 51 52 53## TabTitleBarTabItem 54 55| 名称 | 类型 | 必填 | 说明 | 56| -------- | -------- | -------- | -------- | 57| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 文字页签。 | 58| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图片页签资源。 | 59 60 61## 事件 62不支持[通用事件](ts-universal-events-click.md) 63 64## 示例 65 66```ts 67import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar" 68import promptAction from '@ohos.promptAction' 69 70class tabItem { 71 title: ResourceStr; 72 icon?: ResourceStr; 73 constructor(title: ResourceStr,icon?: ResourceStr) { 74 this.title = title 75 this.icon = icon 76 } 77} 78 79interface menuItem { 80 value: ResourceStr; 81 isEnabled?: boolean; 82 action?: () => void 83} 84 85@Entry 86@Component 87struct Index { 88 @Builder 89 componentBuilder() { 90 Text("#1ABC9C\nTURQUOISE") 91 .fontWeight(FontWeight.Bold) 92 .fontSize(14) 93 .width("100%") 94 .textAlign(TextAlign.Center) 95 .fontColor("#CCFFFFFF") 96 .backgroundColor("#1ABC9C") 97 Text("#16A085\nGREEN SEA") 98 .fontWeight(FontWeight.Bold) 99 .fontSize(14) 100 .width("100%") 101 .textAlign(TextAlign.Center) 102 .fontColor("#CCFFFFFF") 103 .backgroundColor("#16A085") 104 Text("#2ECC71\nEMERALD") 105 .fontWeight(FontWeight.Bold) 106 .fontSize(14) 107 .width("100%") 108 .textAlign(TextAlign.Center) 109 .fontColor("#CCFFFFFF") 110 .backgroundColor("#2ECC71") 111 Text("#27AE60\nNEPHRITIS") 112 .fontWeight(FontWeight.Bold) 113 .fontSize(14) 114 .width("100%") 115 .textAlign(TextAlign.Center) 116 .fontColor("#CCFFFFFF") 117 .backgroundColor("#27AE60") 118 Text("#3498DB\nPETER RIVER") 119 .fontWeight(FontWeight.Bold) 120 .fontSize(14) 121 .width("100%") 122 .textAlign(TextAlign.Center) 123 .fontColor("#CCFFFFFF") 124 .backgroundColor("#3498DB") 125 } 126 127 private readonly tabItems: Array<tabItem> = [new tabItem('页签1'),new tabItem('页签2'),new tabItem('页签3'),new tabItem("Happy",$r('app.media.emoji_happy')),new tabItem('页签4')] 128 private readonly menuItems: Array<menuItem> = [ 129 { 130 value: $r('app.media.ic_public_reduce'), 131 isEnabled: true, 132 action: () => promptAction.showToast({ message: "on item click! index 0" }) 133 }, 134 { 135 value: $r('app.media.ic_public_edit'), 136 isEnabled: true, 137 action: () => promptAction.showToast({ message: "on item click! index 1" }) 138 }, 139 { 140 value: $r('app.media.ic_public_save'), 141 isEnabled: true, 142 action: () => promptAction.showToast({ message: "on item click! index 2" }) 143 }, 144 ] 145 146 build() { 147 Row() { 148 Column() { 149 TabTitleBar({ 150 swiperContent: this.componentBuilder, 151 tabItems: this.tabItems, 152 menuItems: this.menuItems, 153 }) 154 }.width('100%') 155 }.height('100%') 156 } 157} 158``` 159 160 161
