1# ToolBarV2 2 3The **Toolbar** component is designed to present a set of action options related to the current screen, displayed at the bottom of the screen. It can display up to five child components. If there are six or more child components, the first four are shown directly, and the additional ones are grouped under a **More** item on the rightmost side of the toolbar.<br> 4This component is implemented based on [state management V2](../../../ui/state-management/arkts-state-management-overview.md#state-management-v2). Compared with [state management V1](../../../ui/state-management/arkts-state-management-overview.md#state-management-v1), V2 offers a higher level of observation and management over data objects beyond the component level. You can now more easily manage toolbar data and states with greater flexibility, leading to faster UI updates.<br> 5 6> **NOTE** 7> 8> - This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 9> 10> - This component is not supported on wearables. 11 12## Modules to Import 13 14```ts 15import { ToolBarV2 } from '@kit.ArkUI'; 16``` 17 18## Child Components 19 20Not supported 21 22 23## ToolBarV2 24 25ToolbarV2({toolBarList: ToolBarV2Item\[], activatedIndex?: number, dividerModifier: DividerModifier, toolBarModifier: ToolBarV2Modifier}) 26 27Creates a toolbar. 28 29**Decorator**: @ComponentV2 30 31**Atomic service API**: This API can be used in atomic services since API version 18. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35| Name | Type | Mandatory| Decorator | Description | 36| -------------------- | ---------------------------------------------------------------- | -- |---------------------|--------------------------------------------------------------| 37| toolBarList | [ToolBarV2Item](#toolbarv2item)\[] | Yes | @Param<br>@Require | Toolbar list. | 38| activatedIndex | number | No | @Param | Index of the active item.<br>Default value: **-1**, indicating that no toolbar item is activated<br>Value range: [-1, 4] | 39| dividerModifier<sup> | [DividerModifier](ts-universal-attributes-attribute-modifier.md) | No | @Param | Modifier for the toolbar header divider, which can be used to customize the divider's height, color, and other attributes.<br>This parameter does not take effect by default. | 40| toolBarModifier<sup> | [ToolBarV2Modifier](#toolbarv2modifier) | No | @Param | 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>This parameter does not take effect by default.| 41 42## ToolBarV2Item 43Defines an item in the toolbar. 44 45**Decorator type**: @ObservedV2 46 47**Atomic service API**: This API can be used in atomic services since API version 18. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51### Properties 52 53| Name | Type | Mandatory| Decorator | Description | 54| ---------------------------- | ----------------------------------------------- | -- | :----- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 55| content | [ToolBarV2ItemText](#toolbarv2itemtext) | Yes | @Trace | Text of the toolbar item. | 56| action | [ToolBarV2ItemAction](#toolbarv2itemaction) | No | @Trace | Click event of the toolbar item.<br><br>By default, there is no click event. | 57| icon | [ToolBarV2ItemIconType](#toolbarv2itemicontype) | No | @Trace | Icon of the toolbar item.<br><br>By default, there is no icon. | 58| state | [ToolBarV2ItemState](#toolbarv2itemstate) | No | @Trace | State of the toolbar item.<br>Default value: **ENABLE**<br> | 59| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No | @Trace | Accessibility text, that is, accessible label name, of the toolbar item. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected.<br><br>Default value: value of **content** | 60| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No | @Trace | Accessible description of the toolbar item. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected.<br>Default value: **"Double-tap to activate"** | 61| accessibilityLevel | string | No | @Trace | Accessibility level of the toolbar item. It determines whether the component can be recognized by accessibility services.<br><br>The options are as follows:<br>**"auto"**: It is treated as "yes" by the system.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>| 62 63### constructor 64 65constructor(options: ToolBarV2ItemOptions) 66 67A constructor used to create a **ToolBarV2Item** instance. 68 69**Atomic service API**: This API can be used in atomic services since API version 18. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name | Type | Mandatory| Description | 74| :------ |:----------------------------------------------| :- | :------- | 75| options | [ToolBarV2ItemOptions](#toolbarv2itemoptions) | Yes | Configuration options of the toolbar item.| 76 77## ToolBarV2ItemOptions 78 79Defines the options for initializing a **ToolBarV2Item** object. 80 81**Atomic service API**: This API can be used in atomic services since API version 18. 82 83**System capability**: SystemCapability.ArkUI.ArkUI.Full 84 85| Name | Type | Mandatory| Description | 86|:-------------------------| :---------------------------------------------- | :- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 87| content | [ToolBarV2ItemText](#toolbarv2itemtext) | Yes | Text of the toolbar item. | 88| action | [ToolBarV2ItemAction](#toolbarv2itemaction) | No | Click event of the toolbar item.<br>By default, there is no click event. | 89| icon | [ToolBarV2ItemIconType](#toolbarv2itemicontype) | No | Icon of the toolbar item.<br>By default, there is no icon. | 90| state | [ToolBarV2ItemState](#toolbarv2itemstate) | No | State of the toolbar item.<br>Default value: **ENABLE** | 91| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text, that is, accessible label name, of the toolbar item. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected.<br>Default value: value of **content** | 92| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No | Accessible description of the toolbar item. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected.<br>Default value: **"Double-tap to activate"** | 93| accessibilityLevel | string | No | Accessibility level of the toolbar item. It determines whether the component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: It is treated as "yes" by the system.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"** | 94 95## ToolBarV2ItemAction 96 97type ToolBarV2ItemAction = (index: number) => void 98 99Defines the callback for the click event of a toolbar item. 100 101**Atomic service API**: This API can be used in atomic services since API version 18. 102 103**System capability**: SystemCapability.ArkUI.ArkUI.Full 104 105**Parameters** 106 107| Name | Type | Mandatory| Description| 108|:------|:-------|:---|----| 109| index | number | Yes |Index of the toolbar item that triggers the click event.<br> | 110 111## ToolBarV2ItemText 112 113Defines the text of a toolbar item. 114 115**Decorator type**: @ObservedV2 116 117**Atomic service API**: This API can be used in atomic services since API version 18. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121### Properties 122 123| Name | Type | Mandatory| Decorator | Description | 124|:--------------------|:------------------------------------------------------------| :- | :----- |:---------------------------------------------------------| 125| text | [ResourceStr](ts-types.md#resourcestr) | Yes | @Trace | Text of the toolbar item. | 126| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | @Trace | Font color of the toolbar item.<br>Default value: **$r('sys.color.font_primary')** | 127| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | @Trace | Font color of the toolbar item in the activated state.<br>Default value: **$r('sys.color.font_emphasize')** | 128 129### constructor 130 131constructor(options: ToolBarV2ItemTextOptions) 132 133A constructor used to create a **ToolBarV2ItemText** instance. 134 135**Atomic service API**: This API can be used in atomic services since API version 18. 136 137**System capability**: SystemCapability.ArkUI.ArkUI.Full 138 139| Name | Type | Mandatory| Description | 140| :------ |:------------------------------------------------------| :- | :--------- | 141| options | [ToolBarV2ItemTextOptions](#toolbarv2itemtextoptions) | Yes | Configuration options of the text content.| 142 143## ToolBarV2ItemTextOptions 144 145Defines the options for initializing a **ToolBarV2ItemText** object. 146 147**Atomic service API**: This API can be used in atomic services since API version 18. 148 149**System capability**: SystemCapability.ArkUI.ArkUI.Full 150 151| Name | Type | Mandatory| Description | 152| :------------------ |:------------------------------------------------------------| :- |:---------------------------------------------------------| 153| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the toolbar item. | 154| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | Font color of the toolbar item.<br>Default value: **$r('sys.color.font_primary')** | 155| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | Font color of the toolbar item in the activated state.<br>Default value: **$r('sys.color.font_emphasize')**| 156 157## ToolBarV2ItemImage 158 159Defines the icon content of a toolbar item. 160 161**Decorator type**: @ObservedV2 162 163**Atomic service API**: This API can be used in atomic services since API version 18. 164 165**System capability**: SystemCapability.ArkUI.ArkUI.Full 166 167### Properties 168 169| Name | Type | Mandatory| Decorator | Description | 170|:-------------------|:------------------------------------------------------------| :- | :----- |:---------------------------------------------------------| 171| src | [ResourceStr](ts-types.md#resourcestr) | Yes | @Trace | Resource path of the icon. | 172| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | @Trace | Color of the icon.<br>Default value: **$r('sys.color.icon_primary')** | 173| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | @Trace | Color of the icon when the toolbar item is activated.<br>Default value: **$r('sys.color.icon_emphasize')**| 174 175### constructor 176 177constructor(options: ToolBarV2ItemImageOptions) 178 179A constructor used to create a **ToolBarV2ItemImage** instance. 180 181**Atomic service API**: This API can be used in atomic services since API version 18. 182 183**System capability**: SystemCapability.ArkUI.ArkUI.Full 184 185| Name | Type | Mandatory| Description | 186| :------ | :------------------------------------------------------ | :- | :--------- | 187| options | [ToolBarV2ItemImageOptions](#toolbarv2itemimageoptions) | Yes | Configuration options for the icon content of the toolbar item.| 188 189## ToolBarV2ItemImageOptions 190 191Defines the options for initializing a **ToolBarV2ItemImage** object. 192 193**Atomic service API**: This API can be used in atomic services since API version 18. 194 195**System capability**: SystemCapability.ArkUI.ArkUI.Full 196 197| Name | Type | Mandatory| Description | 198|:--------------------|:------------------------------------------------------------| :- |:---------------------------------------------------------| 199| src | [ResourceStr](ts-types.md#resourcestr) | Yes | Resource path of the icon. | 200| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | Color of the icon.<br>Default value: **$r('sys.color.icon_primary')** | 201| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | Color of the icon when the toolbar item is activated.<br>Default value: **$r('sys.color.icon_emphasize')**| 202 203## ToolBarV2ItemIconType 204 205type ToolBarV2ItemIconType = ToolBarV2ItemImage | ToolBarV2SymbolGlyph 206 207Defines the union type for the icon content of a toolbar item. 208 209**Atomic service API**: This API can be used in atomic services since API version 18. 210 211**System capability**: SystemCapability.ArkUI.ArkUI.Full 212 213| Type | Description | 214| :------------------- | :------------ | 215| ToolBarV2ItemImage | Type for defining a common icon. | 216| ToolBarV2SymbolGlyph | Type for defining a symbol icon.| 217 218## ToolBarV2Modifier 219 220Provides APIs for setting the height (**height**), background color (**backgroundColor**), left and right padding (**padding**, which only takes effect when there are fewer than five items) of the toolbar, and whether to display the pressed state effect (**stateEffect**). 221 222**Atomic service API**: This API can be used in atomic services since API version 18. 223 224**System capability**: SystemCapability.ArkUI.ArkUI.Full 225 226### backgroundColor 227 228backgroundColor(backgroundColor: ColorMetrics): ToolBarV2Modifier 229 230Sets the background color of the toolbar. By overriding this API, you can implement custom drawing for the background color of the toolbar. 231 232**Atomic service API**: This API can be used in atomic services since API version 18. 233 234**System capability**: SystemCapability.ArkUI.ArkUI.Full 235 236**Parameters** 237 238| Name | Type | Mandatory| Description | 239| --------------- |-------------------------------------------------------------| -- | ----------------------------------------------------------------- | 240| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Toolbar background color<br>Default value: **\$r('sys.color.ohos\_id\_color\_toolbar\_bg')**| 241**Return value** 242 243| Type | Description | 244|-----------------------------------------|-----------------------------------------| 245| [ToolBarV2Modifier](#toolbarv2modifier) | **ToolBarV2Modifier** object after the background color is set.| 246 247### padding 248 249padding(padding: LengthMetrics): ToolBarV2Modifier 250 251Sets 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. 252 253**Atomic service API**: This API can be used in atomic services since API version 18. 254 255**System capability**: SystemCapability.ArkUI.ArkUI.Full 256 257**Parameters** 258 259| Name | Type | Mandatory| Description | 260| ------- |---------------------------------------------------------------| -- | ------------------------------------------------------------------- | 261| padding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Left and right padding of the toolbar, which is effective only when there are fewer than five items.<br><br>By default, the padding is 24 vp when there are fewer than five items and 0 when there are five or more items.| 262 263**Return value** 264 265| Type | Description | 266|-----------------------------------------|---------------------------------| 267| [ToolBarV2Modifier](#toolbarv2modifier) | **ToolBarV2Modifier** object after the padding is set.| 268### height 269 270height(height: LengthMetrics): ToolBarV2Modifier 271 272Sets 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. 273 274**Atomic service API**: This API can be used in atomic services since API version 18. 275 276**System capability**: SystemCapability.ArkUI.ArkUI.Full 277 278**Parameters** 279 280| Name | Type | Mandatory| Description | 281| ------ | ------------------------------------------------------------------ | -- | --------------------------------- | 282| height | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Height of the toolbar.<br>The default height of the toolbar is 56 vp, which does not include the divider.| 283 284**Return value** 285 286| Type | Description | 287|-----------------------------------------|--------------------------------| 288| [ToolBarV2Modifier](#toolbarv2modifier) | **ToolBarV2Modifier** object after the height is set.| 289 290### stateEffect 291 292stateEffect(stateEffect: boolean): ToolBarV2Modifier 293 294Sets whether to display the pressed state effect. 295 296**Atomic service API**: This API can be used in atomic services since API version 18. 297 298**System capability**: SystemCapability.ArkUI.ArkUI.Full 299 300**Parameters** 301 302| Name | Type | Mandatory| Description | 303| ----------- | ------- | -- |--------------------------------------------------------| 304| stateEffect | boolean | Yes | Whether to display the pressed state effect on the toolbar.<br>**true**: Display the pressed state effect.<br>**false**: Do not display the pressed state effect.<br> Default value: **true**| 305 306**Return value** 307 308| Type | Description | 309|-----------------------------------------|-------------------------------------| 310| [ToolBarV2Modifier](#toolbarv2modifier) | **ToolBarV2Modifier** object after the pressed state effect is set.| 311 312## ToolBarV2ItemState 313 314Enumerates the states of the toolbar item. 315 316**Atomic service API**: This API can be used in atomic services since API version 18. 317 318**System capability**: SystemCapability.ArkUI.ArkUI.Full 319 320| Name | Value| Description | 321| -------- | - | --------------- | 322| ENABLE | 1 | The toolbar item is enabled. | 323| DISABLE | 2 | The toolbar item is disabled. | 324| ACTIVATE | 3 | The toolbar item is activated.| 325 326## ToolBarV2SymbolGlyph 327 328Defines the configuration options of the symbol icon. 329 330**Decorator type**: @ObservedV2 331 332**Atomic service API**: This API can be used in atomic services since API version 18. 333 334**System capability**: SystemCapability.ArkUI.ArkUI.Full 335 336### Properties 337 338| Name | Type | Mandatory| Decorator | Description | 339| :-------- | :------------------------------------------------------------------- | :- | :----- | :----------------------------------------------------------------------------------- | 340| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | Yes | @Trace | Icon symbol of the toolbar item in normal state. | 341| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | @Trace | Icon symbol of the toolbar item in activated state.<br>Default value:<br>**fontColor**: **\$r('sys.color.icon\_emphasize')**, **fontSize**: **24vp**| 342 343### constructor 344 345constructor(options: ToolBarV2SymbolGlyphOptions) 346 347A constructor used to create a **ToolBarV2SymbolGlyph** object. 348 349**Atomic service API**: This API can be used in atomic services since API version 18. 350 351**System capability**: SystemCapability.ArkUI.ArkUI.Full 352 353| Name | Type | Mandatory| Description | 354| :------ | :---------------------------------------------------------- | :- | :---------- | 355| options | [ToolBarV2SymbolGlyphOptions](#toolbarv2symbolglyphoptions) | Yes | Configuration options of the symbol icon.| 356 357## ToolBarV2SymbolGlyphOptions 358 359Defines the options for initializing a **ToolBarV2SymbolGlyph** object. 360 361**Atomic service API**: This API can be used in atomic services since API version 18. 362 363**System capability**: SystemCapability.ArkUI.ArkUI.Full 364 365| Name | Type | Mandatory| Description | 366| --------- | -------------------------------------------------------------------- | -- | ------------------------------------------------------------------------------------ | 367| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | Yes | Icon symbol of the toolbar item in normal state. | 368| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon symbol of the toolbar item in activated state.<br>Default value:<br>**fontColor**: **\$r('sys.color.icon\_emphasize')**, **fontSize**: **24vp**| 369 370## Example 371 372### Example 1: Setting Toolbar Items to Different States 373 374This example shows the various display effects when the **state** property of toolbar items is set to **ENABLE**, **DISABLE**, or **ACTIVATE**. 375 376```ts 377import { ToolBarV2ItemImage, ToolBarV2ItemState, ToolBarV2ItemText, ToolBarV2Item, ToolBarV2 } from '@kit.ArkUI'; 378 379@Entry 380@ComponentV2 381struct Index { 382 @Local toolbarList: ToolBarV2Item[] = [] 383 384 aboutToAppear() { 385 this.toolbarList.push(new ToolBarV2Item({ 386 content: new ToolBarV2ItemText( 387 { 388 text: 'Cut Super Long Text' 389 } 390 ), 391 icon: new ToolBarV2ItemImage({ 392 src: $r('sys.media.ohos_ic_public_share') 393 }), 394 action: () => { 395 }, 396 })) 397 this.toolbarList.push( 398 new ToolBarV2Item({ 399 content: new ToolBarV2ItemText( 400 { 401 text: 'Copy' 402 } 403 ), 404 icon: new ToolBarV2ItemImage({ 405 src: $r('sys.media.ohos_ic_public_copy') 406 }), 407 action: () => { 408 }, 409 state: ToolBarV2ItemState.DISABLE 410 }) 411 ) 412 this.toolbarList.push( 413 new ToolBarV2Item({ 414 content: new ToolBarV2ItemText( 415 { 416 text: 'Paste' 417 } 418 ), 419 icon: new ToolBarV2ItemImage({ 420 src: $r('sys.media.ohos_ic_public_paste') 421 }), 422 action: () => { 423 }, 424 state: ToolBarV2ItemState.ACTIVATE 425 }) 426 ) 427 this.toolbarList.push( 428 new ToolBarV2Item({ 429 content: new ToolBarV2ItemText( 430 { 431 text:'Select All' 432 } 433 ), 434 icon: new ToolBarV2ItemImage({ 435 src: $r('sys.media.ohos_ic_public_select_all') 436 }), 437 action: () => { 438 }, 439 }) 440 ) 441 this.toolbarList.push( 442 new ToolBarV2Item({ 443 content: new ToolBarV2ItemText( 444 { 445 text: 'Share' 446 } 447 ), 448 icon: new ToolBarV2ItemImage({ 449 src: $r('sys.media.ohos_ic_public_share') 450 }), 451 action: () => { 452 }, 453 }) 454 ) 455 this.toolbarList.push( 456 new ToolBarV2Item({ 457 content: new ToolBarV2ItemText( 458 { 459 text: 'Share' 460 } 461 ), 462 icon: new ToolBarV2ItemImage({ 463 src: $r('sys.media.ohos_ic_public_share') 464 }), 465 action: () => { 466 }, 467 }) 468 ) 469 } 470 471 build() { 472 Row() { 473 Stack() { 474 Column() { 475 ToolBarV2({ 476 activatedIndex: 2, 477 toolBarList: this.toolbarList, 478 }) 479 } 480 }.align(Alignment.Bottom) 481 .width('100%').height('100%') 482 } 483 } 484} 485``` 486 487 488 489### Example 2: Customizing the Toolbar Style 490 491This example demonstrates how to customize the toolbar's height, background color, and other styles using **ToolBarV2Modifier**. 492 493```ts 494import { 495 SymbolGlyphModifier, 496 DividerModifier, 497 LengthMetrics, 498 ColorMetrics, 499 ToolBarV2Item, 500 ToolBarV2Modifier, 501 ToolBarV2ItemText, 502 ToolBarV2ItemImage, 503 ToolBarV2, 504 ToolBarV2ItemState, 505 ToolBarV2SymbolGlyph 506} from '@kit.ArkUI'; 507 508@Entry 509@ComponentV2 510struct Index { 511 @Local toolbarList: ToolBarV2Item[] = []; 512 private toolBarModifier: ToolBarV2Modifier = 513 new ToolBarV2Modifier().height(LengthMetrics.vp(52)) 514 .backgroundColor(ColorMetrics.resourceColor(Color.Transparent)) 515 .stateEffect(false); 516 @Local dividerModifier: DividerModifier = new DividerModifier().height(0); 517 518 aboutToAppear() { 519 this.toolbarList.push( 520 new ToolBarV2Item({ 521 content: new ToolBarV2ItemText({ 522 text: 'Long long long long long long long long text', 523 activatedColor: ColorMetrics.resourceColor($r('sys.color.font_primary')) 524 }), 525 icon: new ToolBarV2SymbolGlyph({ 526 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Green]), 527 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]), 528 }), 529 action: () => { 530 }, 531 state: ToolBarV2ItemState.ACTIVATE, 532 }) 533 ) 534 this.toolbarList.push( 535 new ToolBarV2Item({ 536 content: new ToolBarV2ItemText({ 537 text: 'Copy', 538 activatedColor: ColorMetrics.resourceColor('#ffec5d5d') 539 }), 540 icon: new ToolBarV2ItemImage({ 541 src: $r('sys.media.ohos_ic_public_copy'), 542 color: ColorMetrics.resourceColor('#ff18cb53'), 543 activatedColor: ColorMetrics.resourceColor('#ffec5d5d'), 544 }), 545 action: () => { 546 }, 547 state: ToolBarV2ItemState.DISABLE, 548 })) 549 this.toolbarList.push( 550 new ToolBarV2Item({ 551 content: new ToolBarV2ItemText({ 552 text: 'Paste', 553 color: ColorMetrics.resourceColor('#ff18cb53') 554 }), 555 icon: new ToolBarV2ItemImage({ 556 src: $r('sys.media.ohos_ic_public_paste'), 557 }), 558 action: () => { 559 }, 560 state: ToolBarV2ItemState.ACTIVATE, 561 }) 562 ) 563 this.toolbarList.push( 564 new ToolBarV2Item({ 565 content: new ToolBarV2ItemText({ 566 text: 'All', 567 }), 568 icon: new ToolBarV2ItemImage({ 569 src: $r('sys.media.ohos_ic_public_select_all'), 570 }), 571 action: () => { 572 }, 573 state: ToolBarV2ItemState.ACTIVATE, 574 })) 575 this.toolbarList.push( 576 new ToolBarV2Item({ 577 content: new ToolBarV2ItemText({ 578 text: 'Share', 579 }), 580 icon: new ToolBarV2ItemImage({ 581 src: $r('sys.media.ohos_ic_public_share'), 582 }), 583 action: () => { 584 }, 585 })) 586 this.toolbarList.push( 587 new ToolBarV2Item({ 588 content: new ToolBarV2ItemText({ 589 text: 'Share', 590 }), 591 icon: new ToolBarV2ItemImage({ 592 src: $r('sys.media.ohos_ic_public_share'), 593 }), 594 action: () => { 595 }, 596 }) 597 ) 598 } 599 600 build() { 601 Row() { 602 Stack() { 603 Column() { 604 ToolBarV2({ 605 toolBarModifier: this.toolBarModifier, 606 dividerModifier: this.dividerModifier, 607 activatedIndex: 0, 608 toolBarList: this.toolbarList, 609 }) 610 .height(52) 611 } 612 }.align(Alignment.Bottom) 613 .width('100%').height('100%') 614 } 615 } 616} 617``` 618 619 620 621### Example 3: Implementing Screen Reader Announcement 622 623This example customizes the screen reader announcement text by setting the **accessibilityText**, **accessibilityDescription**, and **accessibilityLevel** properties of the toolbar item. 624 625```ts 626import { 627 DividerModifier, 628 LengthMetrics, 629 ColorMetrics, 630 ToolBarV2Item, 631 ToolBarV2Modifier, 632 ToolBarV2ItemText, 633 ToolBarV2ItemImage, 634 ToolBarV2, 635 ToolBarV2ItemState, 636} from '@kit.ArkUI'; 637 638@Entry 639@ComponentV2 640struct Index { 641 @Local toolbarList: ToolBarV2Item[] = []; 642 private toolBarModifier: ToolBarV2Modifier = 643 new ToolBarV2Modifier().height(LengthMetrics.vp(52)) 644 .backgroundColor(ColorMetrics.resourceColor(Color.Transparent)) 645 .stateEffect(false); 646 @Local dividerModifier: DividerModifier = new DividerModifier().height(0); 647 648 aboutToAppear() { 649 this.toolbarList.push( 650 new ToolBarV2Item({ 651 content: new ToolBarV2ItemText({ 652 text: 'Cut Super Long Text', 653 }), 654 icon: new ToolBarV2ItemImage({ 655 src: $r('sys.media.ohos_ic_public_share') 656 }), 657 action: () => { 658 }, 659 accessibilityText: 'Clip', // Screen reader announcement for the item. 660 accessibilityDescription: 'Double-tap to clip', // Screen reader announcement for the item. 661 accessibilityLevel: 'yes' // Configure this element to be focused by screen readers. 662 }) 663 ) 664 this.toolbarList.push( 665 new ToolBarV2Item({ 666 content: new ToolBarV2ItemText({ 667 text: 'Copy', 668 }), 669 icon: new ToolBarV2ItemImage({ 670 src: $r('sys.media.ohos_ic_public_copy'), 671 }), 672 action: () => { 673 }, 674 state: ToolBarV2ItemState.DISABLE, 675 accessibilityLevel: 'no' // Configure this button to be not recognizable by screen readers. 676 })) 677 this.toolbarList.push( 678 new ToolBarV2Item({ 679 content: new ToolBarV2ItemText({ 680 text: 'Paste', 681 }), 682 icon: new ToolBarV2ItemImage({ 683 src: $r('sys.media.ohos_ic_public_paste'), 684 }), 685 action: () => { 686 }, 687 state: ToolBarV2ItemState.ACTIVATE, 688 }) 689 ) 690 this.toolbarList.push( 691 new ToolBarV2Item({ 692 content: new ToolBarV2ItemText({ 693 text: 'Select All', 694 }), 695 icon: new ToolBarV2ItemImage({ 696 src: $r('sys.media.ohos_ic_public_select_all'), 697 }), 698 action: () => { 699 }, 700 })) 701 this.toolbarList.push( 702 new ToolBarV2Item({ 703 content: new ToolBarV2ItemText({ 704 text: 'Share', 705 }), 706 icon: new ToolBarV2ItemImage({ 707 src: $r('sys.media.ohos_ic_public_share'), 708 }), 709 action: () => { 710 }, 711 })) 712 this.toolbarList.push( 713 new ToolBarV2Item({ 714 content: new ToolBarV2ItemText({ 715 text: 'Share', 716 }), 717 icon: new ToolBarV2ItemImage({ 718 src: $r('sys.media.ohos_ic_public_share'), 719 }), 720 action: () => { 721 }, 722 }) 723 ) 724 } 725 726 build() { 727 Row() { 728 Stack() { 729 Column() { 730 ToolBarV2({ 731 toolBarModifier: this.toolBarModifier, 732 dividerModifier: this.dividerModifier, 733 activatedIndex: 0, 734 toolBarList: this.toolbarList, 735 }) 736 .height(52) 737 } 738 }.align(Alignment.Bottom) 739 .width('100%').height('100%') 740 } 741 } 742} 743``` 744 745 746
