1# @ohos.arkui.advanced.SubHeader（子标题） 2 3 4子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容。也可以用于内容项顶部，子标题名称用来概括该区块内容。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14```ts 15import { SubHeader } from '@ohos.arkui.advanced.SubHeader' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24支持[通用属性](ts-universal-attributes-size.md) 25 26## SubHeader 27 28SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>}) 29 30**装饰器类型：**\@Component 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34 35**参数：** 36 37 38| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 39| -------- | -------- | -------- | -------- | -------- | 40| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 标题内容。 | 41| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 副标题内容。 | 42| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 图标设置项。 | 43| select | [SelectOptions](#selectoptions) | 否 | - | select内容以及事件。 | 44| operationType | [OperationType](#operationtype) | 否 | \@Prop | 操作区(右侧)元素样式。<br/>默认值：OperationType.BUTTON | 45| operationItem | Array<[OperationOption](#operationoption)> | 否 | - | 操作区（右侧）的设置项。 | 46 47 48## OperationType 49 50| 名称 | 值 | 说明 | 51| -------- | -------- | -------- | 52| TEXT_ARROW | 0 | 文本按钮（带右箭头）。 | 53| BUTTON | 1 | 文本按钮（不带右箭头）。 | 54| ICON_GROUP | 2 | 图标按钮（最多支持配置三张图标）。 | 55| LOADING | 3 | 加载动画。 | 56 57 58## SelectOptions 59 60| 名称 | 类型 | 必填 | 说明 | 61| -------- | -------- | -------- | -------- | 62| options | Array<[SelectOption](ts-basic-components-select.md#selectoption对象说明)> | 是 | 下拉选项内容。 | 63| selected | number | 否 | 设置下拉菜单初始选项的索引。<br/>第一项的索引为0。<br/>当不设置selected属性时，<br/>默认选择值为-1，菜单项不选中。 | 64| value | string | 否 | 设置下拉按钮本身的文本内容。 | 65| onSelect | (index: number, value?: string) => void | 否 | 下拉菜单选中某一项的回调。<br/>- index：选中项的索引。<br/>- value：选中项的值。 | 66 67 68## OperationOption 69 70| 名称 | 类型 | 必填 | 说明 | 71| -------- | -------- | -------- | -------- | 72| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 文本内容。 | 73| action | ()=>void | 否 | 事件。 | 74 75## 事件 76支持[通用事件](ts-universal-events-click.md) 77 78## 示例 79### 示例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: '子标题', 93 primaryTitle: '子标题', 94 operationType: OperationType.BUTTON, 95 operationItem: [{ value: '操作', 96 action: () => { 97 promptAction.showToast({ message: 'demo' }) 98 } 99 }] 100 }) 101 } 102 } 103} 104``` 105 106 107 108### 示例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: '标题', 121 secondaryTitle: '副文本副文本副文本副文本', 122 operationType: OperationType.TEXT_ARROW, 123 operationItem: [{ value: '更多', 124 action: () => { 125 promptAction.showToast({ message: 'demo' }) 126 } 127 }] 128 }) 129 } 130 } 131} 132``` 133 134 135 136### 示例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 180
