#夏日挑战赛# ArkTS自定义组件库PandaUI系列之PdButton 原创 精华

【本文正在参加星光计划3.0—夏日挑战赛】

随着 OpenHarmony系统API的升级，自定义组件以及引用三方组件的能力也越来越强。忍了那么久，于是乎我终于没忍住，开始对ArkTS的自定义组件下手了。下面将展示PandaUI的第一个组件PdButton。

效果图

话不多说，先上图
开发板是DAYU200体验官活动的开发板，感谢润和工程师们的努力以及官方给的活动，让我有一块使用流畅的开发板来做真机测试。

可以看到，UI界面与ElementUI（前端的小伙伴可能比较熟悉）非常相似，因为配色方案就是根据ElementUI来做的，同时在使用逻辑上，也借鉴了很多ElementUI的东西。

使用方式

从git上拉取项目，引入PandaUI模块
从上图我们可以看到我们展示了各式各样的button按钮，我们以代码的方式一行一行展示
第一行中的6个基础按钮

 Row() {
        PdButton({ label: "默认按钮",options:{click:()=>{
          console.log("clicked")
        }}})
        PdButton({ label: "主要按钮",type:"primary",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "成功按钮",type:"success",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "信息按钮",type:"info",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "警告按钮",type:"warning",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "危险按钮",type:"danger",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")

第二行的朴素按钮

Row(){
        PdButton({ label: "朴素按钮",plain:true})
        PdButton({ label: "主要按钮",plain:true,type:"primary",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "成功按钮",plain:true,type:"success",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "信息按钮",plain:true,type:"info",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "警告按钮",plain:true,type:"warning",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "危险按钮",plain:true,type:"danger",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")

第三行的圆角按钮

Row(){
        PdButton({ label: "圆角按钮",round:true})
        PdButton({ label: "主要按钮",round:true,type:"primary",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "成功按钮",round:true,type:"success",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "信息按钮",round:true,type:"info",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "警告按钮",round:true,type:"warning",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "危险按钮",round:true,type:"danger",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")

第四行的圆形按钮

Row(){
        PdButton({ label: "Btn",circle:true})
        PdButton({ label: "Btn",circle:true,type:"primary",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "Btn",circle:true,type:"success",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "Btn",circle:true,type:"info",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "Btn",circle:true,type:"warning",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "Btn",circle:true,type:"danger",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")

第五、六行的禁用按钮

Row(){
        PdButton({ label: "禁用状态按钮",disabled:true})
        PdButton({ label: "主要按钮",disabled:true,type:"primary",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "成功按钮",disabled:true,type:"success",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "信息按钮",disabled:true,type:"info",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "警告按钮",disabled:true,type:"warning",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "危险按钮",disabled:true,type:"danger",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")
 Row(){
        PdButton({ label: "禁用朴素按钮",disabled:true})
        PdButton({ label: "主要按钮",disabled:true,plain:true,type:"primary",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "成功按钮",disabled:true,plain:true,type:"success",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "信息按钮",disabled:true,plain:true,type:"info",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "警告按钮",disabled:true,plain:true,type:"warning",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "危险按钮",disabled:true,plain:true,type:"danger",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")

第七、八行的不同大小的按钮

 Row(){
        PdButton({ label: "默认按钮"})
        PdButton({ label: "中等按钮",size:"medium",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "小型按钮",size:"small",options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "超小按钮",size:"mini",options:{style:{"margin-left":"20px"}}})
      }.margin("10px")
 Row(){
        PdButton({ label: "默认按钮",round:true})
        PdButton({ label: "中等按钮",size:"medium",round:true,options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "小型按钮",size:"small",round:true,options:{style:{"margin-left":"20px"}}})
        PdButton({ label: "超小按钮",size:"mini",round:true,options:{style:{"margin-left":"20px"}}})
      }.margin("10px")

通过代码我们可以看出，想要使用不同按钮非常简便，简单的设置属性值就可以，下面以表格形式展示PdButton的相关属性

options参数是对现有ArkTS自定义组件能力的一种妥协，原本计划给组件暴露方法，以链式方式进行调用，可经过尝试也未找到解决方案，目前已提Issues到OpenHarmony，希望在后续版本中支持。options参数如下

style的json参数将在下个文章进行讲解，可参考css规则或官方文档中公共属性章节。
该仓库已开源至Git仓库PandaUI
后续将持续更新更多更丰富的组件，敬请期待