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