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> **说明：** 27> 28> 不支持设置[文本通用属性](ts-universal-attributes-text-style.md)。 29 30## SubHeader 31 32SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>}) 33 34**装饰器类型：**\@Component 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38 39**参数：** 40 41 42| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 43| -------- | -------- | -------- | -------- | -------- | 44| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 标题内容。 | 45| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 副标题内容。 | 46| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 图标设置项。 | 47| select | [SelectOptions](#selectoptions) | 否 | - | select内容以及事件。 | 48| operationType | [OperationType](#operationtype) | 否 | \@Prop | 操作区(右侧)元素样式。<br/>默认值：OperationType.BUTTON | 49| operationItem | Array<[OperationOption](#operationoption)> | 否 | - | 操作区（右侧）的设置项。 | 50 51 52## OperationType 53 54| 名称 | 值 | 说明 | 55| -------- | -------- | -------- | 56| TEXT_ARROW | 0 | 文本按钮（带右箭头）。 | 57| BUTTON | 1 | 文本按钮（不带右箭头）。 | 58| ICON_GROUP | 2 | 图标按钮（最多支持配置三张图标）。 | 59| LOADING | 3 | 加载动画。 | 60 61 62## SelectOptions 63 64| 名称 | 类型 | 必填 | 说明 | 65| -------- | -------- | -------- | -------- | 66| options | Array<[SelectOption](ts-basic-components-select.md#selectoption对象说明)> | 是 | 下拉选项内容。 | 67| selected | number | 否 | 设置下拉菜单初始选项的索引。<br/>第一项的索引为0。<br/>当不设置selected属性时，<br/>默认选择值为-1，菜单项不选中。 | 68| value | string | 否 | 设置下拉按钮本身的文本内容。 | 69| onSelect | (index: number, value?: string) => void | 否 | 下拉菜单选中某一项的回调。<br/>- index：选中项的索引。<br/>- value：选中项的值。 | 70 71 72## OperationOption 73 74| 名称 | 类型 | 必填 | 说明 | 75| -------- | -------- | -------- | -------- | 76| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 文本内容。 | 77| action | ()=>void | 否 | 事件。 | 78 79## 事件 80支持[通用事件](ts-universal-events-click.md) 81 82## 示例 83### 示例1 84 85```ts 86import promptAction from '@ohos.promptAction' 87import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader' 88 89@Entry 90@Component 91struct SubHeaderExample { 92 build() { 93 Column() { 94 SubHeader({ 95 icon: $r('app.media.ic_public_community_messages'), 96 secondaryTitle: '子标题', 97 primaryTitle: '子标题', 98 operationType: OperationType.BUTTON, 99 operationItem: [{ value: '操作', 100 action: () => { 101 promptAction.showToast({ message: 'demo' }) 102 } 103 }] 104 }) 105 } 106 } 107} 108``` 109 110 111 112### 示例2 113 114```ts 115import promptAction from '@ohos.promptAction' 116import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader' 117 118@Entry 119@Component 120struct SubHeaderExample { 121 build() { 122 Column() { 123 SubHeader({ 124 primaryTitle: '标题', 125 secondaryTitle: '副文本副文本副文本副文本', 126 operationType: OperationType.TEXT_ARROW, 127 operationItem: [{ value: '更多', 128 action: () => { 129 promptAction.showToast({ message: 'demo' }) 130 } 131 }] 132 }) 133 } 134 } 135} 136``` 137 138 139 140### 示例3 141 142```ts 143import promptAction from '@ohos.promptAction' 144import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader' 145 146@Entry 147@Component 148struct SubHeaderExample { 149 build() { 150 Column() { 151 SubHeader({ 152 select: { 153 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 154 value: 'selectdemo', 155 selected: 2, 156 onSelect: (index: number, value?: string) => { 157 promptAction.showToast({ message: 'demo' }) 158 } 159 }, 160 operationType: OperationType.ICON_GROUP, 161 operationItem: [{ 162 value: $r('app.media.ic_public_community_messages'), 163 action: () => { 164 promptAction.showToast({ message: 'demo' }) 165 } 166 }, { 167 value: $r('app.media.ic_public_community_messages'), 168 action: () => { 169 promptAction.showToast({ message: 'demo' }) 170 } 171 }, { 172 value: $r('app.media.ic_public_community_messages'), 173 action: () => { 174 promptAction.showToast({ message: 'demo' }) 175 } 176 }] 177 }) 178 } 179 } 180} 181``` 182 183 184
