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