天天看点
返回

#夏日挑战赛# ETS自定义组件库PandaUI系列之PdButton

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

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

效果图

话不多说，先上图

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

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

使用方式

成果我们看到了，那么该怎么用，使用起来复不复杂尼？

1.npm 导入

在IDE的终端中执行

npm install @ohos/panda-ui
（ps:目前尚未上传到openharmony仓库，正在努力上传中，此处介绍上传后使用方式）急于体验可以从git拉取源码，并以导入本地组件方式引入

2.引入PdButton组件

在需要使用到该组件的地方使用

import { PdButton } from '@ohos/panda-ui'

3.PdButton具体使用方式

从上图我们可以看到我们展示了各式各样的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的相关属性

参数 说明 类型 可选值 默认值
label 文字 string - -
type 类型 string primary/success/warning/danger/info -
size 尺寸 string medium/small/mini -
plain 是否为朴素按钮 boolean - false
round 是否为圆角按钮 boolean - false
circle 是否为圆形按钮 boolean - false
disabled 是否禁用 boolean - false
options 其它参数 object - false

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

参数 说明 类型 可选值 默认值
style 样式 json - -
click 点击事件 function - -
touchDown 触摸按下事件 function - -
touchUp 触摸后松开事件 function - -
touchMove 触摸移动事件 function - -
touchCancel 触摸取消事件 function - -
appear 组件显示后的回调 function - -
disappear 组件销毁后的回调 function - -

style的json参数将在下个文章进行讲解，可参考css规则或官方文档中公共属性章节。

该仓库已开源至Git仓库PandaUI

后续将持续更新更多更丰富的组件，敬请期待

ets 自定义组件 三方组件库 PandaUI
上一篇: #夏日挑战赛#【FFH】JS自定义组件：DIY一个随点随用的键盘！(二)
下一篇: #夏日挑战赛# HarmonyOS - 实现电动小风扇

继续阅读