36 lines
1.1 KiB
Plaintext
36 lines
1.1 KiB
Plaintext
import { AppColor, AppFontSize, AppRadius } from '../theme/Theme';
|
|
|
|
/**
|
|
* 分段切换控件：多个等宽选项，选中项白底金字。
|
|
* 用于「周/月/年计划」类型切换、「小组/个人」tab 切换。
|
|
*/
|
|
@ComponentV2
|
|
export struct SegmentedControl {
|
|
@Param items: string[] = [];
|
|
@Param selectedIndex: number = 0;
|
|
@Event onSelect: (index: number) => void;
|
|
|
|
build() {
|
|
Row() {
|
|
ForEach(this.items, (item: string, index: number) => {
|
|
Text(item)
|
|
.fontSize(AppFontSize.body)
|
|
.fontWeight(index === this.selectedIndex ? FontWeight.Bold : FontWeight.Normal)
|
|
.fontColor(index === this.selectedIndex ? AppColor.gold : AppColor.textMuted)
|
|
.backgroundColor(index === this.selectedIndex ? AppColor.white : Color.Transparent)
|
|
.borderRadius(AppRadius.pill)
|
|
.textAlign(TextAlign.Center)
|
|
.height(36)
|
|
.layoutWeight(1)
|
|
.onClick(() => {
|
|
this.onSelect(index);
|
|
})
|
|
}, (item: string) => item)
|
|
}
|
|
.width('100%')
|
|
.padding(4)
|
|
.backgroundColor(AppColor.segmentedTrack)
|
|
.borderRadius(AppRadius.pill)
|
|
}
|
|
}
|