天天看點
傳回

#夏日挑戰賽# 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 - 實作電動小風扇

繼續閱讀