1# 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, toolBarModifier, ItemState } from '@kit.ArkUI' 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, dividerModifier: DividerModifier, toolBarModifier: ToolBarModifier}) 29 30**Decorator**: @Component 31 32**Atomic service API**: This API can be used in atomic services since API version 11. 33 34**System capability**: SystemCapability.ArkUI.ArkUI.Full 35 36**Parameters** 37 38| Name | Type | Mandatory | Decorator | Description | 39|-------------------------------|-----------------------------------------------------------|-----|-------------|------------------------------------------------------------------------------------------------------| 40| toolBarList | [ToolBarOptions](#toolbaroptions) | Yes | @ObjectLink | Toolbar list. | 41| activateIndex | number | No | @Prop | Index of the active option.<br>Default value: **-1** | 42| controller | [TabsController](ts-container-tabs.md#tabscontroller) | Yes | - | Toolbar controller. | 43| dividerModifier<sup>13+</sup> | [DividerModifier](ts-universal-attributes-attribute-modifier.md) | No | @Prop | Modifier for the toolbar header divider, which can be used to customize the divider's height, color, and other attributes.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 44| toolBarModifier<sup>13+</sup> | [ToolBarModifier](#toolbarmodifier13) | No | @Prop | Modifier for the toolbar, which can be used to set the toolbar's height, background color, padding (which only takes effect when there are fewer than five toolbar items), and whether to display the pressed state.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 45 46## ToolBarOptions 47 48Inherits from **Array<[ToolBarOption](#toolbaroption)>**. 49 50**Atomic service API**: This API can be used in atomic services since API version 11. 51 52## ToolBarOption 53 54| Name | Type | Mandatory| Description | 55|------------------------------------|-----------------------------------------------------------| -------- |--------------------------------------------------------------------------------------------------------------| 56| content | [ResourceStr](ts-types.md#resourcestr) | Yes| Text of the toolbar option.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 57| action | () => void | No| Click event of the toolbar option.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 58| icon | [Resource](ts-types.md#resource) | No| Icon of the toolbar option.<br>If **toolBarSymbolOptions** has input parameters, **icon** is ineffective.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 59| state | [ItemState](#itemstate) | No| State of the toolbar option.<br>Default value: **ENABLE**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 60| iconColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Icon fill color of the toolbar option.<br>Default value: **$r('sys.color.icon_primary')**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 61| activatedIconColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Icon fill color of the toolbar option in the activated state.<br>Default value: **$r('sys.color.icon_emphasize')**<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 62| textColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the toolbar option.<br>Default value: **$r('sys.color.font_primary')**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 63| activatedTextColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the toolbar option in the activated state.<br>Default value: **$r('sys.color.font_emphasize')**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 64| toolBarSymbolOptions<sup>13+</sup> | [ToolBarSymbolGlyphOptions](#toolbarsymbolglyphoptions13) | No| Icon symbol options of the toolbar option.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 65 66## ToolBarModifier<sup>13+</sup> 67Provides APIs for setting the toolbar's height (**height**), background color (**backgroundColor**), left and right padding (**padding**, which only takes effect when there are fewer than five items), and whether to display the pressed state (**stateEffect**). 68 69**Atomic service API**: This API can be used in atomic services since API version 13. 70 71### backgroundColor 72 73backgroundColor?(backgroundColor: ResourceColor): ToolBarModifier 74 75Sets the background color of the toolbar. By overriding this API, you can implement custom drawing for the background color of the toolbar. 76 77**Atomic service API**: This API can be used in atomic services since API version 13. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81**Parameters** 82 83| Name | Type | Mandatory| Description | 84| ------- | ------------------------------------------------------ | ---- |------------------------------------------------------------------| 85| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Toolbar background color<br>Default value: **$r('sys.color.ohos_id_color_toolbar_bg')**| 86 87### padding 88 89padding(padding: LengthMetrics): ToolBarModifier 90 91Sets the left and right padding of the toolbar. By overriding this API, you can implement custom drawing for the left and right padding of the toolbar. 92 93**Atomic service API**: This API can be used in atomic services since API version 13. 94 95**System capability**: SystemCapability.ArkUI.ArkUI.Full 96 97**Parameters** 98 99| Name | Type | Mandatory| Description | 100| ------- |--------| ---- |-------------------------------------------------------------------------------------| 101| padding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | Yes | Left and right padding of the toolbar, which is effective only when there are fewer than five items.<br>By default, the padding is 24 vp when there are fewer than five items and 0 when there are five or more items.| 102 103### height 104 105height(height: LengthMetrics): ToolBarModifier 106 107Sets the height of the toolbar. By overriding this API, you can implement custom drawing for the height of the toolbar, which does not include the height of the divider. 108 109**Atomic service API**: This API can be used in atomic services since API version 13. 110 111**System capability**: SystemCapability.ArkUI.ArkUI.Full 112 113**Parameters** 114 115| Name | Type | Mandatory| Description | 116| ------- |---------------------------------| ---- |------------------------------------| 117| height | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | Yes | Height of the toolbar.<br>The default height of the toolbar is 56 vp, which does not include the divider.| 118 119### stateEffect 120 121stateEffect(stateEffect: boolean): ToolBarModifier 122 123Sets whether to display the pressed state effect. 124 125**Atomic service API**: This API can be used in atomic services since API version 13. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name | Type | Mandatory| Description | 132| ------- |--------------------------------| ---- |----------------------------------------------------------| 133| stateEffect | boolean | Yes | Whether to display the pressed state effect on the toolbar.<br>The value **true** means to display the pressed state effect on the toolbar, and **false** means the opposite.<br>Default value: **true**| 134 135## ItemState 136 137**Atomic service API**: This API can be used in atomic services since API version 11. 138 139| Name| Value| Description| 140| -------- | -------- | -------- | 141| ENABLE | 1 | The toolbar option is enabled.| 142| DISABLE | 2 | The toolbar option is disabled.| 143| ACTIVATE | 3 | The toolbar option is activated.| 144 145## ToolBarSymbolGlyphOptions<sup>13+</sup> 146 147Defines the icon symbol options. 148 149**Atomic service API**: This API can be used in atomic services since API version 13. 150 151**System capability**: SystemCapability.ArkUI.ArkUI.Full 152 153| Name | Type | Mandatory| Description | 154| ------ | ---------- | ---- |------------------------------------------------------------------------------------------| 155| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon symbol of the toolbar option in normal state.<br>Default value: **fontColor: $r('sys.color.icon_primary'), fontSize: 24vp** | 156| activated| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon symbol of the toolbar option in activated state.<br>Default value: **fontColor: $r('sys.color.icon_emphasize'), fontSize: 24vp**| 157 158## Events 159The [universal events](ts-universal-events-click.md) are supported. 160 161## Example 162 163```ts 164import { ToolBar, ToolBarOptions, ItemState } from '@kit.ArkUI' 165 166@Entry 167@Component 168struct Index { 169 @State toolbarList: ToolBarOptions = new ToolBarOptions() 170 aboutToAppear() { 171 this.toolbarList.push({ 172 content:'Cut Super Long Text', 173 icon: $r('sys.media.ohos_ic_public_share'), 174 action: () => { 175 }, 176 }) 177 this.toolbarList.push({ 178 content: 'Copy', 179 icon: $r('sys.media.ohos_ic_public_copy'), 180 action: () => { 181 }, 182 state:ItemState.DISABLE 183 }) 184 this.toolbarList.push({ 185 content: 'Paste', 186 icon: $r('sys.media.ohos_ic_public_paste'), 187 action: () => { 188 }, 189 state:ItemState.ACTIVATE 190 }) 191 this.toolbarList.push({ 192 content:'Select All', 193 icon: $r('sys.media.ohos_ic_public_select_all'), 194 action: () => { 195 }, 196 }) 197 this.toolbarList.push({ 198 content: 'Share', 199 icon: $r('sys.media.ohos_ic_public_share'), 200 action: () => { 201 }, 202 }) 203 this.toolbarList.push({ 204 content: 'Share', 205 icon: $r('sys.media.ohos_ic_public_share'), 206 action: () => { 207 }, 208 }) 209 } 210 build() { 211 Row() { 212 Stack() { 213 Column() { 214 ToolBar({ 215 activateIndex: 2, 216 toolBarList: this.toolbarList, 217 }) 218 } 219 }.align(Alignment.Bottom) 220 .width('100%').height('100%') 221 } 222 } 223} 224``` 225 226 227 228```ts 229import { SymbolGlyphModifier, DividerModifier, ToolBar, ToolBarOptions, ToolBarModifier, ItemState, LengthMetrics } from '@kit.ArkUI'; 230 231@Entry 232@Component 233struct Index { 234 @State toolbarList: ToolBarOptions = new ToolBarOptions(); 235 @State toolBarModifier: ToolBarModifier = 236 new ToolBarModifier().height(LengthMetrics.vp(52)).backgroundColor(Color.Transparent).stateEffect(false); 237 @State dividerModifier: DividerModifier = new DividerModifier().height(0); 238 239 aboutToAppear() { 240 this.toolbarList.push({ 241 content: 'Long long long long long long long long text', 242 icon: $r('sys.media.ohos_ic_public_share'), 243 action: () => { 244 }, 245 state: ItemState.ACTIVATE, 246 toolBarSymbolOptions: { 247 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Green]), 248 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]), 249 }, 250 activatedTextColor: $r('sys.color.font_primary'), 251 }) 252 this.toolbarList.push({ 253 content: 'Copy', 254 icon: $r('sys.media.ohos_ic_public_copy'), 255 action: () => { 256 }, 257 state:ItemState.DISABLE, 258 iconColor: '#ff18cb53', 259 activatedIconColor: '#ffec5d5d', 260 activatedTextColor: '#ffec5d5d', 261 }) 262 this.toolbarList.push({ 263 content: 'Paste', 264 icon: $r('sys.media.ohos_ic_public_paste'), 265 action: () => { 266 }, 267 state:ItemState.ACTIVATE, 268 textColor: '#ff18cb53', 269 }) 270 this.toolbarList.push({ 271 content: 'All', 272 icon: $r('sys.media.ohos_ic_public_select_all'), 273 action: () => { 274 }, 275 state:ItemState.ACTIVATE, 276 }) 277 this.toolbarList.push({ 278 content: 'Share', 279 icon: $r('sys.media.ohos_ic_public_share'), 280 action: () => { 281 }, 282 }) 283 this.toolbarList.push({ 284 content: 'Share', 285 icon: $r('sys.media.ohos_ic_public_share'), 286 action: () => { 287 }, 288 }) 289 } 290 build() { 291 Row() { 292 Stack() { 293 Column() { 294 ToolBar({ 295 toolBarModifier: this.toolBarModifier, 296 dividerModifier: this.dividerModifier, 297 activateIndex: 0, 298 toolBarList: this.toolbarList, 299 }) 300 .height(52) 301 } 302 }.align(Alignment.Bottom) 303 .width('100%').height('100%') 304 } 305 } 306} 307``` 308 309 310
