1# @ohos.arkui.advanced.ToolBar (Toolbar) 2 3 4The **\<Toolbar>** component is used to host a set of action options related to the current screen, displayed at the bottom of the screen. It can display five child components. When there are six or more child components, the first four are displayed and the others are moved to the **More** option on the toolbar. 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 { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar' 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-universal-attributes-size.md) are supported. 25 26## ToolBar 27 28Toolbar({toolBarList: ToolBarOptions, activateIndex?: number, controller: TabsController}) 29 30**Decorator**: @Component 31 32**System capability**: SystemCapability.ArkUI.ArkUI.Full 33 34**Parameters** 35 36| Name| Type| Mandatory| Decorator | Description | 37| -------- | -------- | -------- |-------------|---------------------| 38| toolBarList | [ToolBarOptions](#toolbaroptions) | Yes| @ObjectLink | Toolbar list. | 39| activateIndex | number | No| @Prop | Index of the active option.<br>Default value: **1**| 40| controller | [TabsController](ts-container-tabs.md#tabscontroller) | Yes| - | Style of the filter. | 41 42 43## ToolBarOptions 44 45| Name| Type| Mandatory| Description| 46| -------- | -------- | -------- | -------- | 47| content | [ResourceStr](ts-types.md#resourcestr) | Yes| Text of the toolbar option.| 48| action | () => void | No| Click event of the toolbar option.| 49| icon | [Resource](ts-types.md#resource) | No| Icon of the toolbar option.| 50| state | [ItemState](#itemstate) | No| Status of the toolbar option.<br>Default value: **ENABLE**| 51 52 53## ItemState 54 55| Name| Value| Description| 56| -------- | -------- | -------- | 57| ENABLE | 1 | The toolbar option is enabled.| 58| DISABLE | 2 | The toolbar option is disabled.| 59| ACTIVATE | 3 | The toolbar option is activated.| 60 61## Events 62The [universal events](ts-universal-events-click.md) are supported. 63 64## Example 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:'Cut Super Long Text', 82 icon: $r('sys.media.ohos_ic_public_share'), 83 action: () => { 84 }, 85 }) 86 this.toolbarList.push({ 87 content: 'Copy', 88 icon: $r('sys.media.ohos_ic_public_copy'), 89 action: () => { 90 }, 91 state:ItemState.DISABLE 92 }) 93 this.toolbarList.push({ 94 content: 'Paste', 95 icon: $r('sys.media.ohos_ic_public_paste'), 96 action: () => { 97 }, 98 state:ItemState.ACTIVATE 99 }) 100 this.toolbarList.push({ 101 content:'Select All', 102 icon: $r('sys.media.ohos_ic_public_select_all'), 103 action: () => { 104 }, 105 }) 106 this.toolbarList.push({ 107 content: 'Share', 108 icon: $r('sys.media.ohos_ic_public_share'), 109 action: () => { 110 }, 111 }) 112 this.toolbarList.push({ 113 content: 'Share', 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
