feat(uikit): 引入明缘主题色板与通用组件
This commit is contained in:
33
uikit/src/main/ets/components/StatusPill.ets
Normal file
33
uikit/src/main/ets/components/StatusPill.ets
Normal file
@@ -0,0 +1,33 @@
|
||||
import { AppColor, AppFontSize, AppRadius } from '../theme/Theme';
|
||||
|
||||
/**
|
||||
* 可点选状态胶囊:选中态 = 状态色底白字,未选中 = 白底灰字。label/color 由调用方提供。
|
||||
*/
|
||||
@ComponentV2
|
||||
export struct StatusPill {
|
||||
@Param label: string = '';
|
||||
@Param color: string = AppColor.gold;
|
||||
@Param selected: boolean = false;
|
||||
@Event onTap: () => void;
|
||||
|
||||
build() {
|
||||
Row({ space: 6 }) {
|
||||
Row()
|
||||
.width(8)
|
||||
.height(8)
|
||||
.borderRadius(4)
|
||||
.backgroundColor(this.selected ? AppColor.white : this.color)
|
||||
Text(this.label)
|
||||
.fontSize(13)
|
||||
.fontColor(this.selected ? AppColor.white : AppColor.textSecondary)
|
||||
}
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.padding({ left: 16, right: 16, top: 10, bottom: 10 })
|
||||
.backgroundColor(this.selected ? this.color : AppColor.white)
|
||||
.border({ width: 1, color: this.selected ? this.color : AppColor.pillBorder })
|
||||
.borderRadius(AppRadius.pill)
|
||||
.onClick(() => {
|
||||
this.onTap();
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user