1# SubHeader 2 3 4A subheader 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 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Modules to Import 13 14```ts 15import { SubHeader } from '@kit.ArkUI' 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-universal-attributes-size.md) are supported. 25 26> **NOTE** 27> 28> The [universal text attributes](ts-universal-attributes-text-style.md) are not supported. 29 30## SubHeader 31 32SubHeader({icon?: ResourceStr, iconSymbolOptions?: SymbolOptions, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>, operationSymbolOptions?: Array<SymbolOptions>}) 33 34**Decorator**: @Component 35 36**System capability**: SystemCapability.ArkUI.ArkUI.Full 37 38 39**Parameters** 40 41 42| Name| Type| Mandatory| Decorator| Description| 43| -------- | -------- | -------- | -------- | -------- | 44| icon | [ResourceStr](ts-types.md#resourcestr) | No| \@Prop | Icon.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 45| iconSymbolOptions<sup>12+</sup> | [SymbolOptions](#symboloptions12) | No| - | Icon symbol options. This parameter is available when **icon** is set to a [symbol glyph](ts-basic-components-symbolGlyph.md).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 46| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | No| \@Prop | Primary title.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 47| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | No| \@Prop | Secondary title.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 48| select | [SelectOptions](#selectoptions) | No| - | Content and events for selection.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 49| operationType | [OperationType](#operationtype) | No| \@Prop | Type of operation in the operation area (right).<br>Default value: **OperationType.BUTTON**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 50| operationItem | Array<[OperationOption](#operationoption)> | No| - | Items in the operation area (right).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 51| operationSymbolOptions<sup>12+</sup> | Array<[SymbolOptions](#symboloptions12)> | No| - | Icon symbol options.<br>This parameter is available when **operationType** is set to **OperationType.ICON_GROUP** and **operationItem** is set to an array of items.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 52| primaryTitleModifier<sup>12+</sup> | [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>**Atomic service API**: This API can be used in atomic services since API version 12.| 53| secondaryTitleModifier<sup>12+</sup> | [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>**Atomic service API**: This API can be used in atomic services since API version 12.| 54| titleBuilder<sup>12+</sup> | () => void | No| @BuildParam | Content of the custom title area.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 55| contentMargin<sup>12+</sup> | [LocalizedMargin](ts-types.md#localizedmargin12) | No| @Prop | Margin of the content. Negative numbers are not supported.<br>Default value:<br> `{start: LengthMetrics.resource(` <br> `$r('sys.float.margin_left'))`, <br> `end: LengthMetrics.resource(` <br> `$r('sys.float.margin_right'))}`<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 56| contentPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | No| @Prop | Padding of the content.<br>Default value:<br>If a secondary title, with or without an icon, is displayed on the left:<br> {start: LengthMetircs.vp(12), end: LengthMetrics.vp(12)}<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 57 58 59## OperationType 60 61**Atomic service API**: This API can be used in atomic services since API version 11. 62 63| Name| Value| Description| 64| -------- | -------- | -------- | 65| TEXT_ARROW | 0 | Text button with a right arrow.| 66| BUTTON | 1 | Text button without a right arrow.| 67| ICON_GROUP | 2 | Icon-attached button (A maximum of three icons can be configured.)| 68| LOADING | 3 | Loading animation.| 69 70## SelectOptions 71 72**Atomic service API**: This API can be used in atomic services since API version 11. 73 74| Name| Type| Mandatory| Description| 75| -------- | -------- | -------- | -------- | 76| options | Array<[SelectOption](ts-basic-components-select.md#selectoption)> | Yes| Value of an option in the drop-down list box.| 77| selected | number | No| Index of the initial selected option in the drop-down list.<br>The index of the first option is 0.<br>If this attribute is not set,<br>the default value **-1** is used, indicating that the option is not selected.| 78| value | string | No| Text content of the drop-down list button itself.| 79| onSelect | (index: number, value?: string) => void | No| Invoked when an option in the drop-down list box is selected.<br>- **index**: index of the selected option.<br>- **value**: value of the selected option.| 80 81## OperationOption 82 83**Atomic service API**: This API can be used in atomic services since API version 11. 84 85| Name| Type| Mandatory| Description| 86| -------- | -------- | -------- | -------- | 87| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Text content.| 88| action | ()=>void | No| Event.| 89 90## SymbolOptions<sup>12+</sup> 91 92**Atomic service API**: This API can be used in atomic services since API version 12. 93 94| Name| Type| Mandatory| Description| 95| -------- | -------- | -------- | -------- | 96| fontColor | [ResourceStr](ts-types.md#resourcestr) | No| Color of the [symbol glyph](ts-basic-components-symbolGlyph.md).<br>Default value: depending on the rendering strategy| 97| fontSize | number \|string \|[Resource](ts-types.md#Resource) | No| Size of the [symbol glyph](ts-basic-components-symbolGlyph.md).<br>Default value: system default value| 98| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight)\|number \|string | No| Font weight of the [symbol glyph](ts-basic-components-symbolGlyph.md).<br>For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**.<br>For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal**| 99| renderingStrategy | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11) | No| Rendering strategy of the [symbol glyph](ts-basic-components-symbolGlyph.md).<br>Default value: **SymbolRenderingStrategy.SINGLE**<br>**NOTE**<br>For the resources referenced in **$r('sys.symbol.ohos_*')**, only **ohos_trash_circle**, **ohos_folder_badge_plus**, and **ohos_lungs** support the **MULTIPLE_COLOR** modes.| 100| effectStrategy | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11) | No| Effect strategy of the [symbol glyph](ts-basic-components-symbolGlyph.md).<br>Default value: **SymbolEffectStrategy.NONE**<br>**NOTE**<br>For the resources referenced in **$r('sys.symbol.ohos_*')**, only **ohos_wifi** supports the hierarchical effect.| 101 102## Events 103The [universal events](ts-universal-events-click.md) are supported. 104 105## Example 106### Example 1 107 108```ts 109import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 110 111@Entry 112@Component 113struct SubHeaderExample { 114 build() { 115 Column() { 116 SubHeader({ 117 icon: $r('app.media.ic_public_community_messages'), 118 secondaryTitle: 'Secondary title', 119 operationType: OperationType.BUTTON, 120 operationItem: [{ value: 'Operation', 121 action: () => { 122 promptAction.showToast({ message: 'demo' }) 123 } 124 }] 125 }) 126 } 127 } 128} 129``` 130 131 132 133### Example 2 134 135```ts 136import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 137 138@Entry 139@Component 140struct SubHeaderExample { 141 build() { 142 Column() { 143 SubHeader({ 144 primaryTitle: 'Primary title', 145 secondaryTitle: 'Secondary title', 146 operationType: OperationType.TEXT_ARROW, 147 operationItem: [{value:'More', 148 action: () => { 149 promptAction.showToast({ message: 'demo' }) 150 } 151 }] 152 }) 153 } 154 } 155} 156``` 157 158 159 160### Example 3 161 162```ts 163import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 164 165@Entry 166@Component 167struct SubHeaderExample { 168 build() { 169 Column() { 170 SubHeader({ 171 select: { 172 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 173 value: 'selectdemo', 174 selected: 2, 175 onSelect: (index: number, value?: string) => { 176 promptAction.showToast({ message: 'demo' }) 177 } 178 }, 179 operationType: OperationType.ICON_GROUP, 180 operationItem: [{ 181 value: $r('app.media.ic_public_community_messages'), 182 action: () => { 183 promptAction.showToast({ message: 'demo' }) 184 } 185 }, { 186 value: $r('app.media.ic_public_community_messages'), 187 action: () => { 188 promptAction.showToast({ message: 'demo' }) 189 } 190 }, { 191 value: $r('app.media.ic_public_community_messages'), 192 action: () => { 193 promptAction.showToast({ message: 'demo' }) 194 } 195 }] 196 }) 197 } 198 } 199} 200``` 201 202 203 204### Example 4 205 206```ts 207 208import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 209 210@Entry 211@Component 212struct SubHeaderExample { 213 build() { 214 Column() { 215 SubHeader({ 216 icon: $r('sys.symbol.ohos_wifi'), 217 iconSymbolOptions: { 218 effectStrategy: SymbolEffectStrategy.HIERARCHICAL, 219 }, 220 secondaryTitle: 'Title', 221 operationType: OperationType.BUTTON, 222 operationItem: [{ value: 'Operation', 223 action: () => { 224 promptAction.showToast({ message: 'demo' }) 225 } 226 }] 227 }) 228 } 229 } 230} 231``` 232 233 234 235### Example 5 236 237```ts 238import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 239 240@Entry 241@Component 242struct SubHeaderExample { 243 build() { 244 Column() { 245 SubHeader({ 246 select: { 247 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 248 value: 'selectdemo', 249 selected: 2, 250 onSelect: (index: number, value?: string) => { 251 promptAction.showToast({ message: 'demo' }) 252 } 253 }, 254 operationType: OperationType.ICON_GROUP, 255 operationItem: [{ 256 value: $r('sys.symbol.ohos_lungs'), 257 action: () => { 258 promptAction.showToast({ message: 'icon1' }) 259 } 260 }, { 261 value: $r('sys.symbol.ohos_lungs'), 262 action: () => { 263 promptAction.showToast({ message: 'icon2' }) 264 } 265 }, { 266 value: $r('sys.symbol.ohos_lungs'), 267 action: () => { 268 promptAction.showToast({ message: 'icon3' }) 269 } 270 }], 271 operationSymbolOptions: [{ 272 fontWeight: FontWeight.Lighter, 273 }, { 274 renderingStrategy: SymbolRenderingStrategy.MULTIPLE_COLOR, 275 fontColor: [Color.Blue, Color.Grey, Color.Green], 276 }, { 277 renderingStrategy: SymbolRenderingStrategy.MULTIPLE_OPACITY, 278 fontColor: [Color.Blue, Color.Grey, Color.Green], 279 }] 280 }) 281 } 282 } 283} 284``` 285 286 287 288### Example 6 289 290```ts 291// This example customizes the title content with a titleBuilder object in the SubHeader component. 292import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; 293 294@Entry 295@Component 296struct SubHeaderExample { 297 @Builder 298 TitleBuilder(): void { 299 Text('Custom title') 300 .fontSize(24) 301 .fontColor(Color.Red) 302 .fontWeight(FontWeight.Bold) 303 } 304 305 build() { 306 Column() { 307 SubHeader({ 308 titleBuilder: () => { 309 this.TitleBuilder(); 310 }, 311 primaryTitle: 'Primary title', 312 secondaryTitle: 'Secondary title', 313 icon: $r('sys.symbol.ohos_star'), 314 operationType: OperationType.TEXT_ARROW, 315 operationItem: [{ 316 value: 'More info', 317 action: () => { 318 promptAction.showToast({ message: 'demo'}) 319 } 320 }] 321 }) 322 } 323 } 324} 325``` 326 327 328 329### Example 7 330 331```ts 332// This example demonstrates how to set the font style, margin, and padding for the primary and secondary titles in the SubHeader component. 333import { promptAction, OperationType, SubHeader, LengthMetrics, TextModifier } from '@kit.ArkUI'; 334 335@Entry 336@Component 337struct SubHeaderExample { 338 @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 339 @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 340 341 build() { 342 Column() { 343 SubHeader({ 344 primaryTitle: 'primaryTitle', 345 secondaryTitle: 'secondaryTitle', 346 primaryTitleModifier: this.primaryModifier, 347 secondaryTitleModifier: this.secondaryModifier, 348 operationType: OperationType.TEXT_ARROW, 349 operationItem: [{ 350 value: 'More info', 351 action: () => { 352 promptAction.showToast({ message: 'demo'}) 353 } 354 }], 355 contentMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, 356 contentPadding: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) } 357 }) 358 } 359 } 360} 361``` 362 363 364
