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' });
}
}]
})
}
}
}
}