@ohos.arkui.advanced.SubHeader (Subheader)

A 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.

NOTE

This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import { SubHeader } from '@ohos.arkui.advanced.SubHeader'

Child Components

Not supported

Attributes

The universal attributes are supported.

SubHeader

SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>})

Decorator: @Component

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Decorator	Description
primaryTitle	ResourceStr	No	@Prop	Title.
secondaryTitle	ResourceStr	No	@Prop	Secondary text.
icon	ResourceStr	No	@Prop	Icon.
select	SelectOptions	No	-	Content and events for selection.
operationType	OperationType	No	@Prop	Type of operation in the operation area (right). Default value: OperationType.BUTTON
operationItem	Array<OperationOption>	No	-	Settings of the operation in the operation area (right).

OperationType

Name	Value	Description
TEXT_ARROW	0	Text button with a right arrow.
BUTTON	1	Text button without a right arrow.
ICON_GROUP	2	Icon-attached button (A maximum of three icons can be configured.)
LOADING	3	Loading animation.

SelectOptions

Name	Type	Mandatory	Description
options	Array<SelectOption>	Yes	Value of an option in the drop-down list box.
selected	number	No	Index of the initial selected option in the drop-down list. The index of the first option is 0. If this attribute is not set, the default value -1 is used, indicating that the option is not selected.
value	string	No	Text content of the drop-down list button itself.
onSelect	(index: number, value?: string) => void	No	Invoked when an option in the drop-down list box is selected. - index: index of the selected option. - value: value of the selected option.

OperationOption

Name	Type	Mandatory	Description
value	ResourceStr	Yes	Text content.
action	()=>void	No	Event.

Events

The universal events are supported.

Example

Example 1

import promptAction from '@ohos.promptAction'
import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        icon: $r('app.media.ic_public_community_messages'),
        secondaryTitle: 'Subheader',
        primaryTitle: 'Subheader',
        operationType: OperationType.BUTTON,
        operationItem: [{ value: 'Operation',
          action: () => {
            promptAction.showToast({ message: 'demo' })
          }
        }]
      })
    }
  }
}

Subheader 3

Example 2

import promptAction from '@ohos.promptAction'
import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        primaryTitle: 'Title',
        secondaryTitle:'Secondary text',
        operationType: OperationType.TEXT_ARROW,
        operationItem: [{value:'More',
          action: () => {
            promptAction.showToast({ message: 'demo' })
          }
        }]
      })
    }
  }
}

en-us_image_0000001664546481

Example 3

import promptAction from '@ohos.promptAction'
import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader'

@Entry
@Component
struct SubHeaderExample {
  build() {
    Column() {
      SubHeader({
        select: {
          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
          value: 'selectdemo',
          selected: 2,
          onSelect: (index: number, value?: string) => {
            promptAction.showToast({ message: 'demo' })
          }
        },
        operationType: OperationType.ICON_GROUP,
        operationItem: [{
          value: $r('app.media.ic_public_community_messages'),
          action: () => {
            promptAction.showToast({ message: 'demo' })
          }
        }, {
          value: $r('app.media.ic_public_community_messages'),
          action: () => {
            promptAction.showToast({ message: 'demo' })
          }
        }, {
          value: $r('app.media.ic_public_community_messages'),
          action: () => {
            promptAction.showToast({ message: 'demo' })
          }
        }]
      })
    }
  }
}

Subheader 5