1# @ohos.arkui.advanced.ToolBar (工具栏) 2 3 4工具栏用于展示针对当前界面内容的操作选项，在界面底部显示。底部最多显示5个入口，超过则收纳入“更多”子项中，在最右侧显示。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24支持[通用属性](ts-universal-attributes-size.md) 25 26## ToolBar 27 28Toolbar({toolBarList: ToolBarOptions, activateIndex?: number, controller: TabsController}) 29 30**装饰器类型：**\@Component 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数：** 35 36| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 37| -------- | -------- | -------- |-------------|---------------------| 38| toolBarList | [ToolBarOptions](#toolbaroptions) | 是 | @ObjectLink | 工具栏列表。 | 39| activateIndex | number | 否 | @Prop | 激活态的子项。<br/>默认值：-1。 | 40| controller | [TabsController](ts-container-tabs.md#tabscontroller) | 是 | - | 筛选器的样式类型。 | 41 42 43## ToolBarOptions 44 45| 名称 | 类型 | 必填 | 说明 | 46| -------- | -------- | -------- | -------- | 47| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 工具栏子项的文本。 | 48| action | () => void | 否 | 工具栏子项点击事件。 | 49| icon | [Resource](ts-types.md#resource) | 否 | 工具栏子项的图标。 | 50| state | [ItemState](#itemstate) | 否 | 工具栏子项的状态，默认为ENABLE。 | 51 52 53## ItemState 54 55| 名称 | 值 | 说明 | 56| -------- | -------- | -------- | 57| ENABLE | 1 | 工具栏子项为正常可点击状态。 | 58| DISABLE | 2 | 工具栏子项为不可点击状态。 | 59| ACTIVATE | 3 | 工具栏子项为激活状态，可点击。 | 60 61## 事件 62支持[通用事件](ts-universal-events-click.md) 63 64## 示例 65 66```ts 67import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar' 68 69enum ItemState { 70 ENABLE = 1, 71 DISABLE = 2, 72 ACTIVATE = 3 73} 74 75@Entry 76@Component 77struct Index { 78 @State toolbarList: ToolBarOptions = new ToolBarOptions() 79 aboutToAppear() { 80 this.toolbarList.push({ 81 content: '剪贴我是超超超超超超超超超长样式', 82 icon: $r('sys.media.ohos_ic_public_share'), 83 action: () => { 84 }, 85 }) 86 this.toolbarList.push({ 87 content: '拷贝', 88 icon: $r('sys.media.ohos_ic_public_copy'), 89 action: () => { 90 }, 91 state:ItemState.DISABLE 92 }) 93 this.toolbarList.push({ 94 content: '粘贴', 95 icon: $r('sys.media.ohos_ic_public_paste'), 96 action: () => { 97 }, 98 state:ItemState.ACTIVATE 99 }) 100 this.toolbarList.push({ 101 content: '全选', 102 icon: $r('sys.media.ohos_ic_public_select_all'), 103 action: () => { 104 }, 105 }) 106 this.toolbarList.push({ 107 content: '分享', 108 icon: $r('sys.media.ohos_ic_public_share'), 109 action: () => { 110 }, 111 }) 112 this.toolbarList.push({ 113 content: '分享', 114 icon: $r('sys.media.ohos_ic_public_share'), 115 action: () => { 116 }, 117 }) 118 } 119 build() { 120 Row() { 121 Stack() { 122 Column() { 123 ToolBar({ 124 activateIndex: 2, 125 toolBarList: this.toolbarList, 126 }) 127 } 128 }.align(Alignment.Bottom) 129 .width('100%').height('100%') 130 } 131 } 132} 133``` 134 135 136
