harmony学习Button组件

需求

熟悉Button组件默认提供的三种按钮样式，根据业务需要定义更丰富的样式。

Button样式

harmony组件Button提供三种按钮样式：

ButtonType.Normal ，矩形的按钮样式

//code by每日教程teachcourse.cnButton(\\\'立即登录\\\')  .fontSize($r(\\\'app.float.px28\\\'))  .fontColor($r(\\\'app.color.white\\\'))  .width(\\\'95%\\\')  .type(ButtonType.Normal)  .height($r(\\\'app.float.px66\\\'))  .onClick(() => {    this.login()  })

ButtonType.Capsule ，胶囊的按钮样式（默认样式）

//code by每日教程teachcourse.cnButton(\\\'立即登录\\\')  .fontSize($r(\\\'app.float.px28\\\'))  .fontColor($r(\\\'app.color.white\\\'))  .width(\\\'95%\\\')  .type(ButtonType.Capsule)  .height($r(\\\'app.float.px66\\\'))  .onClick(() => {    this.login()  })

harmony学习Button组件

ButtonType.Circle ，圆形的按钮样式

//code by每日教程teachcourse.cnButton(\\\'立即登录\\\')  .fontSize($r(\\\'app.float.px28\\\'))  .fontColor($r(\\\'app.color.white\\\'))  .width(\\\'95%\\\')  .type(ButtonType.Circle)  .height($r(\\\'app.float.px66\\\'))  .onClick(() => {    this.login()  })

自定义样式

使用 .borderRadius() 自定义圆角的大小

//code by每日教程teachcourse.cnButton(\\\'立即登录\\\')  .fontSize($r(\\\'app.float.px28\\\'))  .fontColor($r(\\\'app.color.white\\\'))  .width(\\\'95%\\\')  .type(ButtonType.Circle)  .height($r(\\\'app.float.px66\\\'))  .borderRadius(5)//定义圆角的大小  .onClick(() => {    this.login()  })

原创文章，作者：网络技术联盟站，如若转载，请注明出处：https://www.sudun.com/ask/49777.html