1# SubHeader
2
3
4子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容；也可以用于内容项顶部，子标题名称用来概括该区块内容。
5
6
7> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
9
10
11## 导入模块
12
13```ts
14import { SubHeader } from '@ohos.arkui.advanced.SubHeader'
15```
16
17
18## 子组件
19
20无
21
22
23## 接口
24
25SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>})
26
27**装饰器类型：**\@Component
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31
32**参数：**
33
34
35| 参数名 | 参数类型 | 必填 | 装饰器类型 | 参数描述 |
36| -------- | -------- | -------- | -------- | -------- |
37| primaryTitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 标题内容。 |
38| secondaryTitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 副标题内容。 |
39| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 图标设置项。 |
40| select | SelectOptions | 否 | - | select内容以及事件。 |
41| operationType | OperationType | 否 | \@Prop | 操作区(右侧)元素样式。<br/>默认值：OperationType.BUTTON |
42| operationItem | Array&lt;OperationOption&gt; | 否 | - | 操作区（右侧）的设置项。 |
43
44
45## OperationType枚举说明
46
47| 名称 | 描述 |
48| -------- | -------- |
49| TEXT_ARROW | 文本按钮（带右箭头）。 |
50| BUTTON | 文本按钮（不带右箭头）。 |
51| ICON_GROUP | 图标按钮（最多支持配置三张图标）。 |
52| LOADING | 加载动画。 |
53
54
55## SelectOptions
56
57| 名称 | 值 | 是否必填 | 描述 |
58| -------- | -------- | -------- | -------- |
59| options | Array&lt;[SelectOption](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md/)&gt; | 是 | 下拉选项内容。 |
60| selected | number | 否 | 设置下拉菜单初始选项的索引。<br/>第一项的索引为0。<br/>当不设置selected属性时，<br/>默认选择值为-1，菜单项不选中。 |
61| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 设置下拉按钮本身的文本内容。 |
62| onSelect | callback:&nbsp;(index:&nbsp;number,&nbsp;value?:&nbsp;string)&nbsp;=&gt;&nbsp;void | 否 | 下拉菜单选中某一项的回调。<br/>-&nbsp;index：选中项的索引。<br/>-&nbsp;value：选中项的值。 |
63
64
65## OperationOption
66
67| 名称 | 值 | 是否必填 | 描述 |
68| -------- | -------- | -------- | -------- |
69| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 文本内容。 |
70| action | ()=&gt;void | 否 | 事件。 |
71
72
73## 示例
74
75```ts
76import promptAction from '@ohos.promptAction'
77import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
78
79@Entry
80@Component
81struct SubHeaderExample {
82  build() {
83    Column() {
84      SubHeader({
85        icon: $r('app.media.ic_public_community_messages'),
86        primaryTitle: '子标题',
87        operationType: OperationType.BUTTON,
88        operationItem: [{ value: '操作',
89          action: () => {
90            promptAction.showToast({ message: 'demo' })
91          }
92        }]
93      })
94    }
95  }
96}
97```
98
99![子标题3](figures/zh-cn_image_202307291.png)
100
101```ts
102import promptAction from '@ohos.promptAction'
103import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
104
105@Entry
106@Component
107struct SubHeaderExample {
108  build() {
109    Column() {
110      SubHeader({
111        primaryTitle: '标题',
112        secondaryTitle: '副文本副文本副文本副文本',
113        operationType: OperationType.TEXT_ARROW,
114        operationItem: [{ value: '更多',
115          action: () => {
116            promptAction.showToast({ message: 'demo' })
117          }
118        }]
119      })
120    }
121  }
122}
123```
124
125![zh-cn_image_0000001664546481](figures/zh-cn_image_0000001664546481.png)
126
127```ts
128import promptAction from '@ohos.promptAction'
129import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'
130
131@Entry
132@Component
133struct SubHeaderExample {
134  build() {
135    Column() {
136      SubHeader({
137        select: {
138          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
139          value: 'selectdemo',
140          selected: 2,
141          onSelect: (index: number, value?: string) => {
142            promptAction.showToast({ message: 'demo' })
143          }
144        },
145        operationType: OperationType.ICON_GROUP,
146        operationItem: [{
147          value: $r('app.media.ic_public_community_messages'),
148          action: () => {
149            promptAction.showToast({ message: 'demo' })
150          }
151        }, {
152          value: $r('app.media.ic_public_community_messages'),
153          action: () => {
154            promptAction.showToast({ message: 'demo' })
155          }
156        }, {
157          value: $r('app.media.ic_public_community_messages'),
158          action: () => {
159            promptAction.showToast({ message: 'demo' })
160          }
161        }
162      })
163    }
164  }
165}
166```
167
168![子标题5](figures/zh-cn_image_2023072902.png)
169