返回发烧友论坛
发 帖  

[文章]HarmonyOS UI组件在线预览，程序员直呼“不要太方便~”

HarmonyOS开发者社区
2022-03-10 14:22:41
阅读量0
HarmonyOSIDEui组件
0
2
一、介绍

以往大家如果想查看组件的使用效果，需要打开DevEco Studio构建工程。现在为了便于大家高效开发，文档上线了JS UI组件在线预览功能，无需本地构建工程，在线即可修改组件样式等参数、一键预览编译效果。程序员直呼：简直不要太方便啦！

让我们通过下面这张动图看一下效果~


看完动图，你是不是也跃跃欲试？心动不如行动，复制下方链接，赶紧用起来吧~

JS API参考文档（以Button组件为例）：

二、组件功能和开发步骤

目前我们已经上线了5个组件的在线预览功能，分别为Button、List、Input、Image和Dialog。其中Input、Image和Dialog是近日上线的组件。接下来我们将以Button组件为例，为大家介绍组件的功能和开发步骤。

注：因篇幅有限，此处不再赘述其他组件，大家可自行前往官网查阅（末尾有组件链接哦~）。

1. Button

(1)功能介绍：

Button是按钮组件，用来响应用户的点击操作，类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮和下载按钮。开发者们可以在按钮上绑定事件来响应点击操作后的自定义行为。

在线预览效果（图1）：

图1 Button在线预览示例图

(2)开发步骤：

① 首先，在hml文件中创建一个基本的按钮组件（图2），并在css文件中添加样式。
  1. <!-- xxx.hml -->
  2. <button class="buttons">按钮</button>
复制代码
  1. /* xxx.css */
  2. .buttons {
  3.   margin-top: 15px;
  4.   width: 45%;
  5.   height: 45px;
  6.   text-align: center;
  7.   font-size: 14px;
  8.   border-radius: 10px;
  9.   background-color: #317aff;
  10. }
复制代码
图2 普通按钮效果图

② 接着，将按钮文本更改为Loading（图3），添加waiting属性来显示按钮的等待效果。
  1. <!-- xxx.hml -->
  2. <button class="buttons" waiting="true">Loading</button>
复制代码
图3 加载按钮效果图

③ 最后，为按钮绑定setProgress方法来实时显示下载进度条的进度（图4），同时在js文件中对setProcess方法进行自定义，实现进度条的递增显示效果。
  1. <!-- xxx.hml -->
  2. <button class="buttons" id="download-btn" waiting="true" type="download">{{downloadText}}</button>
复制代码
  1. // xxx.js
  2. export default {
  3. data: {
  4.     progress: 10,
  5.     downloadText: "进度条按钮"
  6.     },
  7.     setProgress(e) {
  8.      var i=0
  9.      var set= setInterval(()=>{
  10.         i+=10
  11.         this.progress=i
  12.         this.downloadText = this.progress + "%";
  13.         this.$element('download-btn').setProgress({ progress: this.progress });
  14.         if(this.progress>=100){
  15.             clearInterval(set)
  16.             this.downloadText="完成"
  17.         }
  18.     },1000)
  19. }
  20. }                      }
复制代码


图4 进度条显示效果图

其他组件请复制下方链接，自行前往官网查看：
Input组件：
List组件：
Image组件：
Dialog组件：

三、结语

好了，以上就是本期全部内容，期待大家通过JS UI在线预览实现精美的组件，也欢迎大家持续关注开发者文档上新内容。

大家可以通过官网在线反馈更多意见和需求哦！

[attach]1163207[/attach]

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友