ForCAX/entry/src/main/ets/pages/CustomStyle/Expandable.ets

44 lines
1.2 KiB
Plaintext

@ComponentV2
export struct Expandable {
// 通过属性传入的标题和内容
@Param title: string|undefined=undefined;
// 控制内容区域显示与隐藏的状态
@Consumer('isSubExpanded') isSubExpanded: boolean=true;
build(){
// 标题行
Row({ space: 5 }) {
// 切换按钮,显示向上或向下箭头
Button(this.isSubExpanded ? '▲' : '▼')
.type(ButtonType.Normal)
.fontSize(14)
.onClick(() => {
// 点击按钮时,切换 isSubExpanded 状态
this.isSubExpanded = !this.isSubExpanded;
})
Text(this.title)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Center)
}.width('100%')
}
}
@ComponentV2
export struct LeftSideTabExpan {
// 控制内容区域显示与隐藏的状态
@Consumer('isSubExpanded') isSubExpanded: boolean=true;
build(){
// 标题行
Row({ space: 0 }) {
// 切换按钮,显示向上或向下箭头
Button(this.isSubExpanded ? '◀' : '▶')
.type(ButtonType.Normal)
.fontSize(12)
.onClick(() => {
// 点击按钮时,切换 isSubExpanded 状态
this.isSubExpanded = !this.isSubExpanded;
})
}
}
}