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

发布于 2022-7-26 00:03
浏览
1收藏

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

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

效果图

话不多说,先上图
开发板是DAYU200体验官活动的开发板,感谢润和工程师们的努力以及官方给的活动,让我有一块使用流畅的开发板来做真机测试。
#夏日挑战赛# ETS自定义组件库PandaUI系列之PdButton-开源基础软件社区
可以看到,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
后续将持续更新更多更丰富的组件,敬请期待

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐