1# SubHeaderV2 2 3 4The **SubHeader** component represents a subheader that signifies the top of a list or the beginning a subdivision of content and tells the user what the list or subdivision is about. 5 6This 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 subheader data and states with greater flexibility, leading to faster UI updates. 7 8 9 10> **NOTE** 11> 12> - This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 13> 14> - This component is not supported on wearables. 15 16 17## Modules to Import 18 19```ts 20import { SubHeaderV2 } from '@kit.ArkUI'; 21``` 22 23 24## Child Components 25 26Not supported 27 28## Attributes 29 30The [universal attributes](ts-component-general-attributes.md) are not supported. 31 32## SubHeaderV2 33 34SubHeaderV2({ 35icon?: SubHeaderV2IconType, 36title?: SubHeaderV2Title, 37select?: SubHeaderV2Select, 38operationType?: SubHeaderV2OperationType, 39operationItems?: SubHeaderV2OperationItem[], 40titleBuild?: SubHeaderV2TitleBuilder; 41}) 42 43The **SubHeader** component represents a subheader that signifies the top of a list or the beginning a subdivision of content and tells the user what the list or subdivision is about. 44 45**Decorator**: \@ComponentV2 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| Name| Type | Mandatory| Decorator| Description | 52| -------- |---------------------------------------------------------| -------- | -------- |----------------------------------------| 53| icon| [SubHeaderV2IconType](#subheaderv2icontype) | No| @Param | Icon.<br>Default value: **undefined** | 54| title| [SubHeaderV2Title](#subheaderv2title) | No| @Param| Title of the subheader.<br>Default value: **undefined** | 55| select| [SubHeaderV2Select](#subheaderv2select) | No| @Param | Content and events for selection.<br>Default value: **undefined** | 56| operationType | [SubHeaderV2OperationType](#subheaderv2operationtype) | No| @Param| Style of elements in the operation area.<br>Default value: **OperationType.BUTTON**| 57| operationItems | [SubHeaderV2OperationItem](#subheaderv2operationitem)[] | No| @Param| Items in the operation area.<br>Default value: **undefined** | 58| titleBuilder | [SubHeaderV2TitleBuilder](#subheaderv2titlebuilder) | No| @BuilderParam | Custom content for the title area.<br>Default value: **() => void** | 59 60## SubHeaderV2IconType 61 62type SubHeaderV2IconType = ResourceStr | SymbolGlyphModifier 63 64Defines the union type for the icon content. 65 66**Atomic service API**: This API can be used in atomic services since API version 18. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70| Type | Description | 71| ----------------------------- |------------------------| 72| ResourceStr | Resource type for defining common icons. | 73| SymbolGlyphModifier | Symbol type for defining symbol icons.| 74 75## SubHeaderV2Title 76Defines the title settings for the subheader. 77 78**Decorator type**: @ObservedV2 79 80### Properties 81 82**Atomic service API**: This API can be used in atomic services since API version 18. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86| Name| Type| Mandatory| Decorator| Description | 87| -------- | -------- | -------- | -------- |------------------------------| 88| primaryTitle| [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Primary title.<br>Default value: **undefined** | 89| secondaryTitle| [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Secondary title.<br>Default value: **undefined** | 90| primaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | No| @Trace | Text attributes of the primary title, such as the font color, font size, and font weight.<br>Default value: **undefined** | 91| secondaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | No| @Trace | Text attributes of the secondary title, such as the font color, font size, and font weight.<br>Default value: **undefined**| 92 93### constructor 94 95constructor(options: SubHeaderV2TitleOptions) 96 97A constructor used to create a **SubHeaderV2Title** object. 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| options | [SubHeaderV2TitleOptions](#subheaderv2titleoptions) | Yes | Options for initializing the title.| 108 109## SubHeaderV2TitleOptions 110 111Defines the options for initializing a **SubHeaderV2Title** object. 112 113**Atomic service API**: This API can be used in atomic services since API version 18. 114 115**System capability**: SystemCapability.ArkUI.ArkUI.Full 116 117| Name| Type| Mandatory | Description | 118| -------- | -------- | -------- |-----------------------------| 119| primaryTitle| [ResourceStr](ts-types.md#resourcestr) | No| Primary title.<br>Default value: **undefined** | 120| secondaryTitle| [ResourceStr](ts-types.md#resourcestr) | No| Secondary title.<br>Default value: **undefined** | 121| primaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | No| Text attributes of the primary title, such as the font color, font size, and font weight.<br>Default value: **undefined**| 122| secondaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | No| Text attributes of the secondary title, such as the font color, font size, and font weight.<br>Default value: **undefined**| 123 124## SubHeaderV2Select 125 126Defines the content and events for selection. 127 128**Decorator type**: @ObservedV2 129 130### Properties 131 132**Atomic service API**: This API can be used in atomic services since API version 18. 133 134**System capability**: SystemCapability.ArkUI.ArkUI.Full 135 136| Name| Type | Mandatory| Decorator| Description | 137| -------- |------------------------------------------------------------------| -------- | -------- |---------------------------------------------------------------------------| 138| options | [SelectOption](ts-basic-components-select.md#selectoption)[] | Yes| @Trace | Options for the drop-down list box. | 139| selectedIndex | number | No|@Trace | Index of the initially selected item in the drop-down list box.<br>The index of the first item is 0.<br>If this property is not set, the default value **-1** is used, indicating that no item is selected. | 140| selectedContent | [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Text content of the drop-down button. Default value: **''**. The Resource type is supported since API version 20. | 141| onSelect | [SubHeaderV2SelectOnSelect](#subheaderv2selectonselect) | No| @Trace | Callback invoked when an item in the drop-down list box is selected.<br>Default value: **undefined** | 142| defaultFocus | boolean | No| @Trace |Whether the drop-down button is the default focus.<br>**true**: The drop-down button is the default focus.<br>**false**: The drop-down button is not the default focus.<br>Default value: **false** | 143 144### constructor 145 146constructor(options: SubHeaderV2SelectOptions) 147 148A constructor used to create a **SubHeaderV2SelectOptions** object. 149 150**Atomic service API**: This API can be used in atomic services since API version 18. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154**Parameters** 155 156| Name | Type | Mandatory| Description | 157| --------- |-------------------------------| ------ | ------------------ | 158| options | [SubHeaderV2SelectOptions](#subheaderv2selectoptions) | Yes | Configuration options of the drop-down list box.| 159 160## SubHeaderV2SelectOptions 161 162Defines the options for initializing a **SubHeaderV2Select** object. 163 164**Atomic service API**: This API can be used in atomic services since API version 18. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168| Name| Type | Mandatory | Description | 169| -------- |------------------------------------------------------------------| -------- |---------------------------------------------------------------------------| 170| options | [SelectOption](ts-basic-components-select.md#selectoption)[] | Yes| Options for the drop-down list box. | 171| selectedIndex | number | No| Index of the initially selected item in the drop-down list box.<br>The index of the first item is 0.<br>If this property is not set,<br>the default value **-1** is used, indicating that no item is selected.| 172| selectedContent | [ResourceStr](ts-types.md#resourcestr) | No| Text content of the drop-down button. Default value: **''**. The Resource type is supported since API version 20. | 173| onSelect | [SubHeaderV2SelectOnSelect](#subheaderv2selectonselect) | No| Callback invoked when an item in the drop-down list box is selected.<br>Default value: **undefined** | 174| defaultFocus | boolean | No| Whether the drop-down button is the default focus.<br>**true**: The drop-down button is the default focus.<br>**false**: The drop-down button is not the default focus.<br>Default value: **false** | 175 176## SubHeaderV2SelectOnSelect 177 178type SubHeaderV2SelectOnSelect = (selectedIndex: number, selectedContent?: string) => void 179 180Defines the callback invoked when an item in the drop-down list box is selected. 181 182**Atomic service API**: This API can be used in atomic services since API version 18. 183 184**System capability**: SystemCapability.ArkUI.ArkUI.Full 185 186**Parameters** 187 188| Name | Type | Mandatory| Description | 189|:--------------|:-------|:---|:-------------------------| 190| selectedIndex | number | Yes | Index of the selected item.| 191| selectedContent | string | No | Value of the selected item. | 192 193## SubHeaderV2OperationType 194 195Defines the style of elements in the operation area. 196 197**Atomic service API**: This API can be used in atomic services since API version 18. 198 199**System capability**: SystemCapability.ArkUI.ArkUI.Full 200 201| Name| Value| Description| 202| -------- | -------- | -------- | 203| TEXT_ARROW | 0 | Text button with a right arrow.| 204| BUTTON | 1 | Text button without a right arrow.| 205| ICON_GROUP | 2 | Icon-attached button (A maximum of three icons can be configured.)| 206| LOADING | 3 | Loading animation.| 207 208## SubHeaderV2OperationItemType 209 210type SubHeaderV2OperationItemType = ResourceStr | SymbolGlyphModifier 211 212Defines the union type for the content of elements in the operation area. 213 214**Atomic service API**: This API can be used in atomic services since API version 18. 215 216**System capability**: SystemCapability.ArkUI.ArkUI.Full 217 218| Type | Description | 219| ----------------------------- |-----------------------------------| 220| ResourceStr | String type for defining text display or common icons; resource type for defining common icons.| 221| SymbolGlyphModifier | Symbol type for defining symbol icons. | 222 223## SubHeaderV2OperationItem 224 225Represents an item in the operation area. 226 227**Decorator type**: @ObservedV2 228 229### Properties 230 231**Atomic service API**: This API can be used in atomic services since API version 18. 232 233**System capability**: SystemCapability.ArkUI.ArkUI.Full 234 235| Name| Type| Mandatory| Decorator| Description | 236| -------- | -------- | -------- | -------- |-----------------------------------------------------| 237| content | [SubHeaderV2OperationItemType](#subheaderv2operationitemtype) | Yes| @Trace | Content of the item in the operation area. | 238| action | [SubHeaderV2OperationItemAction](#subheaderv2operationitemaction)| No| @Trace | Event triggered when the item is operated. Default value: **() => void**. | 239| accessibilityText |[ResourceStr](ts-types.md#resourcestr) | No|@Trace | Accessibility text.<br>Default value: **undefined** | 240| accessibilityLevel |[string](ts-types.md#resourcestr) | No|@Trace | Accessibility level.<br>Default value: **"yes"** | 241| accessibilityDescription|[ResourceStr](ts-types.md#resourcestr) | No|@Trace | Accessibility description.<br>Default value: **"Double-tap to activate"**| 242| defaultFocus | boolean | No| @Trace |Whether to receive default focus.<br>**true**: Receive default focus.<br>**false**: Do not receive default focus.<br>Default value: **false** | 243 244### constructor 245 246constructor(options: SubHeaderV2OperationItemOptions) 247 248A constructor used to create a **SubHeaderV2OperationItem** object. 249 250**Atomic service API**: This API can be used in atomic services since API version 18. 251 252**System capability**: SystemCapability.ArkUI.ArkUI.Full 253 254**Parameters** 255 256| Name | Type | Mandatory| Description | 257| --------- | -------------------- | ------ | ------------------ | 258| options | SubHeaderV2OperationItemOptions| Yes | Configuration options of the operation item.| 259 260## SubHeaderV2OperationItemAction 261 262type SubHeaderV2OperationItemAction = () => void 263 264Defines the callback for items in the operation area. 265 266**Atomic service API**: This API can be used in atomic services since API version 18. 267 268**System capability**: SystemCapability.ArkUI.ArkUI.Full 269 270## SubHeaderV2OperationItemOptions 271 272Defines the options for initializing a **SubHeaderV2OperationItem** object. 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| Name | Type | Mandatory | Description | 279|--------------------------|---------------------------------------------| -------- |-----------------------------------------------------| 280| content | [SubHeaderV2OperationItemType](#subheaderv2operationitemtype) | Yes| Content of the item in the operation area. | 281| action | [SubHeaderV2OperationItemAction](#subheaderv2operationitemaction) | No| Event triggered when the item is operated. Default value: **() => void**. | 282| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text.<br>Default value: **undefined** | 283| accessibilityLevel | [string](ts-types.md#resourcestr) | No| Accessibility level.<br>Default value: **"yes"** | 284| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description.<br>Default value: **"Double-tap to activate"**| 285| defaultFocus | boolean | No| Whether to receive default focus.<br>**true**: Receive default focus.<br>**false**: Do not receive default focus.<br>Default value: **false** | 286 287## SubHeaderV2TitleBuilder 288 289type SubHeaderV2TitleBuilder= () => void 290 291Defines the callback used to customize the content of the title area. 292 293**Atomic service API**: This API can be used in atomic services since API version 18. 294 295**System capability**: SystemCapability.ArkUI.ArkUI.Full 296 297## Events 298The [universal events](ts-component-general-events.md) are not supported. 299 300## Example 301### Example 1: Implementing an Efficiency-Oriented Subheader 302This example demonstrates how to implement a subheader where the left side contains an icon and a secondary title, and the right side has a text button. 303 304```ts 305import { 306 SubHeaderV2OperationType, 307 SubHeaderV2, 308 SubHeaderV2Title, 309 SubHeaderV2OperationItem, 310 Prompt, 311 TextModifier 312} from '@kit.ArkUI'; 313 314@Entry 315@ComponentV2 316struct SubHeaderExample { 317 @Local selectText: string = "TTTTT" 318 @Local selectIndex: number = 2 319 @Local flag: boolean = true; 320 @Local index: number = 1; 321 @Local primaryTitle: ResourceStr = 'Primary title'; 322 @Local secondaryTitle: ResourceStr = 'Secondary title'; 323 @Local subHeaderIcon: Resource = $r('sys.media.ohos_ic_public_email'); 324 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title' }); 325 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 326 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 327 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.BUTTON; 328 @Local operationItems: SubHeaderV2OperationItem[] = []; 329 330 aboutToAppear(): void { 331 this.title = new SubHeaderV2Title({ 332 primaryTitle: this.primaryTitle, 333 secondaryTitle: this.secondaryTitle, 334 }); 335 this.operationItems = [new SubHeaderV2OperationItem({ 336 content: 'Operation', 337 action: () => { 338 Prompt.showToast({ message: 'demo2' }) 339 } 340 })] 341 } 342 343 build() { 344 Column() { 345 Column() { 346 SubHeaderV2({ 347 icon: this.subHeaderIcon, 348 title: this.title, 349 operationType: this.subHeaderOperationType, 350 operationItems: this.operationItems 351 }); 352 } 353 } 354 } 355} 356``` 357 358 359 360### Example 2: Implementing a Double-Line Text Content-rich Subheader 361This example showcases a subheader with a primary title and a secondary title on the left, and a text button with a right arrow on the right. 362 363```ts 364import { 365 SubHeaderV2OperationType, 366 SubHeaderV2, 367 SubHeaderV2Title, 368 SubHeaderV2OperationItem, 369 Prompt, 370 TextModifier 371} from '@kit.ArkUI'; 372 373@Entry 374@ComponentV2 375struct SubHeaderExample { 376 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title', secondaryTitle: 'Secondary title' }); 377 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 378 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 379 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.TEXT_ARROW; 380 @Local operationItems: SubHeaderV2OperationItem[] = []; 381 382 aboutToAppear(): void { 383 this.title = new SubHeaderV2Title({ 384 primaryTitle: 'Primary title', 385 secondaryTitle: 'Secondary title' 386 }); 387 this.operationItems = [new SubHeaderV2OperationItem({ 388 content: 'More', 389 action: () => { 390 Prompt.showToast({ message: 'demo2' }) 391 } 392 })] 393 } 394 395 build() { 396 Column() { 397 Column() { 398 SubHeaderV2({ 399 title: this.title, 400 operationType: this.subHeaderOperationType, 401 operationItems: this.operationItems 402 }); 403 } 404 } 405 } 406} 407``` 408 409 410 411### Example 3: Implementing a Spinner Content-rich Subheader 412This example showcases a subheader with content and events for selection on the left, and an icon-attached button on the right. 413 414```ts 415import { 416 SubHeaderV2, 417 SubHeaderV2OperationType, 418 SubHeaderV2OperationItem, 419 SubHeaderV2Title, 420 SubHeaderV2Select, 421 Prompt 422} from '@kit.ArkUI'; 423 424@Entry 425@ComponentV2 426struct SubHeaderExample { 427 @Local selectedValue: string = 'aaa'; 428 @Local selectedIndex: number = 0; 429 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title', secondaryTitle: 'Secondary title' }); 430 @Local operationItems: SubHeaderV2OperationItem[] = []; 431 @Local select: SubHeaderV2Select = 432 new SubHeaderV2Select({ options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }] }); 433 434 aboutToAppear(): void { 435 436 this.title = new SubHeaderV2Title({ 437 primaryTitle: 'Primary title', 438 secondaryTitle: 'Secondary title' 439 }); 440 441 this.selectedValue = 'selectDemo'; 442 this.select = new SubHeaderV2Select({ 443 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 444 selectedContent: this.selectedValue, 445 selectedIndex: this.selectedIndex, 446 onSelect: (index: number, value?: string) => { 447 Prompt.showToast({ message: 'selectdemo' }) 448 } 449 }) 450 451 this.operationItems = [ 452 new SubHeaderV2OperationItem({ 453 content: $r('sys.media.ohos_ic_public_email'), 454 action: () => { 455 Prompt.showToast({ message: 'demo' }) 456 } 457 }), 458 new SubHeaderV2OperationItem({ 459 content: $r('sys.media.ohos_ic_public_email'), 460 action: () => { 461 Prompt.showToast({ message: 'demo' }) 462 } 463 }), 464 new SubHeaderV2OperationItem({ 465 content: $r('sys.media.ohos_ic_public_email'), 466 action: () => { 467 Prompt.showToast({ message: 'demo' }) 468 } 469 })] 470 } 471 472 build() { 473 Column() { 474 Column() { 475 SubHeaderV2({ 476 select: this.select, 477 operationType: SubHeaderV2OperationType.ICON_GROUP, 478 operationItems: this.operationItems 479 }) 480 } 481 } 482 } 483} 484``` 485 486 487 488### Example 4: Setting the Icon Symbol for the Left Side 489This example demonstrates how to set the icon symbol for the left side of the subheader. 490 491```ts 492import { 493 SubHeaderV2, 494 SubHeaderV2OperationType, 495 SubHeaderV2OperationItem, 496 SubHeaderV2Title, 497 Prompt, 498 SymbolGlyphModifier 499} from '@kit.ArkUI'; 500 501@Entry 502@ComponentV2 503struct SubHeaderExample { 504 @Local icon: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 505 506 aboutToAppear(): void { 507 this.icon = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontSize(24); 508 this.icon.effectStrategy(SymbolEffectStrategy.HIERARCHICAL) 509 } 510 511 build() { 512 Column() { 513 SubHeaderV2({ 514 icon: this.icon, 515 title: new SubHeaderV2Title({ secondaryTitle: 'Title' }), 516 operationType: SubHeaderV2OperationType.BUTTON, 517 operationItems: [new SubHeaderV2OperationItem({ 518 content: 'Operation', 519 action: () => { 520 Prompt.showToast({ message: 'demo' }) 521 } 522 })] 523 }) 524 } 525 } 526} 527``` 528 529 530 531### Example 5: Setting the Icon Symbol for the Right Side 532The following example shows how to set **operationType** to **OperationType.ICON_GROUP** for the right side of the subheader, with **operationItem** set to a symbol icon. 533 534```ts 535import { 536 SubHeaderV2, 537 SubHeaderV2OperationType, 538 SubHeaderV2OperationItem, 539 SubHeaderV2Title, 540 SubHeaderV2Select, 541 Prompt, 542 SymbolGlyphModifier 543} from '@kit.ArkUI'; 544 545@Entry 546@ComponentV2 547struct SubHeaderExample { 548 @Local icon: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 549 @Local selectedValue: string = 'aaa'; 550 @Local selectedIndex: number = 2; 551 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title', secondaryTitle: 'Secondary title' }); 552 @Local operationItem: SubHeaderV2OperationItem[] = []; 553 @Local select: SubHeaderV2Select = 554 new SubHeaderV2Select({ options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }] }); 555 556 aboutToAppear(): void { 557 this.icon = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 558 this.icon.effectStrategy(SymbolEffectStrategy.HIERARCHICAL); 559 560 this.selectedValue = 'selectDemo'; 561 this.selectedIndex = 2; 562 this.title = new SubHeaderV2Title({ 563 primaryTitle: 'Primary title', 564 secondaryTitle: 'Secondary title' 565 }); 566 this.select = new SubHeaderV2Select({ 567 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 568 selectedContent: this.selectedValue, 569 selectedIndex: this.selectedIndex, 570 onSelect: (index: number, value?: string) => { 571 Prompt.showToast({ message: 'demo' }) 572 } 573 }) 574 575 this.operationItem = [ 576 new SubHeaderV2OperationItem({ 577 content: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')).fontWeight(FontWeight.Lighter), 578 action: () => { 579 Prompt.showToast({ message: 'demo1' }) 580 } 581 }), 582 new SubHeaderV2OperationItem({ 583 content: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')) 584 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 585 .fontColor([Color.Blue, Color.Grey, Color.Green]) 586 , 587 action: () => { 588 Prompt.showToast({ message: 'demo2' }) 589 } 590 }), 591 new SubHeaderV2OperationItem({ 592 content: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')) 593 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 594 .fontColor([Color.Blue, Color.Grey, Color.Green]) 595 , 596 action: () => { 597 Prompt.showToast({ message: 'demo3' }) 598 } 599 })] 600 } 601 602 build() { 603 Column() { 604 SubHeaderV2({ 605 select: this.select, 606 operationType: SubHeaderV2OperationType.ICON_GROUP, 607 operationItems: this.operationItem 608 }) 609 } 610 } 611} 612``` 613 614 615 616### Example 6: Customizing Title Content 617 This example demonstrates how to customize the title content with a **titleBuilder** object for the subheader. 618 619```ts 620import { 621 SubHeaderV2, 622 SubHeaderV2OperationType, 623 SubHeaderV2OperationItem, 624 SubHeaderV2Title, 625 Prompt 626} from '@kit.ArkUI'; 627 628@Entry 629@ComponentV2 630struct SubHeaderExample { 631 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title' }); 632 @Local operationItem: SubHeaderV2OperationItem[] = []; 633 634 aboutToAppear(): void { 635 this.title = new SubHeaderV2Title({ 636 primaryTitle: 'Primary title', 637 secondaryTitle: 'Secondary title' 638 }); 639 this.operationItem = [new SubHeaderV2OperationItem({ 640 content: 'More info', 641 action: () => { 642 Prompt.showToast({ message: 'demo' }) 643 } 644 })] 645 } 646 647 @Builder 648 TitleBuilder(): void { 649 Text('Custom title') 650 .fontSize(24) 651 .fontColor(Color.Blue) 652 .fontWeight(FontWeight.Bold) 653 } 654 655 build() { 656 Column() { 657 SubHeaderV2({ 658 titleBuilder: () => { 659 this.TitleBuilder(); 660 }, 661 title: this.title, 662 663 operationType: SubHeaderV2OperationType.TEXT_ARROW, 664 operationItems: this.operationItem 665 }) 666 } 667 } 668} 669``` 670 671 672 673### Example 7: Customizing the Title Style 674This example demonstrates how to set custom font styles for the primary and secondary titles. 675 676```ts 677import { 678 SubHeaderV2, 679 SubHeaderV2OperationType, 680 SubHeaderV2OperationItem, 681 SubHeaderV2Title, 682 Prompt, 683 TextModifier 684} from '@kit.ArkUI'; 685 686@Entry 687@ComponentV2 688struct SubHeaderExample { 689 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); 690 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); 691 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title' }); 692 @Local operationItems4: SubHeaderV2OperationItem[] = []; 693 694 aboutToAppear(): void { 695 this.title = new SubHeaderV2Title({ 696 primaryTitle: 'Primary title', 697 primaryTitleModifier: this.primaryModifier, 698 secondaryTitle: 'Secondary title', 699 secondaryTitleModifier: this.secondaryModifier 700 }); 701 this.operationItems4 = [new SubHeaderV2OperationItem({ 702 content: 'More info', 703 action: () => { 704 Prompt.showToast({ message: 'demo' }) 705 } 706 })] 707 } 708 709 build() { 710 Column() { 711 SubHeaderV2({ 712 title: this.title, 713 operationType: SubHeaderV2OperationType.TEXT_ARROW, 714 operationItems: this.operationItems4 715 }) 716 } 717 } 718} 719``` 720 721 722 723 724### Example 8: Implementing Announcement for the Button on the Right Side 725This example customizes the screen reader announcement text by setting the **accessibilityText**, **accessibilityDescription**, and **accessibilityLevel** properties of the button on the right side of the subheader. 726```ts 727import { 728 SubHeaderV2OperationType, 729 SubHeaderV2, 730 SubHeaderV2Title, 731 SubHeaderV2OperationItem, 732 SubHeaderV2IconType, 733 SubHeaderV2Select, 734 Prompt 735} from '@kit.ArkUI'; 736 737@Entry 738@ComponentV2 739struct SubHeaderExample { 740 @Local index: number = 1; 741 @Local primaryTitle: ResourceStr = 'Primary title'; 742 @Local secondaryTitle: ResourceStr = 'Secondary title'; 743 @Local subHeaderIcon: SubHeaderV2IconType | undefined = $r('sys.media.ohos_ic_public_email'); 744 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title' }); 745 @Local title2: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title', secondaryTitle: 'Secondary title' }); 746 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.BUTTON; 747 @Local subHeaderOperationType2: SubHeaderV2OperationType = SubHeaderV2OperationType.TEXT_ARROW; 748 @Local subHeaderOperationType3: SubHeaderV2OperationType = SubHeaderV2OperationType.ICON_GROUP; 749 @Local operationItems: SubHeaderV2OperationItem[] = []; 750 @Local selectedValue: string | undefined = 'selectDemo'; 751 @Local selectedIndex: number = 0; 752 @Local select: SubHeaderV2Select = 753 new SubHeaderV2Select({ options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }] }); 754 755 aboutToAppear(): void { 756 this.select = new SubHeaderV2Select({ options: [] }); 757 this.title = new SubHeaderV2Title({ 758 primaryTitle: this.primaryTitle, 759 secondaryTitle: this.secondaryTitle, 760 }); 761 this.operationItems = [new SubHeaderV2OperationItem({ 762 content: 'Operation', 763 action: () => { 764 Prompt.showToast({ message: 'demo2' }) 765 } 766 })] 767 } 768 769 build() { 770 Column() { 771 Column() { 772 SubHeaderV2({ 773 icon: this.subHeaderIcon, 774 title: this.title, 775 select: this.select, 776 operationType: this.subHeaderOperationType, 777 operationItems: this.operationItems 778 }); 779 Divider().color('grey').width('100%').height('2vp') 780 SubHeaderV2({ 781 title: this.title2, 782 select: this.select, 783 operationType: this.subHeaderOperationType2, 784 operationItems: this.operationItems 785 }); 786 Divider().color('grey').width('100%').height('2vp') 787 SubHeaderV2({ 788 select: new SubHeaderV2Select({ 789 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 790 selectedIndex: this.selectedIndex, 791 selectedContent: this.selectedValue, 792 onSelect: (index: number, value?: string) => { 793 this.selectedIndex = index; 794 this.selectedValue = value; 795 Prompt.showToast({ message: this.selectedValue }) 796 } 797 }), 798 operationType: this.subHeaderOperationType3, 799 operationItems: [new SubHeaderV2OperationItem({ 800 content: $r('sys.media.ohos_ic_public_email'), 801 accessibilityText: 'Icon 1', 802 accessibilityLevel: 'yes', 803 }), new SubHeaderV2OperationItem({ 804 content: $r('sys.media.ohos_ic_public_email'), 805 accessibilityText: 'Icon 2', 806 accessibilityLevel: 'no', 807 }), new SubHeaderV2OperationItem({ 808 content: $r('sys.media.ohos_ic_public_email'), 809 accessibilityText: 'Icon 3', 810 accessibilityDescription: 'Tap to operate icon 3', 811 })] 812 }); 813 } 814 Divider().color('grey').width('100%').height('2vp') 815 } 816 } 817} 818``` 819 820 821### Example 9: Implementing Announcement for the Button on the Right Side 822This example customizes the screen reader announcement text by setting the **accessibilityText**, **accessibilityDescription**, and **accessibilityLevel** properties of the button on the right side of the subheader. 823```ts 824import { 825 SubHeaderV2OperationType, 826 SubHeaderV2, 827 SubHeaderV2Title, 828 SubHeaderV2OperationItem, 829 Prompt, 830 TextModifier 831} from '@kit.ArkUI'; 832 833@Entry 834@ComponentV2 835struct SubHeaderExample { 836 @Local selectText: string = "TTTTT" 837 @Local selectIndex: number = 2 838 @Local flag: boolean = true; 839 @Local index: number = 1; 840 @Local primaryTitle: ResourceStr = 'Primary title'; 841 @Local secondaryTitle: ResourceStr = 'Secondary title'; 842 @Local subHeaderIcon: Resource = $r('app.media.app_icon'); 843 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: 'Primary title' }); 844 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 845 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 846 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.BUTTON; 847 @Local operationItems: SubHeaderV2OperationItem[] = []; 848 849 aboutToAppear(): void { 850 this.title = new SubHeaderV2Title({ 851 secondaryTitle: this.secondaryTitle, 852 }); 853 this.operationItems = [new SubHeaderV2OperationItem({ 854 content: 'Operation', 855 defaultFocus: true, 856 action: () => { 857 Prompt.showToast({ message: 'demo2' }) 858 } 859 })] 860 } 861 862 build() { 863 Column() { 864 Column() { 865 SubHeaderV2({ 866 icon: this.subHeaderIcon, 867 title: this.title, 868 operationType: this.subHeaderOperationType, 869 operationItems: this.operationItems 870 }); 871 } 872 } 873 } 874} 875``` 876 877
