• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.advanced.SubHeader (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 '@ohos.arkui.advanced.SubHeader'
16```
17
18
19## Child Components
20
21Not supported
22
23## Attributes
24The [universal attributes](ts-universal-attributes-size.md) are supported.
25
26## SubHeader
27
28SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>})
29
30**Decorator**: @Component
31
32**System capability**: SystemCapability.ArkUI.ArkUI.Full
33
34
35**Parameters**
36
37
38| Name| Type| Mandatory| Decorator| Description|
39| -------- | -------- | -------- | -------- | -------- |
40| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | No| \@Prop | Title.|
41| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | No| \@Prop | Secondary text.|
42| icon | [ResourceStr](ts-types.md#resourcestr) | No| \@Prop | Icon.|
43| select | [SelectOptions](#selectoptions) | No| - | Content and events for selection.|
44| operationType | [OperationType](#operationtype) | No| \@Prop | Type of operation in the operation area (right).<br>Default value: **OperationType.BUTTON**|
45| operationItem | Array&lt;[OperationOption](#operationoption)&gt; | No| - | Settings of the operation in the operation area (right).|
46
47
48## OperationType
49
50| Name| Value| Description|
51| -------- | -------- | -------- |
52| TEXT_ARROW |  0  | Text button with a right arrow.|
53| BUTTON |  1  |  Text button without a right arrow.|
54| ICON_GROUP |  2  |  Icon-attached button (A maximum of three icons can be configured.)|
55| LOADING |  3  |  Loading animation.|
56
57
58## SelectOptions
59
60| Name| Type| Mandatory| Description|
61| -------- | -------- | -------- | -------- |
62| options | Array&lt;[SelectOption](ts-basic-components-select.md#selectoption)&gt; | Yes| Value of an option in the drop-down list box.|
63| 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.|
64| value | string | No| Text content of the drop-down list button itself.|
65| onSelect | (index: number, value?: string) =&gt; 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.|
66
67
68## OperationOption
69
70| Name| Type| Mandatory| Description|
71| -------- | -------- | -------- | -------- |
72| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Text content.|
73| action | ()=&gt;void | No| Event.|
74
75## Events
76The [universal events](ts-universal-events-click.md) are supported.
77
78## Example
79### Example 1
80
81```ts
82import promptAction from '@ohos.promptAction'
83import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
84
85@Entry
86@Component
87struct SubHeaderExample {
88  build() {
89    Column() {
90      SubHeader({
91        icon: $r('app.media.ic_public_community_messages'),
92        secondaryTitle: 'Subheader',
93        primaryTitle: 'Subheader',
94        operationType: OperationType.BUTTON,
95        operationItem: [{ value: 'Operation',
96          action: () => {
97            promptAction.showToast({ message: 'demo' })
98          }
99        }]
100      })
101    }
102  }
103}
104```
105
106![Subheader 3](figures/en-us_image_202307291.png)
107
108### Example 2
109
110```ts
111import promptAction from '@ohos.promptAction'
112import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
113
114@Entry
115@Component
116struct SubHeaderExample {
117  build() {
118    Column() {
119      SubHeader({
120        primaryTitle: 'Title',
121        secondaryTitle:'Secondary text',
122        operationType: OperationType.TEXT_ARROW,
123        operationItem: [{value:'More',
124          action: () => {
125            promptAction.showToast({ message: 'demo' })
126          }
127        }]
128      })
129    }
130  }
131}
132```
133
134![en-us_image_0000001664546481](figures/en-us_image_0000001664546481.png)
135
136### Example 3
137
138```ts
139import promptAction from '@ohos.promptAction'
140import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
141
142@Entry
143@Component
144struct SubHeaderExample {
145  build() {
146    Column() {
147      SubHeader({
148        select: {
149          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
150          value: 'selectdemo',
151          selected: 2,
152          onSelect: (index: number, value?: string) => {
153            promptAction.showToast({ message: 'demo' })
154          }
155        },
156        operationType: OperationType.ICON_GROUP,
157        operationItem: [{
158          value: $r('app.media.ic_public_community_messages'),
159          action: () => {
160            promptAction.showToast({ message: 'demo' })
161          }
162        }, {
163          value: $r('app.media.ic_public_community_messages'),
164          action: () => {
165            promptAction.showToast({ message: 'demo' })
166          }
167        }, {
168          value: $r('app.media.ic_public_community_messages'),
169          action: () => {
170            promptAction.showToast({ message: 'demo' })
171          }
172        }]
173      })
174    }
175  }
176}
177```
178
179![Subheader 5](figures/en-us_image_2023072902.png)
180