YTButton.ets 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. @Component
  2. export struct YTButton {
  3. btHeight: number = 37
  4. btWidth: Length = '100%'
  5. btContent: string = ''
  6. btPadding: Length | Padding = 0
  7. btFontSize: number = 12
  8. bgc?: ResourceColor
  9. btFontColor: ResourceColor = Color.White
  10. btBorder?: BorderOptions
  11. btState: boolean = true
  12. btBorderRadius: Length | BorderRadiuses | LocalizedBorderRadiuses = 999
  13. btLinearGradient?: LinearGradientOptions
  14. btFontFamily?: ResourceStr
  15. btFontWeight?: string | number | FontWeight
  16. btShadow?: ShadowOptions | ShadowStyle
  17. @State private isClick: boolean = true
  18. click = () => {
  19. }
  20. @Styles
  21. pressStyles() {
  22. .opacity(0.9)
  23. }
  24. @Styles
  25. normalStyles() {
  26. .opacity(1)
  27. }
  28. aboutToAppear(): void {
  29. if (!this.bgc) {
  30. this.btLinearGradient = { angle: 92, colors: [['#FF4597F7', 0.023], ['#FF6B6DF7', 1.081]] }
  31. }
  32. }
  33. build() {
  34. Text(this.btContent)
  35. .fontSize(this.btFontSize)
  36. .fontColor(this.btFontColor)
  37. .backgroundColor(this.bgc)
  38. .height(this.btHeight)
  39. .width(this.btWidth)
  40. .textAlign(TextAlign.Center)
  41. .onClick(() => {
  42. this.isClick = false
  43. this.click()
  44. setTimeout(() => {
  45. this.isClick = true
  46. }, 1000)
  47. })
  48. .padding(this.btPadding ?? {})
  49. .border(this.btBorder)
  50. .shadow(this.btShadow)
  51. .enabled(this.btState ?? this.isClick)
  52. .borderRadius(this.btBorderRadius)
  53. .linearGradient(this.btLinearGradient)
  54. .fontFamily(this.btFontFamily)
  55. .fontWeight(this.btFontWeight)
  56. .stateStyles({
  57. pressed: this.pressStyles,
  58. normal: this.normalStyles
  59. })
  60. }
  61. }