Skip to content

SubHeader

注意

子标题,用于列表项顶部,将该组列表划分为一个区块,子标题名称用来概括该区块内容。也可以用于内容项顶部,子标题名称用来概括该区块内容。 这个自己也能写.用的比较少

效果

子组件

参数

icon

图标

primaryTitle

一级标题

secondaryTitle

二级标题

operationItem

数组类型

  • value 就是文本

  • action 就是事件

js
operationItem: [
  {
    value: "更多",
    action: () => {
      promptAction.showToast({ message: "demo" });
    },
  },
];

select

下拉选择

js
 select: {
    // 下拉选项
    options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
    // 默认值
    value: 'selectDemo',
    // 默认初始
    selected: 2,
    // 选中事件
    onSelect: () => {
        promptAction.showToast({ message: 'demo' });
    }
},

operationType

  • OperationType.TEXT_ARROW 有箭头

  • OperationType.BUTTON 文本按钮

  • OperationType.LOADING 加载

右边是箭头还是 loading

属性

事件

示例

js
import { OperationType, promptAction, SubHeader } from '@kit.ArkUI';

@Entry
@Component
struct Index8 {
build() {
Column() {
Row() {
SubHeader({
icon: $r('sys.media.ohos_ic_public_email'),
secondaryTitle: '二级标题',
operationType: OperationType.TEXT_ARROW,
operationItem: [{
    value: '操作',
    action: () => {
        promptAction.showToast({ message: 'demo' });
    }
}]
})
}

Row() {
SubHeader({
primaryTitle: '一级标题',
secondaryTitle: '二级标题',
operationType: OperationType.TEXT_ARROW,
operationItem: [{
    value: '更多',
    action: () => {
        promptAction.showToast({ message: 'demo' });
    }
}]
})
}

Row() {
SubHeader({
// 左侧为select选择器
select: {
    options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
    value: 'selectDemo',
    selected: 2,
    onSelect: () => {
        promptAction.showToast({ message: 'demo' });
    }
},
operationType: OperationType.ICON_GROUP,
// 右侧为三个icon图标
operationItem: [{
    value: $r('sys.media.ohos_ic_public_email'),
    action: () => {
        promptAction.showToast({ message: 'demo' })
    }
}, {
    value: $r('sys.media.ohos_ic_public_email'),
    action: () => {
        promptAction.showToast({ message: 'demo' });
    }
}, {
    value: $r('sys.media.ohos_ic_public_email'),
    action: () => {
        promptAction.showToast({ message: 'demo' });
    }
}]
})
}
}

}
}